Size of chart

[StatementSolutions]

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>
 

[JuanC]

It is hard to figure out exactly why there is "a lot" space around the pie as you do not provided a screenshot and we cannot run the code you provided as we have no idea of the final size of the chart or the data provided to it (and we do not have all your server side data/code)

 

1) Pies are drawn as a circle so if the chart is "too" wide/tall there will be more wasted space.

 

2) In recent builds we improved pie layout code to avoid wasting space for outside labels in certain scenarios. I am afraid we have not released any builds (stable or unstable) with these changes yet.

 

JuanC

[StatementSolutions]

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>
 

[StatementSolutions]

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

[StatementSolutions]

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;    
      

[JuanC]

>> 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.

 

Probably not, to make sure you would have to follow my instructions to prepare a repro case that we can use (start from a simple page, customize div, add chart if necessary, etc.)

 

>> I am having problems trying to include an image on the pie chart to show you the white space around the pie chart.

 

Feel free to email an image or try posting a link to such image.

 

>> I used % values for width and heoght so that as the widget is resized the jChartFX chart is resized

 

Even if you use % values for a div, we do not receive any events when such div is resized, there is an event fired at the page level that you can receive (<body onresize="onResizePage()">, you will need to invoke chart.doUpdate(true) to regenerate the svg with the new size.

 

JuanC

[StatementSolutions]

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?

[StatementSolutions]

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.

[JuanC]

ChartFX will always create the outer svg with the size of the "host" div in pixels, any other objects will also be created of a specific size (not percentage).

 

It would be useful to break your problem in 2 smaller issues

 

1) Does the chart generate the pie slices of an appropriate size when using a fixed div size, e.g. 400x400

 

If this is not the case please post or send us a small repro case following our recommendations (start with simple page, try not using any unneeded frameworks, etc.)

 

2) Does the chart reacts to changes in div size

 

For this you have to make sure you handle the HTML global resize event and invoke chart.doUpdate(true)

 

JuanC

[StatementSolutions]

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

[StatementSolutions]

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>

[JuanC]

Try the following page, click the Resize Div link and then the Resize Chart link. Do you get the same sizing behavior you describe? If so I would recommend to consider using 2D instead of 3D as a 3D Pie will shrink the space vertically to allow for 3D effect, also consider decreasing or removing slice separation as this also increases the white space around chart.

 

If you do not see the behavior with this chart, then change data or any other attributes needed to duplicate the behavior, note that this single page can be tested with no frameworks, server technologies, etc. so it is very easy for us to duplicate issues and try to find solutions.

 

<!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()">

 

<div id="myDiv" style="width:400px;height:400px;display:inline-block"></div>

 

<script language="javascript">

    var chart1;

    

    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(40);

        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 resizeDiv()

    {

    var divElem = document.getElementById("myDiv");

    divElem.style.width = "600px";

    divElem.style.height = "600px";

    }

 

    function resizeChart()

    {

    chart1.doUpdate(true);

    }

</script>

 

<br/>

 

<a href="javascript:resizeDiv()">Resize Div</a> <a href="javascript:resizeChart()">Resize Chart</a>

 

</body>

</html>

[JuanC]

To handle browser resize on this page you would need a different approach, shown on this page, note that chart div should not have a fixed size if you want the size of the chart to change. I recommended setting a fixed size to try to figure out if your problem was a general misuse of space or related to handling resizing.

 

<!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(40);

        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>

 

JuanC

[StatementSolutions]

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>

[StatementSolutions]

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>

[JuanC]

Again please try commenting out the 3D and SliceSeparation calls to see if you still see the same behavior. Also note that pie charts have a target aspect ratio (square for 2D while 3D uses ovals to account for 3D effect) so if the size of the div does not match the target aspect ratio, there will be more empty space.

 

To rule out if the error is related to sizing, please try the fixed size approach with a "big" size, e.g. 1200x800

 

JuanC

[StatementSolutions]

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>

[StatementSolutions]

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.

[JuanC]

Do you experience the latest thing you reported "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" using the stand alone sample code I posted?

 

As I said before, we need to find out if the problem happens at a specific chart size, or if the problem is because of the continuous resizing. To try that please change the page that I posted as follows

 

<div id="divSize"></div>

</br>

<div id="myDiv" style="width:100%;height:100%;position:absolute;top:20px"></div>

 

   function onPageResize()

    {

    if (chart1 != null) {

    chart1.doUpdate(true);

    var divChart = document.getElementById("myDiv");

    var elemSize = document.getElementById("divSize");

    elemSize.innerHTML = "Width:" + divChart.clientWidth + " Height:" + divChart.clientHeight;

    }

    }

 

Then resize the browser until you get to the behavior you describe, and note the width and height reported inside the page, Now change the chart's div to have that fixed size. Let us know if the chart looks different or the same when resizing against using a fixed size. Also include screenshots or links to screenshots.

 

JuanC