Jump to content
JChartFX Community
  • 0

Pareto chart


Jan Grygerek
 Share

Question

5 answers to this question

Recommended Posts

  • 0

Here is a small sample showing a Pareto Chart:

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type='text/javascript'>
        window.onload = function () {
            onLoadDoc();
        }

        var chart1;
  
        var items  = [{
            "Country": "China",
            "Population": 1357379000
        }, {
            "Country": "India",
            "Population": 1256994000
        }, {
            "Country": "United States",
            "Population": 316244000
        }, {
            "Country": "Indonesia",
            "Population": 248731000
        }, {
            "Country": "Brazil",
            "Population": 193946886
        }];
       

        function onLoadDoc() {
            chart1 = new cfx.Chart();

            chart1.setDataSource(items);
            chart1.setGallery(cfx.Gallery.Pareto);

            var titles = chart1.getTitles();
            var title = new cfx.TitleDockable();
            title.setText("Countries by Population");
            titles.add(title);

            var axis1 = chart1.getAxisY();
            axis1.getLabelsFormat().setFormat(cfx.AxisFormat.Number);


            var chartDiv = document.getElementById('ChartDiv1');
            chart1.create(chartDiv);
        }

    </script>
   
    <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.system.js"></script>
    <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.coreVector.js"></script>   
    <script type="text/javascript" src="'>http://www.jchartfx.com/jChartFX/jchartfx.pareto.js"></script>
  
</head>
<body>
    <br />
    <div id="ChartDiv1" style="width: 600px; height: 400px; display: inline-block">
    </div>
</body>
</html>

This is the chart image:

Pareto Chart

Link to comment
Share on other sites

  • 0

You should be able to change properties on a per-series basis

chart1.getSeries().getItem(1).getPointLabels().setVisible(true);

Pareto is a special case since with only 1 series, two "galleries" are painted, I will check if we can add a property in pareto to control the label visibility in the second series.

JuanC

Link to comment
Share on other sites

  • 0

Changing the color or any other properties independently for each element (bar/line) is not possible at this time when using Pareto.

To be completely honest we have not made improvements to pareto for a long time, mainly because it is not used that often. We will see if we can squeeze some changes for future versions, if this is urgent you could try creating a chart with 2 series, set the gallery for the first one to be line and the second to be bar and calculate the accummulated percentage.

Hopefully this code will get you on the right track. Note that because the chart has 2 series you have complete control over each series.

    var data = [{"Value":10},{"Value":13},{"Value":18},{"Value":24}];

    

    // Add values

    var total = 0;

    for(var i = 0;i<data.length;i++) {

        total += data.Value;

    }

    

    // Add Property for accumulated percentage

    var accum = 0;

    for(var i = 0;i<data.length;i++) {

        accum += data.Value;

        data.Percentage = (accum / total);

    }

    

    // Use secondary Axis

    var axis2 = chart1.getAxisY2();

    axis2.setMin(0);

    axis2.setMax(1);

    axis2.getLabelsFormat().setFormat(cfx.AxisFormat.Percentage);

    axis2.setVisible(true);

    var major = axis2.getGrids().getMajor();

    major.setVisible(false);

    major.setTickMark(cfx.TickMark.None);

    

    // Make sure first series is percentage

    var fieldMap;

    var fields = chart1.getDataSourceSettings().getFields();

    

    fieldMap = new cfx.FieldMap();

    fieldMap.setName("Percentage");

    fieldMap.setUsage(cfx.FieldUsage.Value);

    fields.add(fieldMap);

    

    fieldMap = new cfx.FieldMap();

    fieldMap.setName("Value");

    fieldMap.setUsage(cfx.FieldUsage.Value);

    fields.add(fieldMap);

    

    // Pass data

    chart1.setDataSource(data);

    

    // Customize series as needed

    chart1.getSeries().getItem(0).setGallery(cfx.Gallery.Lines);

    chart1.getSeries().getItem(0).setAxisY(axis2);

    chart1.getSeries().getItem(1).setGallery(cfx.Gallery.Bar);


Regards,

JuanC 

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