Jump to content
JChartFX Community
  • 0

Pie Chart Size


jko
 Share

Question

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 

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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>
 

Link to comment
Share on other sites

  • 0

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 type="text/javascript" src="jchartfx.system.js">
    </script>
    <script type="text/javascript" src="jchartfx.coreVector.js">
    </script>
    <script type="text/javascript" language="javascript">
        var chart1;
        
        function onLoadDoc()
        {
            chart1 = new cfx.Chart();
            // Customize chart here
            chart1.create("myDiv");
        }        
    </script>
</head>
<body onload="onLoadDoc()">
 
<div id="myDiv" style="width:600px;height:400px;display:inline-block"></div>
 
</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
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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 id="myDiv" style="width:600px;height:400px;display:inline-block;background-color:#FF0000">

</div>

 

This results in no red div

 

<div id="myDiv" style="width:100%;height:100%;display:inline-block;background-color:#FF0000">

</div>

 
This results in a red div that reacts to browser sizing
 
<div id="myDiv" style="width:100%;height:100%;position:absolute;background-color:#FF0000">
</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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...