Jump to content
JChartFX Community
  • 0
flapane

Double y axis scale

Question

Hi, let's say I have a chart with three different series, one in the 0-100 range and two in the 10000-50000 range:

http://jsfiddle.net/YQby7/69/

           chartnaplon = new cfx.Chart();
            var titles = chartnaplon.getTitles();
            var title = new cfx.TitleDockable();
            title.setText("Title");
            titles.add(title);
            chartnaplon.getData().setSeries(3);
            chartnaplon.getAxisY().setMin(0);
            chartnaplon.getAxisY().setMax(500000);
            chartnaplon.getLegendBox().setDock(cfx.DockArea.Bottom);
            var series1 = chartnaplon.getSeries().getItem(0);
            var series2 = chartnaplon.getSeries().getItem(1);
            var series3 = chartnaplon.getSeries().getItem(2);
            series1.setGallery(cfx.Gallery.Lines);
            series2.setGallery(cfx.Gallery.Lines);
            series3.setGallery(cfx.Gallery.Lines);
           
            var data = [
          { "Year": "1983", "SeriesA": 182437, "SeriesB": 0, "SeriesC": 0 },
            { "Year": "1993", "SeriesA": 23, "SeriesB": 39971, "SeriesC": 0 },
            { "Year": "2003", "SeriesA": 45, "SeriesB": 15572, "SeriesC": 27712 },
            { "Year": "2004", "SeriesA": 54, "SeriesB": 17737, "SeriesC": 31559 },
            { "Year": "2005", "SeriesA": 48, "SeriesB": 18765, "SeriesC": 25900 },
            { "Year": "2006", "SeriesA": 4, "SeriesB": 31368, "SeriesC": 28900 },
            { "Year": "2007", "SeriesA": 44, "SeriesB": 25184, "SeriesC": 28900 },
            { "Year": "2008", "SeriesA": 42, "SeriesB": 22869, "SeriesC": 28800 },
            { "Year": "2009", "SeriesA": 45, "SeriesB": 25074, "SeriesC": 23600 },
            { "Year": "2010", "SeriesA": 5, "SeriesB": 27459, "SeriesC": 26500 },
            { "Year": "2011", "SeriesA": 51, "SeriesB": 29687, "SeriesC": 31000 },
            { "Year": "2012", "SeriesA": 5, "SeriesB": 30057, "SeriesC": 30400 },
            { "Year": "2013", "SeriesA": 49, "SeriesB": 31427, "SeriesC": 35670 }
            ];
            chartnaplon.setDataSource(data);
            var divHolder = document.getElementById('ChartDiv1');
            chartnaplon.create(divHolder);

 

How can I set different a scale for Serie A, and a second scale for Series B and C?

I tried to check jchartfx demos, but to be honest I haven't been able to adapt the examples to my chart.

Thanks in advance

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Note that in the modified code I am not setting the AxisY Min and Max, if you want to force a specific Min/Max for any of the 2 axes you can do so. The important part is to setup series 2 and 3 to use a different axis, ChartFX has a built-in AxisY2 property but if you needed more than 2 you can create additional AxisY objects.

var titles = chart1.getTitles();

    var title = new cfx.TitleDockable();

    title.setText("Title");

    titles.add(title);

    chart1.getData().setSeries(3);

    chart1.getLegendBox().setDock(cfx.DockArea.Bottom);

    var series1 = chart1.getSeries().getItem(0);

    var series2 = chart1.getSeries().getItem(1);

    var series3 = chart1.getSeries().getItem(2);

    series1.setGallery(cfx.Gallery.Lines);

    series2.setGallery(cfx.Gallery.Lines);

    series3.setGallery(cfx.Gallery.Lines);

    

    var alternateAxisY = chart1.getAxisY2();

    series2.setAxisY(alternateAxisY);

    series3.setAxisY(alternateAxisY);


    // Hide gridlines to avoid confusion between different axis

    chart1.getAxisY().getGrids().getMajor().setVisible(false);

    alternateAxisY.getGrids().getMajor().setVisible(false);


    var data = [

  { "Year": "1983", "SeriesA": 18, "SeriesB": 18450, "SeriesC": 17890 },

    { "Year": "1993", "SeriesA": 23, "SeriesB": 39971, "SeriesC": 13450 },

    { "Year": "2003", "SeriesA": 45, "SeriesB": 15572, "SeriesC": 27712 },

    { "Year": "2004", "SeriesA": 54, "SeriesB": 17737, "SeriesC": 31559 },

    { "Year": "2005", "SeriesA": 48, "SeriesB": 18765, "SeriesC": 25900 },

    { "Year": "2006", "SeriesA": 4, "SeriesB": 31368, "SeriesC": 28900 },

    { "Year": "2007", "SeriesA": 44, "SeriesB": 25184, "SeriesC": 28900 },

    { "Year": "2008", "SeriesA": 42, "SeriesB": 22869, "SeriesC": 28800 },

    { "Year": "2009", "SeriesA": 45, "SeriesB": 25074, "SeriesC": 23600 },

    { "Year": "2010", "SeriesA": 5, "SeriesB": 27459, "SeriesC": 26500 },

    { "Year": "2011", "SeriesA": 51, "SeriesB": 29687, "SeriesC": 31000 },

    { "Year": "2012", "SeriesA": 5, "SeriesB": 30057, "SeriesC": 30400 },

    { "Year": "2013", "SeriesA": 49, "SeriesB": 31427, "SeriesC": 35670 }

    ];

    chart1.setDataSource(data);

 

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