Double y axis scale

[flapane]

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

[JuanC]

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 

[flapane]

 Juan, than you so much for your answer.

Needless to say, it works great.