Jump to content
JChartFX Community

StatementSolutions

Members
  • Posts

    60
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by StatementSolutions

  1. when I just increase the width of the window with the pie chart there is not as much extra spaces on the top or bottom but the left and right side of the chart has aloty of extra spaces which I assume that is expected but if i increase the width and height of the window with the chart the top and bottom does not have as much extra space as the left and right side of the chart.
  2. I commented out the 3d and slicing. When the window size increases to a certain size the charts height is ok withouit extra spaces but the width has extra spaces on the left and right of the pie chart chart. The top and bottom of the chart does not have as much extra space.. If i decrease the window size the chart renders but than there is excess space around the chart. code: @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; <div class="widget-head" style="display:inline-block;overflow:no-content;height:10%;width:100%;"> <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div> <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div> </div> <div class="widget-body" style="display: inline-block;overflow: visible;height:100%;width:100%"> <div id="ChartDiv" style="width:100%;height:90%;position:absolute"></div> </div> <script type="text/javascript" language="javascript"> var chart@(Model.Widget.Id); function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); //var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); var pieAttr = chart@(Model.Widget.Id).getGalleryAttributes(); //pieAttr.setSliceSeparation(10); pieAttr.setLabelsInside(true); //pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); //chart@(Model.Widget.Id).getView3D().setEnabled(true); chart@(Model.Widget.Id).setDataSource(str); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); chart@(Model.Widget.Id).getLegendBox().setVisible(false); @*chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);*@ chart@(Model.Widget.Id).getPlotAreaMargin().setTop(1); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(1); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(1); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(1); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); }; </script> <style> svg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; } rect { position: absolute; width: 100%; height: 100%; left:0; right:0; top:0; bottom:0; } </style>
  3. It seems as the window of the chart is increased in size the chart increases but also there is more space especially to the left and right of the pie chart code: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> <script type="text/javascript" src="jchartfx.coreVector3d.js"> </script> </head> <body onload="onPageLoad()" onresize="onPageResize()"> <div id="myDiv" style="width:100%;height:100%;position:absolute"></div> <script language="javascript"> var chart1 = null; function onPageLoad() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Pie); chart1.getAllSeries().getPointLabels().setVisible(true); //var pieAttr = chart1.getAllSeries().getGalleryAttributes(); var pieAttr = chart1.getGalleryAttributes(); pieAttr.setSliceSeparation(20); pieAttr.setLabelsInside(true); pieAttr.setExplodingMode(cfx.ExplodingMode.First); chart1.getAllSeries().getPointLabels().setFormat("%p%%"); chart1.getAxisY().getDataFormat().setDecimals(2); chart1.getView3D().setEnabled(true); chart1.setDataSource([10,12,14,18]); chart1.getLegendBox().setVisible(false); chart1.getPlotAreaMargin().setTop(1); chart1.getPlotAreaMargin().setBottom(1); chart1.getPlotAreaMargin().setRight(1); chart1.getPlotAreaMargin().setLeft(1); chart1.create("myDiv"); }; function onPageResize() { if (chart1 != null) chart1.doUpdate(true); } </script> </body> </html>
  4. As the window with the chart is increased there will be more space around the chart. If the chart is as small as possible base on the window the space around the chart is not as much. I'm not sure if the watermark may cause more space around the chart as the window grows code: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jchartfx.system.js"> </script> <script type="text/javascript" src="jchartfx.coreVector.js"> </script> <script type="text/javascript" src="jchartfx.coreVector3d.js"> </script> </head> <body onload="onPageLoad()" onresize="onPageResize()"> <div id="myDiv" style="width:100%;height:100%;position:absolute"></div> <script language="javascript"> var chart1 = null; function onPageLoad() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Pie); chart1.getAllSeries().getPointLabels().setVisible(true); //var pieAttr = chart1.getAllSeries().getGalleryAttributes(); var pieAttr = chart1.getGalleryAttributes(); pieAttr.setSliceSeparation(20); pieAttr.setLabelsInside(true); pieAttr.setExplodingMode(cfx.ExplodingMode.First); chart1.getAllSeries().getPointLabels().setFormat("%p%%"); chart1.getAxisY().getDataFormat().setDecimals(2); chart1.getView3D().setEnabled(true); chart1.setDataSource([10,12,14,18]); chart1.getLegendBox().setVisible(false); chart1.getPlotAreaMargin().setTop(1); chart1.getPlotAreaMargin().setBottom(1); chart1.getPlotAreaMargin().setRight(1); chart1.getPlotAreaMargin().setLeft(1); chart1.create("myDiv"); }; function onPageResize() { if (chart1 != null) chart1.doUpdate(true); } </script> </body> </html>
  5. I palce a fixed width and height onto the div chart as indicated below in bold and now the widget with this pie chart renders but when I resize nothing happens to the chart. @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; <div class="widget-head" style="display:inline-block;overflow:no-content;height:10%;width:100%;"> <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div> <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div> </div> <div class="widget-body" style="display: inline-block;overflow: visible;height:100%;width:100%;"> <div class="widget-content" id="ChartDiv" style="display: inline-block;overflow: visible;height:400px;width:400px;"></div> </div> <script type="text/javascript" language="javascript"> var chart@(Model.Widget.Id); function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); //var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); var pieAttr = chart@(Model.Widget.Id).getGalleryAttributes(); pieAttr.setSliceSeparation(40); pieAttr.setLabelsInside(true); pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); chart@(Model.Widget.Id).getView3D().setEnabled(true); chart@(Model.Widget.Id).setDataSource(str); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); chart@(Model.Widget.Id).getLegendBox().setVisible(false); @*chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);*@ chart@(Model.Widget.Id).getPlotAreaMargin().setTop(1); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(1); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(1); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(1); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); }; </script> <style> svg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; } rect { position: absolute; width: 100%; height: 100%; left:0; right:0; top:0; bottom:0; } </style>
  6. 1) Does the chart generate the pie slices of an appropriate size when using a fixed div size, e.g. 400x400 I did modify the div using a fix size of 400x400. The pie chart slices does render and resizes when I resize the window. As the window with the jChartFx gets bigger there is more blank space around the pie chart as the pie chart grows. @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; <div class="widget-head" style="display:inline-block;overflow:no-content;height:10%;width:100%;"> <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div> <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div> </div> <div class="widget-body" style="display: inline-block;overflow: visible;height:400px;width:400px;"> <div class="widget-content" id="ChartDiv" ></div> </div> <script type="text/javascript" language="javascript"> var chart@(Model.Widget.Id); function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); //var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); var pieAttr = chart@(Model.Widget.Id).getGalleryAttributes(); pieAttr.setSliceSeparation(40); pieAttr.setLabelsInside(true); pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); chart@(Model.Widget.Id).getView3D().setEnabled(true); chart@(Model.Widget.Id).setDataSource(str); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); chart@(Model.Widget.Id).getLegendBox().setVisible(false); @*chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);*@ chart@(Model.Widget.Id).getPlotAreaMargin().setTop(1); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(1); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(1); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(1); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); }; </script> <style> svg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; } rect { position: absolute; width: 100%; height: 100%; left:0; right:0; top:0; bottom:0; } </style> 2) Does the chart reacts to changes in div size The chart does react as the window with the above changes
  7. How do I make the 'svg' and 'rect' obect width/height 100% with no margin or very low margin so that its responsive and take more of the empty space surrounding the pie chart. this svg and rect object is created via jChartFx.
  8. I fixed the js error. That was not the cause for the chart not fiolling out more of the white space. When I debug the chart i noticed the following is being created on the jchartfx: <svg id="chart" class="jchartfx" width="518" height="297" xmlns="http://www.w3.org/2000/svg"xmlns:sfx="http://www.softwarefx.com/ns" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect class="Border" pointer-events="none" x="0.5" y="0.5" width="517" height="296"> How can I increase the width/height for both 'svg' and 'rect' that is rendered via jChartFx?
  9. as indicated from a prior post if you place a percentage amount as a width and height of the div where the jchartfx to be rendered it throws an error on a jchartfx javacsript. your sample: <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> my sample: <div id="myDiv" style="width:100%;height:90%;display:inline-block"></div> javscript error message htornw when using a % cvalue as height or widht on the div: Error: Invalid negative value for <svg> attyribute height="-7". r._Soz @jchartfx.system.js:150
  10. From your example you use finite amount to determine width and height of the chart. <div id="myDiv" style="width:600px;height:400px;display:inline-block"></div> From a CSS we are using percentage to determine width and height of the chart to be created. #ChartDiv { display: inline-block; overflow: visible; height: 90%; width:100%; background: #eeeeee; } <div class="widget-content" id="ChartDiv"></div> This web page with the jchartfx pie chart is a widget with lots of jaavscript to make the window can be dragged-and-dropped and resizabe. As ithe window is resized the jchart pie chart should be responsice enough and resize proportion to the resized page without so much white space around the jchartfx pie chart. I would need to include quite a few jaavscript, and css that makes this web page drag-and-drop and resizeable. ChartData2.xml
  11. It seems that the jChartFx doex not like % value for height or width. The percentage value throws this error: I used % values for width and heoght so that as the widget is resized the jChartFX chart is resized. I still don't know how to increase the size of the chart so that it takes more of the white space from the page. Error: Invalid negative value for <svg> attribute height="-7" r._Sos @jchartfx.system.js:150 CSS: display: inline-block; overflow: visible; height: 90%; width:100%; background: #eeeeee;
  12. I also noticed there was a jchartfx JS error. I am not sure if this may be causing the pie chart to not fill out more of the white space on the page. Error: Invalid negative value for <svg> attribute height="-7" r._Sos @jchartfx.system.js:150
  13. I did set the margin to 0 as you can see on below code. I want to increase/decrase the chart as the widget seize increase/decrease. I am having problems trying to include an image on the pie chart to show you the white space around the pie chart. It says you are not allowed to use that image extension on this comunity'. I noticed the jChartFx is rendered on a 'svg' with the width and height info. Please advise Code: @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;"> <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div> <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div> </div> <div class="widget-body" style="display: inline-block;overflow: visible;height:100%;width:100%;"> <div class="widget-content" id="ChartDiv" style="display: inline-block; overflow: visible;height: 90%;width:100%; "></div> </div> <script type="text/javascript" language="javascript"> var chart@(Model.Widget.Id); function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); pieAttr.setSliceSeparation(50); pieAttr.setLabelsInside(false); pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); chart@(Model.Widget.Id).getView3D().setEnabled(true); chart@(Model.Widget.Id).setDataSource(str); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); chart@(Model.Widget.Id).getLegendBox().setVisible(false); @*chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);*@ chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); }; </script>
  14. My jCharFx pie chart is kinda small. There is alot of empty space around the chart. I am trying to expand the jChartFx pie chart to take more of the empty space of the page. Below is my code. code: @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;"> <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div> <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div> </div> <div class="widget-body" style="display: inline-block;overflow: visible;height:100%;width:100%;"> <div class="widget-content" id="ChartDiv" style="display: inline-block; overflow: visible;height:90%;width:100%;"></div> </div> <script type="text/javascript" language="javascript"> var chart@(Model.Widget.Id); function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); pieAttr.setSliceSeparation(50); pieAttr.setLabelsInside(false); pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); chart@(Model.Widget.Id).getView3D().setEnabled(true); chart@(Model.Widget.Id).setDataSource(str); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); chart@(Model.Widget.Id).getLegendBox().setVisible(false); @*chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);*@ chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); }; </script>
  15. when I placed the label inside the pie chart(Code in bold). When i decrease the size of the page with the jChartFx pie chart the label inside the chart gets pushed outside of the pie chart with pointers. It seem after a certain size of the page where the jChartFx pie chart is on it pushes the label outside of the pie chart. How can I make the label inside the pie chart stay inside the pie chart no matter what size the page with jChartFx pie chart is? code: @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;"> <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div> <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div> </div> <div class="widget-body" style="display: inline-block;overflow: visible;height:100%;width:100%;"> <div class="widget-content" id="ChartDiv" style="display: inline-block; overflow: visible;height:90%;width:100%;"></div> </div> <script type="text/javascript" language="javascript"> var chart@(Model.Widget.Id); function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); pieAttr.setSliceSeparation(50); pieAttr.setLabelsInside(true); pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); chart@(Model.Widget.Id).getView3D().setEnabled(true); chart@(Model.Widget.Id).setDataSource(str); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); chart@(Model.Widget.Id).getLegendBox().setVisible(false); @*chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);*@ chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); }; </script>
  16. How can I make the jChartFx pie chart responsize in size? There is a lot of empty space around the chart. I want to be able to increase/decrease the size of the jChartFx chart as the window increase/decrease. Thx Code: @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;"> <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div> <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div> @*<div id="header"> <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%" height="100%"> <tr> <th class="wdgcenter" style="width:50px">Qty/Shares</th> <th class="wdgcenter" style="width:50px">Account #</th> <th class="wdgcenter" style="width:50px">% of Portfolio</th> </tr> </table> </div>*@ </div> <div class="widget-body" style="display: inline-block;overflow: visible;height:100%;width:100%;"> <div class="widget-content" id="ChartDiv" style="display: inline-block; overflow: visible;height:90%;width:100%;"></div> </div> <script type="text/javascript" language="javascript"> var chart@(Model.Widget.Id); function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); pieAttr.setLabelsInside(true); pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); chart@(Model.Widget.Id).getView3D().setEnabled(true); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); chart@(Model.Widget.Id).setDataSource(str); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR); chart@(Model.Widget.Id).getLegendBox().setVisible(false); chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near); chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); //$(window).resize(function() { function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); }; </script>
  17. Below is the page: @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; <div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;"> <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div> <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div> @*<div id="header"> <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" width="100%" height="100%"> <tr> <th class="wdgcenter" style="width:50px">Qty/Shares</th> <th class="wdgcenter" style="width:50px">Account #</th> <th class="wdgcenter" style="width:50px">% of Portfolio</th> </tr> </table> </div>*@ </div> <div class="widget-body" style="display:block;overflow: visible;height:100%;width:100%;"> <div class="widget-content" id="ChartDiv" style="overflow: visible;height:90%;width:100%;"></div> </div> <script type="text/javascript" language="javascript"> var chart@(Model.Widget.Id); function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); pieAttr.setLabelsInside(true); pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); chart@(Model.Widget.Id).getView3D().setEnabled(true); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); chart@(Model.Widget.Id).setDataSource(str); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR); chart@(Model.Widget.Id).getLegendBox().setVisible(true); chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near); chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); //$(window).resize(function() { function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); }; </script>
  18. I also added fill-opacity: 0; to .jchartfx .Border. The tooltip still apears behind the jchartfx pie chart. Please advise jchartfx.palette.css .jchartfx_body { background-color: #FFFFFF; } .jchartfxToolTip { background-color: #282828; color: #F0F0F0; border-color: #999999; } .jchartfxToolTipBorder { fill: #FFFFFF; stroke: #666666; } .jchartfx .Attribute0 { fill: #57ACDA; stroke: #4281A4; } .jchartfx .Attribute0Line { stroke: #4281A4; } .jchartfx .Attribute0Alt { fill: #4281A4; } .jchartfx .Attribute1 { fill: #93E24E; stroke: #6FAA3B; } .jchartfx .Attribute1Line { stroke: #6FAA3B; } .jchartfx .Attribute1Alt { fill: #6FAA3B; } .jchartfx .Attribute2 { fill: #F26C5B; stroke: #B65145; } .jchartfx .Attribute2Line { stroke: #B65145; } .jchartfx .Attribute2Alt { fill: #B65145; } .jchartfx .Attribute3 { fill: #F5D34A; stroke: #B89F38; } .jchartfx .Attribute3Line { stroke: #B89F38; } .jchartfx .Attribute3Alt { fill: #B89F38; } .jchartfx .Attribute4 { fill: #F89553; stroke: #BA703F; } .jchartfx .Attribute4Line { stroke: #BA703F; } .jchartfx .Attribute4Alt { fill: #BA703F; } .jchartfx .Attribute5 { fill: #65C773; stroke: #4C9657; } .jchartfx .Attribute5Line { stroke: #4C9657; } .jchartfx .Attribute5Alt { fill: #4C9657; } .jchartfx .Attribute6 { fill: #5ABEC7; stroke: #448F96; } .jchartfx .Attribute6Line { stroke: #448F96; } .jchartfx .Attribute6Alt { fill: #448F96; } .jchartfx .Attribute7 { fill: #CE9884; stroke: #9B7263; } .jchartfx .Attribute7Line { stroke: #9B7263; } .jchartfx .Attribute7Alt { fill: #9B7263; } .jchartfx .Attribute8 { fill: #5F6775; stroke: #484E58; } .jchartfx .Attribute8Line { stroke: #484E58; } .jchartfx .Attribute8Alt { fill: #768092; } .jchartfx .Attribute9 { fill: #E9EA52; stroke: #AFB03E; } .jchartfx .Attribute9Line { stroke: #AFB03E; } .jchartfx .Attribute9Alt { fill: #AFB03E; } .jchartfx .Attribute10 { fill: #E04E61; stroke: #A83B49; } .jchartfx .Attribute10Line { stroke: #A83B49; } .jchartfx .Attribute10Alt { fill: #A83B49; } .jchartfx .Attribute11 { fill: #6FE4C8; stroke: #54AB96; } .jchartfx .Attribute11Line { stroke: #54AB96; } .jchartfx .Attribute11Alt { fill: #54AB96; } .jchartfx .Attribute12 { fill: #ECA63F; stroke: #B17D30; } .jchartfx .Attribute12Line { stroke: #B17D30; } .jchartfx .Attribute12Alt { fill: #B17D30; } .jchartfx .Attribute13 { fill: #99D0A0; stroke: #739C78; } .jchartfx .Attribute13Line { stroke: #739C78; } .jchartfx .Attribute13Alt { fill: #739C78; } .jchartfx .Attribute14 { fill: #CE8FBE; stroke: #9B6C8F; } .jchartfx .Attribute14Line { stroke: #9B6C8F; } .jchartfx .Attribute14Alt { fill: #9B6C8F; } .jchartfx .Attribute15 { fill: #8DC3E0; stroke: #6A93A8; } .jchartfx .Attribute15Line { stroke: #6A93A8; } .jchartfx .Attribute15Alt { fill: #6A93A8; } .jchartfx .MarkerHollow { fill: #FFFFFF; } .jchartfx .Border { fill: #F5F5EE; stroke: #DBDBD9; fill-opacity: 0; } .jchartfx .PlotArea { fill: transparent; stroke: #DBDBD9; } .jchartfx .PlotArea3D { fill: #F5F5F2; stroke: #DBDBD9; } .jchartfx .CustomGridLine { stroke: #FC4B35; } .jchartfx .CustomGridLineLabel { fill: #666666; } .jchartfx .AxisText { fill: #666666; } .jchartfx .AxisMajor { stroke: #DBDBD9; } .jchartfx .AxisMinor { stroke: #DBDBD9; } .jchartfx .AxisInterlaced { fill: #DDDDDB; } .jchartfx .AxisLine { stroke: #DBDBD9; } .jchartfx .AxisSection { fill: #FFFFFF; stroke: #FFFFFF; } .jchartfx .PointLabel { fill: #666666; } .jchartfx .PointLabelBorder { fill: #D0D0D0; } .jchartfx .Title { fill: #0296B1; } .jchartfx .LegendBox { fill: transparent; stroke: #DBDBD9; } .jchartfx .LegendItem { fill: #666666; } .jchartfx .ScrollBar { fill: #F5F5F2; stroke: #DBDBD9; } .jchartfx .ScrollThumb { fill: #DBDBD9; } .jchartfx .ScrollArrow { fill: #DBDBD9; } .jchartfx .LoopMarker { stroke: #F00000; } .jchartfx .DataGrid_HeaderBack { fill: #DDE3E7; } .jchartfx .DataGrid_Back { fill: #F5F5F2; } .jchartfx .DataGrid_GridLine { fill: #DEDAD3; } .jchartfx .DataGridText { fill: #666666; } .jchartfx .DataGridTextAlternate { fill: #000000; } .jchartfx .DataGrid_BackInterlaced { fill: #FFFFFF; } .jchartfx .DataGrid_RowHeader { fill: #666666; } .jchartfx .DataGrid_ColumnHeader { fill: #6D7D8A; } .jchartfx .DataGrid_RowHeaderAlternate { fill: #000000; } .jchartfx .AnnotationText { fill: #404040; } .jchartfx .AnnotationTextBorder { stroke: #606060; fill: #FFF3EE; } .jchartfx .AnnotationBalloonText { fill: #404040; } .jchartfx .AnnotationBalloon { stroke: #206020; fill: #A0A0E0; } .jchartfx .AnnotationCircle { stroke: #2060D0; fill: #404080; } .jchartfx .AnnotationArrow { stroke: #404040; fill: #800000; } .jchartfx .AnnotationRectangle { stroke: #806000; fill: #D04080; } .jchartfx .HeatMap0 { fill: #57ACDA; } .jchartfx .HeatMap1 { fill: #93E24E; } .jchartfx .HeatMap2 { fill: #A02000; } .jchartfx .EqualizerTop0 { fill: #F89553; stroke: #BA703F; } .jchartfx .EqualizerTop1 { fill: #F5D34A; stroke: #B89F38; } .jchartfx .EqualizerOff { fill: #DBDBD9; fill-opacity: 0.2; } .jchartfx .SpecialPoint { fill: #D0A000; stroke: #806000; } .jchartfx .SpecialPointLine { stroke: #806000; } .jchartfx .MapContext { fill: #f5f5ee; stroke: #bdbdb6; } .jchartfx .MapWater { fill: #bfffff; stroke: #84d5ff; } .jchartfx .MapOcean0 { fill: #84d5ff; stroke: none; } .jchartfx .MapOcean1 { fill: #75c7f1; stroke: none; } .jchartfx .MapOcean2 { fill: #66b9e3; stroke: none; } .jchartfx .MapOcean3 { fill: #57abd5; stroke: none; } .jchartfx .MapOcean { fill: #479ec7; stroke: none; } .jchartfx .MapDefaultAttribute { fill: #f5f5ee; stroke: #bdbdb6; } .jchartfx .MapAttribute0 { fill: #93e24e; stroke: #5aaa0a; } .jchartfx .MapAttribute1 { fill: #f26c5b; stroke: #b4362d; } .jchartfx .MapAttribute2 { fill: #f5d34a; stroke: #b99d00; } .jchartfx .MapAttribute3 { fill: #5ea321; stroke: #236f00; } .jchartfx .MapAttribute4 { fill: #ae3223; stroke: #720000; } .jchartfx .MapAttribute5 { fill: #b09423; stroke: #776200; } .jchartfx .MapAttribute6 { fill: #5a6551; stroke: #2c3624; } .jchartfx .MapAttribute7 { fill: #6a5755; stroke: #3a2a28; } .jchartfx .MapRoad { stroke: #fa9e25; fill: none; stroke-opacity: .3; } .jchartfx .MapRoadBack { stroke: #FFFFFF; stroke-opacity: .1; fill: none; } .jchartfx .MapRoad0 { stroke: #fa9e25; fill: none; stroke-opacity: 1; } .jchartfx .MapRoad0Back { stroke: #FFFFFF; fill: none; stroke-opacity: .4; } .jchartfx .MapRoad1 { stroke: #E2C195; fill: none; stroke-opacity: 1; } .jchartfx .MapRoad1Back { stroke: #FFFFFF; fill: none; stroke-opacity: .5; } .jchartfx .MapTranslationArea { fill: #F5F5EE; stroke: #DBDBD9; } .jchartfx .MapPlot { fill: #479ec7; fill-opacity: 0; } .jchartfx .Indicator { fill: #57ACDA; stroke: #4281A4; } .jchartfx .Cap { fill: #DBDBD9; } .jchartfx .Bar { fill: #FFFFFF; stroke: #DBDBD9; } .jchartfx .TickMajor { fill: #DBDBD9; stroke: #DBDBD9; } .jchartfx .TickMedium { fill: #DBDBD9; stroke: #DBDBD9; } .jchartfx .GaugeText { fill: #666666; } .jchartfx .GaugeTitle { fill: #0296B1; } .jchartfx .GaugeTitleLarge { fill: #0296B1; } .jchartfx .GaugeSection0 { fill: #F26C5B; stroke: #B65145; } .jchartfx .GaugeSection1 { fill: #F5D34A; stroke: #B89F38; } .jchartfx .GaugeSection2 { fill: #93E24E; stroke: #6FAA3B; } .jchartfx .GreaterThan { fill: #93E24E; stroke: #93E24E; } .jchartfx .LessThan { fill: #F26C5B; stroke: #F26C5B; } .jchartfx .EqualsTo { fill: #F5D34A; stroke: #F5D34A; } .jchartfx .Separator { stroke: #DBDBD9; } .jchartfx .TitleBack { fill: transparent; } .jchartfx .DashboardTitle { fill: #0296B1; } .jchartfx .DashboardCaption { fill: #57ACDA; stroke: #FFFFFF; } .jchartfx .Glow { fill: #444444; } .jchartfx .MapShadow { fill: #444444; fill-opacity: 0.3; } .jchartfx .BorderEffect1 { fill: #AAAAAA; fill-opacity: 0.8; } .jchartfx .BorderEffect2 { fill: #FFFFFF; fill-opacity: 1; } .jchartfx_container table { background-color: #F5F5F2; border-color:#DEDAD3; } .jchartfx_container table thead tr th { background-color: #DDE3E7; border-color: #DEDAD3; border-bottom-color: #DBDBD9; color: #6D7D8A; } .jchartfx_container table tbody tr td { color: #666666; border-color: #DEDAD3; } .jchartfx_container table tbody>tr:nth-child(odd)>td { background-color: #F5F5F2; } .jchartfx_container table tbody>tr:nth-child(even)>td { background-color: #FFFFFF; } .jchartfx_container h1, .jchartfx_container h2, .jchartfx_container h3 { color: #0296b1; } .jchartfx_container h4, .jchartfx_container h5, .jchartfx_container h6 { color: #666666; } .jchartfx_container .labelIndicator { color: #666666; } .jchartfx_container .label { color: #666666; } .jchartfx_container .smallLabel { color: #666666; } .jchartfx_container table { box-shadow: 0px 0px 5px 3px rgba(68, 68, 68, .30); } .jchartfx .Filler { fill: #57ACDA; stroke: #4281A4; } .jchartfx .GaugeMarker { fill: #57ACDA; stroke: #4281A4; } .jchartfx .Needle { fill: #57ACDA; stroke: #4281A4; } .jchartfx .BorderMedium { fill: #F5F5EE; stroke: #DBDBD9; } .jchartfx .BorderThick { fill: #F5F5EE; stroke: #DBDBD9; } .jchartfx .Border0 { stroke: #91FFFF; fill: #91FFFF; } .jchartfx .Border1 { stroke: #F5FF82; fill: #F5FF82; } .jchartfx .Border2 { stroke: #FFB497; fill: #FFB497; } .jchartfx .Border3 { stroke: #FFFF7B; fill: #FFFF7B; } .jchartfx .Border4 { stroke: #FFF88A; fill: #FFF88A; } .jchartfx .Border5 { stroke: #A8FFBF; fill: #A8FFBF; } .jchartfx .Border6 { stroke: #96FFFF; fill: #96FFFF; } .jchartfx .Border7 { stroke: #FFFDDC; fill: #FFFDDC; } .jchartfx .InsideLabel0 { fill: #00204E; } .jchartfx .InsideLabel1 { fill: #075600; } .jchartfx .InsideLabel2 { fill: #660000; } .jchartfx .InsideLabel3 { fill: #694700; } .jchartfx .InsideLabel4 { fill: #6C0900; } .jchartfx .InsideLabel5 { fill: #003B00; } .jchartfx .InsideLabel6 { fill: #00323B; } .jchartfx .InsideLabel7 { fill: #420C00; } .jchartfx .InsideLabel8 { fill: #C5CDDB; } .jchartfx .InsideLabel9 { fill: #5D5E00; } .jchartfx .InsideLabel10 { fill: #540000; } .jchartfx .InsideLabel11 { fill: #00583C; } .jchartfx .InsideLabel12 { fill: #601A00; } .jchartfx .InsideLabel13 { fill: #0D4414; } .jchartfx .InsideLabel14 { fill: #420332; } .jchartfx .InsideLabel15 { fill: #013754; } .jchartfx .EmptyMarker { stroke: #B2B2B2; fill: #CDCDCD; } .jchartfx .Repeater { fill: #57ACDA; stroke: #4281A4; } .jchartfx .RepeaterOff { fill: #00204E; stroke: transparent; }
  19. Below is the code to render the jChartfx pie chart. Please advise why the tooltip is behind the chart. function LoadPieChart() { chart@(Model.Widget.Id) = new cfx.Chart(); chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes(); pieAttr.setLabelsInside(true); pieAttr.setExplodingMode(cfx.ExplodingMode.First); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%"); chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%"); var str = @Html.Raw(Json.Encode(ViewData["Account Asset Allocations Chart"])); chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2); chart@(Model.Widget.Id).getView3D().setEnabled(true); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); chart@(Model.Widget.Id).setDataSource(str); @* var fields = chart@(Model.Widget.Id).getDataSourceSettings().getFields(); var fieldVal = new cfx.FieldMap(); fieldVal.setName("%l%"); fieldVal.setUsage(cfx.FieldUsage.Value); fields.add(fieldVal); *@ //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); var data = chart@(Model.Widget.Id).getData(); data.setSeries(1); data.setPoints(10); chart@(Model.Widget.Id).getToolTips().setEnabled(true); chart@(Model.Widget.Id).getToolTips().setAlignment("near"); chart@(Model.Widget.Id).getToolTips().setFormat("%l%"); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true); //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR); chart@(Model.Widget.Id).getLegendBox().setVisible(true); chart@(Model.Widget.Id).getLegendBox().setWidth(175); chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right); chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near); chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0); chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0); chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0); chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0); var divHolder = document.getElementById('ChartDiv'); chart@(Model.Widget.Id).create(divHolder); } $(function() { LoadPieChart(); }); //$(window).resize(function() { function ResizeChart() { if (chart@(Model.Widget.Id) != null) chart@(Model.Widget.Id).doUpdate(true); };
  20. I added fill-opacity: 0 to the jChartFx CSS file. Below is the CSS file with the changes you recommended. The tooltip is displayed behind the pie chart. Please advise. jchartfx.attributes.css: .jchartfx { font-family: Arial; font-size: 8pt; line-height: normal; } .jchartfxToolTip { padding: 3px; font-size: 9pt; font-family: Arial; font-weight: bold; -moz-border-radius: 3px; border-radius: 3px; pointer-events: none; border-style: solid; border-width: 1px; -webkit-font-smoothing: antialiased; pointer-events: none; } .jchartfxToolTipVisible { opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .jchartfxToolTipHidden { opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .jchartfxToolTip2 { pointer-events: none; } .jchartfxToolTip2Visible { opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .jchartfxToolTip2Hidden { opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .jchartfx .Attribute { stroke-width: 1; } .jchartfx .AttributeLine { stroke-width: 3; } .jchartfx .MarkerHollow { stroke-width: 2; } .jchartfx .Marker { stroke-width: 2; } .jchartfx .Border { stroke-width: 1; fill-opacity: 0; } .jchartfx .PlotArea { stroke-width: 1; } .jchartfx .PlotArea3D { stroke-width: 1; } .jchartfx .Title { stroke-width: 1; } .jchartfx .AxisLine { stroke-width: 2; } .jchartfx .Title { font-size: 11pt; } .jchartfx .LegendBox { stroke-width: 1; } .jchartfx .ScrollBar { stroke-width: 1; } .jchartfx .LoopMarker { stroke-width: 2; } .jchartfx .EqualizerTop0 { stroke-width: 1; } .jchartfx .EqualizerTop1 { stroke-width: 1; } .jchartfx .EqualizerOff { stroke-width: 1; } .jchartfx .MapContext { stroke-width: 1; } .jchartfx .MapWater { stroke-width: 1; } .jchartfx .MapAttribute { stroke-width: 1; } .jchartfx .MapRoad { stroke-width: 1; } .jchartfx .MapRoadBack { stroke-width: 3; } .jchartfx .MapRoad0 { stroke-width: 1; } .jchartfx .MapRoad0Back { stroke-width: 3; } .jchartfx .MapRoad1 { stroke-width: 1; } .jchartfx .MapRoad1Back { stroke-width: 0; } .jchartfx .MapTranslationArea { stroke-width: 1; } .jchartfx .GaugeText { font-family: Arial; font-size: 8pt; } .jchartfx .GaugeTitle { font-family: Arial; font-size: 10pt; } .jchartfx .GaugeTitleLarge { font-family: Arial; font-size: 40pt; } .jchartfx .Separator { stroke-width: 1; } .jchartfx .DashboardTitle { font-family: Arial; font-size: 11pt; } .jchartfx_container, .jchartfx_container * { font-family: Arial, sans-serif; } .jchartfx_container table { border:1px solid; font-size:8pt; margin:45px 5%; width:90%; border-spacing: 0px; box-shadow: none !important; } .jchartfx_container table thead tr th { border:1px solid; border-bottom:1px solid; text-align: left; padding:5px; font-weight: normal; } .jchartfx_container table tbody tr td { padding:5px; border:1px solid; } .jchartfx_container .labelIndicator { text-align:center; margin-top: 48px; font-size:18pt; line-height:1em; } .jchartfx_container .label { text-align: center; font-size: 14pt; line-height:1em; display: table !important; } .jchartfx_container .smallLabel { font-size: 8pt; text-align: center; vertical-align:middle; line-height:1em; } .jchartfx .BorderMedium { stroke-width: 4; } .jchartfx .BorderThick { stroke-width: 8; } .jchartfx .Border0 { stroke-width: 1; } .jchartfx .Border1 { stroke-width: 1; } .jchartfx .Border2 { stroke-width: 1; } .jchartfx .Border3 { stroke-width: 1; } .jchartfx .Border4 { stroke-width: 1; } .jchartfx .Border5 { stroke-width: 1; } .jchartfx .Border6 { stroke-width: 1; } .jchartfx .Border7 { stroke-width: 1; } .jchartfx .StackedLabel { font-family: Arial; font-size: 8pt; }
  21. I added fill-opacity: 0 to the jChartFx CSS file. Below is the CSS file with the changes you recommended. The tooltip is displayed behind the pie chart. Please advise. jchartfx.attributes.css: .jchartfx { font-family: Arial; font-size: 8pt; line-height: normal; } .jchartfxToolTip { padding: 3px; font-size: 9pt; font-family: Arial; font-weight: bold; -moz-border-radius: 3px; border-radius: 3px; pointer-events: none; border-style: solid; border-width: 1px; -webkit-font-smoothing: antialiased; pointer-events: none; } .jchartfxToolTipVisible { opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .jchartfxToolTipHidden { opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .jchartfxToolTip2 { pointer-events: none; } .jchartfxToolTip2Visible { opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .jchartfxToolTip2Hidden { opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .jchartfx .Attribute { stroke-width: 1; } .jchartfx .AttributeLine { stroke-width: 3; } .jchartfx .MarkerHollow { stroke-width: 2; } .jchartfx .Marker { stroke-width: 2; } .jchartfx .Border { stroke-width: 1; fill-opacity: 0; } .jchartfx .PlotArea { stroke-width: 1; } .jchartfx .PlotArea3D { stroke-width: 1; } .jchartfx .Title { stroke-width: 1; } .jchartfx .AxisLine { stroke-width: 2; } .jchartfx .Title { font-size: 11pt; } .jchartfx .LegendBox { stroke-width: 1; } .jchartfx .ScrollBar { stroke-width: 1; } .jchartfx .LoopMarker { stroke-width: 2; } .jchartfx .EqualizerTop0 { stroke-width: 1; } .jchartfx .EqualizerTop1 { stroke-width: 1; } .jchartfx .EqualizerOff { stroke-width: 1; } .jchartfx .MapContext { stroke-width: 1; } .jchartfx .MapWater { stroke-width: 1; } .jchartfx .MapAttribute { stroke-width: 1; } .jchartfx .MapRoad { stroke-width: 1; } .jchartfx .MapRoadBack { stroke-width: 3; } .jchartfx .MapRoad0 { stroke-width: 1; } .jchartfx .MapRoad0Back { stroke-width: 3; } .jchartfx .MapRoad1 { stroke-width: 1; } .jchartfx .MapRoad1Back { stroke-width: 0; } .jchartfx .MapTranslationArea { stroke-width: 1; } .jchartfx .GaugeText { font-family: Arial; font-size: 8pt; } .jchartfx .GaugeTitle { font-family: Arial; font-size: 10pt; } .jchartfx .GaugeTitleLarge { font-family: Arial; font-size: 40pt; } .jchartfx .Separator { stroke-width: 1; } .jchartfx .DashboardTitle { font-family: Arial; font-size: 11pt; } .jchartfx_container, .jchartfx_container * { font-family: Arial, sans-serif; } .jchartfx_container table { border:1px solid; font-size:8pt; margin:45px 5%; width:90%; border-spacing: 0px; box-shadow: none !important; } .jchartfx_container table thead tr th { border:1px solid; border-bottom:1px solid; text-align: left; padding:5px; font-weight: normal; } .jchartfx_container table tbody tr td { padding:5px; border:1px solid; } .jchartfx_container .labelIndicator { text-align:center; margin-top: 48px; font-size:18pt; line-height:1em; } .jchartfx_container .label { text-align: center; font-size: 14pt; line-height:1em; display: table !important; } .jchartfx_container .smallLabel { font-size: 8pt; text-align: center; vertical-align:middle; line-height:1em; } .jchartfx .BorderMedium { stroke-width: 4; } .jchartfx .BorderThick { stroke-width: 8; } .jchartfx .Border0 { stroke-width: 1; } .jchartfx .Border1 { stroke-width: 1; } .jchartfx .Border2 { stroke-width: 1; } .jchartfx .Border3 { stroke-width: 1; } .jchartfx .Border4 { stroke-width: 1; } .jchartfx .Border5 { stroke-width: 1; } .jchartfx .Border6 { stroke-width: 1; } .jchartfx .Border7 { stroke-width: 1; } .jchartfx .StackedLabel { font-family: Arial; font-size: 8pt; }
  22. it seems when I added opacity to jchartfx.attribute.css .jchartfx { font-family: Arial; font-size: 8pt; line-height: normal; opacity: .85; } The tooltip appears but the chart is not as clear. How can I make both the jChartFx pie chart clear and the tooltip appear clear when move is hovering over it.
  23. Currently the widgets with the jChartFx Pie chart background color is tan looking. How can I make the background color transparent so that one can see the background of the widget
  24. I emailed you a link with credentials to ur test site. I also noticed if you drag down the widget with the jChartfx Pie chart and release the tooltip appears quickly and then the widget snaps back to the original position
  25. I sent an email to products@softwarefx.com with a link to the site to see how the widget with the jChartFx pie chart displayes the tooltip info behind the widget
×
×
  • Create New...