Jump to content
JChartFX Community
  • 0

Adding multiple series data with the jQuery/JavaScript object syntax


DanielL_550
 Share

Question

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.

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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>

Link to comment
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...
 Share

×
×
  • Create New...