Pie Chart Size

jko · February 28, 2014

I'm generating 3 Pie Charts in a row, but i've come across a size issue. When i set...

 chart_pie.getAllSeries().getPointLabels().setVisible(true);

The Pie Charts are much smaller than they can/should be within the allocated space. However, when i set the PointLabels to false...

  chart_pie.getAllSeries().getPointLabels().setVisible(false);

They appear in the proper size. Is there a way around this so they can have Point Labels but appear in the proper size? Thanks in advance.

jko

JuanC · March 7, 2014

Unfortunately we reserve some space for the labels if they have to be painted outside of the slices, if possible, please post a small sample code (including the size you are using for your div) if you are getting the slices to be too small.

JuanC

StatementSolutions · November 10, 2015

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>

JuanC · November 12, 2015

Please provide a reproducible small page showing the issue. As always we recommend you start with a simple page with a chart, e.g.

<!DOCTYPE html>

<html>

<head>

</script>

</script>

var chart1;

function onLoadDoc()

{

chart1 = new cfx.Chart();

// Customize chart here

chart1.create("myDiv");

}

</script>

</head>

</body>

</html>

Then add the minimum amount of code (chart data, important attributes such as gallery, etc.) to show the issue you are experiencing.

This will allow us to either suggest workarounds to your code, new properties to mitigate the issues or try to fix bugs or provide new functionality if possible.

JuanC

StatementSolutions · November 12, 2015

From your example you use finite amount to determine width and height of the chart.

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;

}

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

StatementSolutions · November 12, 2015

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:

my sample:

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

JuanC · November 12, 2015

If you find something is not working with the chart, try it out without the chart, e.g. don't call chart.create or any other chart functions.

This results in a red div with fixed size

</div>

This results in no red div

</div>

This results in a red div that reacts to browser sizing

</div>

If you add the chart creation code and remove the background-color, you would also need to attach a handler to the body onresize event to call chart.doUpdate. Because this event only exists in the page we decided not to attach handlers to it so you have to do it manually.

JuanC

Attachments.zip

Sign In

Pie Chart Size

Question

jko

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

JuanC

Link to comment

Share on other sites

StatementSolutions

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

StatementSolutions

Link to comment

Share on other sites

StatementSolutions

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

Join the conversation

Browse

Activity