Pareto chart

Jan Grygerek · March 18, 2013

Hallo, I have problem with create Pareto chart. If I try your samle on this site the line chart1.setGallery(cfx.Gallery.Pareto); generete exception. Is it possible? How can I create Pareto chart?

Thank you

angelr · March 20, 2013

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

Jan Grygerek · April 5, 2013

I have one more question :-). Is it possible show labels in pareto chart only on bar series?

Thank you :-)

JuanC · April 5, 2013

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

kuttkiller · January 14, 2014

Hi,

I suppose that if Pareto Gallery is define as 1 Serie changing the Color of the line only would'nt be possible either?

To have for example the Bar Chart in Blue and the Line in Yellow

Thanks

JuanC · January 14, 2014

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

Sign In

Pareto chart

Question

Jan Grygerek

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

angelr

Link to comment

Share on other sites

Jan Grygerek

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

kuttkiller

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

Join the conversation

Browse

Activity