Jump to content
JChartFX Community
  • 0
salini

Bar Chart with 2 y axis

Question

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?

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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 

Share this post


Link to post
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...

×
×
  • Create New...