Bar Chart with 2 y axis

[salini]

Hi,

I want to create a bar chart with 2 y axis. My input data is

 var data = [

                        { "Flow": "NOX", "Pollution": "1.124026397" },

                        { "Flow": "PM10 total", "Pollution": "1.157768278" },

                        { "Flow": "PM10 nonex", "Pollution": "1.140897337" },

                        { "Flow": "PM2.5 total", "Pollution": "1.157768278" },

                        { "Flow": "PM2.5 nonex", "Pollution": "1.140897337" },

                        { "Flow": "HC", "Pollution": "1.161986013" },

                        { "Flow": "CO2", "Pollution": "154.161986013" },

                    ]; 

If we plot the above data with x and y axis, since the pollutant CO2 is having very high value, the other pollutants can not be visible properly or can't distinguish the pollutant values. So what we want to do is, create chart with single x axis and 2 y axis on the left and right side. The right side y axis is for only CO2 and the left side y axis is for other pollutant. And also, we want to show each and every bar in differernt colors too. Is there any way to do this using JChartFX?

[JuanC]

jChartFX supports multiple Y axes, but you can only assign specific series to an axis (not points). To workaround this, you could change your data so that it has 2 series (I am calling them here Pollution and Pollution2) and make sure you use hidden so that you only have 1 value for each point.

    var data = [

                  { "Flow": "NOX", "Pollution": 1.124026397, "Pollution2": cfx.Chart.Hidden },

                  { "Flow": "PM10 total", "Pollution": 1.157768278, "Pollution2": cfx.Chart.Hidden },

                  { "Flow": "PM10 nonex", "Pollution": 1.140897337, "Pollution2": cfx.Chart.Hidden },

                  { "Flow": "PM2.5 total", "Pollution": 1.157768278, "Pollution2": cfx.Chart.Hidden },

                  { "Flow": "PM2.5 nonex", "Pollution": 1.140897337, "Pollution2": cfx.Chart.Hidden },

                  { "Flow": "HC", "Pollution": 1.161986013, "Pollution2": cfx.Chart.Hidden },

                  { "Flow": "CO2", "Pollution": cfx.Chart.Hidden, "Pollution2": 154.161986013 },

                ];    

    chart1.setGallery(cfx.Gallery.Bar);    

    // Show Secondary Axis

    chart1.getAxisY2().setVisible(true);

    // Setup second series (Pollution2) to use secondary axis

    chart1.getData().setSeries(2);

    chart1.getSeries().getItem(1).setAxisY(chart1.getAxisY2());    

    // Make sure bars are not half width to leave room for second series

    chart1.getGalleryAttributes().setOverlap(true);    

    // Configure visual settings

    chart1.getAllSeries().setMultipleColors(true);

    chart1.getAxisY().getLabelsFormat().setDecimals(2);

    

    chart1.setDataSource(data);

 

Hope this helps

JuanC 

[salini]

Can you share the full sample code for this?

[JuanC]

That is the full code the only thing missing is the chart creation, as in any one of our samples.

JuanC