Adding multiple series data with the jQuery/JavaScript object syntax

DanielL_550 · February 21, 2013

How would I add the following data using the jQuery/JavaScript object syntax using the Lines gallery for each series? Each set of data should result in a different line series. The X axis should display dates and times. The primary Y axis should show the pressures and a secondary Y axis should show the flows. How would I set up the arrays and associate each set of data with each different series? Notice that each series can have the same or different number of values.

Series 1 "Casing Pressure"

2012-01-21T02:45:10.280Z 79

2012-01-26T03:45:10.280Z 82

2012-02-10T02:45:10.280Z 93

2012-02-19T03:45:10.280Z 102

2012-03-21T02:45:10.280Z 128

2012-03-29T03:45:10.280Z 134

Series 2 "Tubing Pressure"

2012-01-21T02:45:10.280Z 379

2012-01-26T03:45:10.280Z 582

2012-02-10T02:45:10.280Z 293

2012-02-19T03:45:10.280Z 5102

2012-03-21T02:45:10.280Z 4128

2012-03-29T03:45:10.280Z 6134

Series 3 "Water Flow"

2012-01-21T15:45:22.280Z 321

2012-02-19T16:45:11.280Z 293

2012-03-21T17:45:34.280Z 456

2012-03-22T18:45:45.280Z 563

2012-02-22T16:45:11.280Z 212

2012-03-23T18:45:34.280Z 611

2012-03-24T22:45:45.280Z 123

Series 4 "Yesterday Water Flow"

2012-01-21T01:45:22.280Z 311

2012-02-19T02:45:11.280Z 299

2012-03-21T03:45:34.280Z 433

2012-03-28T04:45:45.280Z 560

2012-03-29T05:22:11.280Z 111

Series 5 "Oil Flow"

2012-01-21T15:45:22.280Z 23

2012-02-19T16:45:11.280Z 43

2012-03-21T17:45:34.280Z 51

Series 6 "Yesterday Oil Flow"

2012-01-21T01:45:22.280Z 78

2012-02-19T02:45:11.280Z 132

2012-03-21T03:45:34.280Z 134

2012-03-24T04:45:45.280Z 356

Thank you.

angelr · February 22, 2013

We wrapped a small sample showing how to pass data with different data points and multiple axes. This chart renders 3 different Y-axis: Pressure, Water Flow and Oil Flow.

The first two series (Pressure) are mapped to the first Y-axis, the second two (water flow) are mapped to the second Axis and consecutively.

In some cases, the chart interpolates lines. If you want to avoid this, set this property to false:

chart1.getData().setInterpolateHidden(true);

Here is the jsfiddle for this sample: http://jsfiddle.net/Gv5vw/1/

and the sample code:

<html>

<head>

    <title>Multiple Axes</title>    

    

    <script type="text/javascript" src="'>http://www.jchartfx.com/scripts/jquery-1.7.1.js"></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.coreBasic.js"></script>

</head>

<body>

    <div id="ChartDiv1" style="width:550px;height:400px;display:inline-block"></div>

    <script language="javascript" type="text/javascript">        

            window.onload = function () {

                onLoadDoc();

            }
            var chart1;
   function onLoadDoc() {

                chart1 = new cfx.Chart();
    chart1.getLegendBox().setVisible(false);
    var titles = chart1.getTitles();

    var title = new cfx.TitleDockable();

    title.setText("Multiple Axes & Series w/different number of datapoints");

    titles.add(title);
    var axis1 = chart1.getAxisY();

    var axis2 = chart1.getAxisY2();

    var axis3 = new cfx.AxisY();

    chart1.getAxesY().add(axis3);


    axis1.setTextColor("#9F1000");

    axis1.setForceZero(false);

    axis1.setVisible(true);

    axis1.getTitle().setText("Pressure");

    axis1.getTitle().setTextColor("#9F1000");

    axis1.setMin(50);

    axis1.setMax(650);

    axis1.setStep(50);
    axis2.setTextColor("#1D2793");

    axis2.setForceZero(false);

    axis2.setVisible(true);

    axis2.getTitle().setText("Water Flow");

    axis2.getTitle().setTextColor("#1D2793");

    axis2.setMin(250);

    axis2.setMax(350);

    axis2.setStep(10);

    axis2.setSeparation(10);

    axis2.getGrids().getMajor().setVisible(false);
    axis3.setTextColor("#14650C");

    axis3.setForceZero(false);

    axis3.setVisible(true);

    axis3.getTitle().setText("Oil Flow");

    axis3.getTitle().setTextColor("#14650C");

    axis3.setMin(15);

    axis3.setMax(400);

    axis3.setStep(50);

    axis3.setSeparation(10);

    axis3.getGrids().getMajor().setVisible(false);
    chart1.getAllSeries().setMarkerShape(cfx.MarkerShape.None);

    chart1.getAllSeries().getLine().setWidth("2");
    var items = [{

     "Casing Pressure": 79,

      "Tubing Pressure": 379,

      "Water Flow": 321,

      "Yesterday Water Flow": 311,

      "Oil Flow": 23,

      "Yesterday Oil Flow": 78,

      "Date": "2012-01-21T23:45:10.280Z"

    }, {

     "Casing Pressure": 82,

      "Tubing Pressure": 582,

      "Water Flow": 293,

      "Yesterday Water Flow": 312,

      "Yesterday Oil Flow": 132,

      "Date": "2012-01-26T23:45:10.280Z"

    }, {

     "Casing Pressure": 93,

      "Tubing Pressure": 293,

      "Water Flow": 293,

      "Yesterday Water Flow": 313,

      "Oil Flow": 43,

      "Yesterday Oil Flow": 134,

      "Date": "2012-02-10T23:45:10.280Z"

    }, {

     "Casing Pressure": 102,

      "Tubing Pressure": 510,

      "Water Flow": 293,

      "Yesterday Water Flow": 314,

      "Oil Flow": 51,

      "Date": "2012-02-19T23:45:10.280Z"

    }, {

     "Casing Pressure": 128,

      "Tubing Pressure": 412,

      "Water Flow": 293,

      "Yesterday Water Flow": 315,

      "Yesterday Oil Flow": 356,

      "Date": "2012-03-21T23:45:10.280Z"

    }, {

     "Casing Pressure": 134,

      "Tubing Pressure": 613,

      "Yesterday Water Flow": 316,

      "Oil Flow": 53,

      "Date": "2012-03-29T23:45:10.280Z"

    }];


    chart1.setGallery(cfx.Gallery.Lines);
    chart1.getData().setInterpolateHidden(true);
    chart1.getLegendBox().setDock(cfx.DockArea.Bottom);

    chart1.getLegendBox().setVisible(true);
    chart1.setDataSource(items);
    var series1 = chart1.getSeries().getItem(0);

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

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

    var series4 = chart1.getSeries().getItem(3);

    var series5 = chart1.getSeries().getItem(4);

    var series6 = chart1.getSeries().getItem(5);
    series1.setAxisY(axis1);

    series2.setAxisY(axis1);

    series3.setAxisY(axis2);

    series4.setAxisY(axis2);

    series5.setAxisY(axis3);

    series6.setAxisY(axis3);
    series1.setColor("#9F1000");

    series2.setColor("#9F1000");

    series3.setColor("#1D2793");

    series4.setColor("#1D2793");

    series5.setColor("#14650C");

    series6.setColor("#14650C");


    var chartDiv = document.getElementById('ChartDiv1');

    chart1.create(chartDiv);
            }
    </script>

</body>

</html>

Sign In

Adding multiple series data with the jQuery/JavaScript object syntax

Question

DanielL_550

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

angelr

Link to comment

Share on other sites

Join the conversation

Browse

Activity