Google Charts: How to put 3 or more different DataSets as curves in the same chart

Question

pretty please I hope you can help me with this trouble:

I need to make a chart with 3 different curves (sets of data), I tried the Join and it works fine for 2 sets, but the third I haven't found the way to put it in. here's a sample of the 3 sets

Set 1
Pressure | Liquid Flowrate
 0       |      50
100      |      300
200      |      400

Set 2
Pressure   | Liquid Flowrate
   10      |     20
   150     |     50
   500     |     600

Set 3
Pressure   | Liquid Flowrate
  55       |    320
  125      |    418
  250      |     25

I need the 3 curves to make a comparison between all of them (actually I need to compare the curves behaviour instead of the values), but since the 'X' (and ('Y') values are all different, I can't put the data into the same DataTable.

If you need any extra information just let me know...

And thank you very much in advance...

P.D.: here's the code with the code I have with the 3 data sets and the join, in case you can find it useful

WhiteHat · Accepted Answer

you were on the right track

the second join needs to include all the columns from the first join

var fullData = google.visualization.data.join(
  joinedData,
  voguelData,
  'full',

  // join columns
  [[0, 0]],

  // include columns from first table
  [1,2,3,4,5,6],

  // include columns from second table
  [1,2,3]
);

see following working snippet...

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
    // inflow
    var inflowData = new google.visualization.arrayToDataTable(   [["'X'","'Inflow'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[2936.02073,40.627573,null,null],[8.188287,3999.44566,null,null],[619.600726,3180.31993,"point { size: 10; shape-type: star; shape-sides: 4; fill-color: #000000; }","Punto de Operaci\u00f3n"],[1772.00372,1631.97183,null,null],[2351.72511,845.266412,null,null],[1195.53362,2407.62767,null,null],[313.814365,3590.16482,null,null],[2643.29146,446.480989,null,null],[907.503204,2794.22577,null,null],[160.957181,3794.94905,null,null],[2061.33892,1240.15161,null,null],[1483.74271,2020.31124,null,null],[466.690146,3385.28951,null,null],[2789.50773,245.261982,null,null],[84.540385,3897.29027,null,null],[763.53822,2987.32624,null,null],[2497.47208,646.244959,null,null],[1051.49988,2601.00048,null,null],[237.386183,3692.5695,null,null],[2206.31079,1043.25088,null,null]]   );
    // flowrate
    var flowrateData = new google.visualization.arrayToDataTable(   [["'X'","'Outflow'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[0,0,null,null],[3.145,2415.8804,null,null],[101.777916,2415.88204,null,null],[249.72729,2415.70168,null,null],[397.676665,2415.00924,null,null],[486.446289,2671.73524,null,null],[539.708064,2889.48375,null,null],[619.600726,3180.31993,null,null],[684.250947,3406.13551,null,null],[781.226279,3625.58774,null,null],[1023.66461,3625.08804,null,null],[1266.10294,3624.67156,null,null],[1411.56594,3624.47626,null,null],[1629.76044,3624.24869,null,null],[1872.19877,3624.01581,null,null],[2017.66176,3623.90403,null,null],[2235.85626,3623.75916,null,null],[2381.31926,3623.67574,null,null],[2599.51376,3623.56538,null,null],[2817.70825,3623.47235,null,null],[3145,3623.35124,null,null]]   )
    // vogel
    var voguelData = new google.visualization.arrayToDataTable(     [["'X'","'Vogel'",{"type":"string","role":"style"},{"type":"string","role":"annotation"}],[0,4000,null,null],[210.526316,3789.473684,null,null],[421.052632,3578.947368,null,null],[631.578947,3368.421053,null,null],[842.105263,3157.894737,null,null],[1052.631579,2947.368421,null,null],[1263.157895,2736.842105,null,null],[1473.684211,2526.315789,null,null],[1684.210526,2315.789474,null,null],[1894.736842,2105.263158,null,null],[2105.263158,1894.736842,null,null],[2315.789474,1684.210526,null,null],[2526.315789,1473.684211,null,null],[2736.842105,1263.157895,null,null],[2201.318595,1052.631579,null,null],[2339.204645,842.105263,null,null],[2450.332942,631.578947,null,null],[2534.703484,421.052632,null,null],[2592.316273,210.526316,null,null],[2623.171308,0,null,null]]    )

    var joinedData = google.visualization.data.join(inflowData, flowrateData, 'full', [[0, 0]], [1,2,3], [1,2,3]);

    var fullData = google.visualization.data.join(joinedData, voguelData, 'full', [[0, 0]], [1,2,3,4,5,6], [1,2,3]);

    var options1 = {
        interpolateNulls: true,
        title: 'Nodal Analysis - Well: 1330',
        hAxis: {
            title: 'Liquid Flowrate (STBL/D)'
        },
        vAxis: {
            title: 'Pressure (PSIA)',
        },
        pointSize: 3
    };

    var chart1 = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart1.draw(fullData, options1);
}

Google Charts: How to put 3 or more different DataSets as curves in the same chart

Answers (1)

Related Questions