multiple line graph in a single chart using google chart

Question

tyring to ploat a comparison of two versions(aganist memory usage) in a single graph using google chart. In the graph i want to compares previous version 3.20.62 and latest version 3.21.50 performance aganist memory usage .X axis represnts corresponding version build's uptime(3.21.50 starts at 1.24.22 AM and again restarts at 1.24.42 AM with a poling interval of 20 sec. Same in the case of 3.20.62).

No matter when the build starts. My intention is to show the memory usage of two versions at different restarts(like version starts at 1:24:22 then restarts at 1:24:42 and so and so..) intervals).In this graph it's difficult to compare the memory usage of version 3.20.62 with 3.21.50 .because second line for version 3.20.62 starts at 14th pos in x axis.I have to start line for 3.20.62 from the 1st position of Xaxis..so that i can compare the memory usage very easily...there is no importance of when the version build starts..

For example in the second restart of v.3.21.50 its memory usage is 970 and v.3.20.62 is 911 MB. i want to combine these lines as well .How can i do this? I do not know how to implement this?Any idea?

code

function drawChart() {
        // Create our data table.
        var data = new google.visualization.DataTable();           
        data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

        data.addRows([["1:24:22", 969]]);


        // Set additional chart options
        var myOptions = Object.assign({}, commonOptions);
        myOptions.pointSize = 3;           


        var data1 = new google.visualization.DataTable();
        data1.addColumn('string', 'Tick');


        data1.addRows([["2:20:04", 911]]);


        var joinedData = google.visualization.data.join(data, data1, 'full', [[0, 0]], [1], [1]);
        var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
        chart.draw(joinedData, myOptions);

    }

Answer 1

This might get a better comparative view:

http://jsfiddle.net/XF7JE/491/

var commonOptions = {
    titlePosition: "none",
    height: 350,
    width: 1024,
    pointShape: "circle",
    crosshair: {
      trigger: "both",
      color: "#A9A9A9"
    },

    chartArea: {
      top: 25,
      left: 70,
      width: "80%",
    },

    backgroundColor: {
      strokeWidth: 3,
      fill: "#F9F9F9"
    },
    legend: {
      position: "right"
    },
    hAxis: {
      slantedText: true,
      slantedTextAngle: 90,
    },
    tooltip: {
      isHtml: true
    },
    vAxis: {
      gridlines: {
        count: -1,
        color: "#000000"
      },
      minorGridlines: {
        count: 1
      }
    }
  },
  releases = [{
    vs: '3.21.50',
    data: [
      ["1:24:22", 969, "Uptime: 1:24:22<br/>Memory Used: 969 MB"],
      ["1:24:42", 970, "Uptime: 1:24:42<br/>Memory Used: 970 MB"],
      ["1:25:03", 972, "Uptime: 1:25:03<br/>Memory Used: 972 MB"],
      ["1:25:23", 973, "Uptime: 1:25:23<br/>Memory Used: 973 MB"],
      ["1:25:43", 974, "Uptime: 1:25:43<br/>Memory Used: 974 MB"],
      ["1:26:03", 975, "Uptime: 1:26:03<br/>Memory Used: 975 MB"],
      ["1:26:23", 978, "Uptime: 1:26:23<br/>Memory Used: 978 MB"],
      ["1:26:43", 399, "Uptime: 1:26:43<br/>Memory Used: 399 MB"],
      ["1:27:03", 906, "Uptime: 1:27:03<br/>Memory Used: 906 MB"],
      ["1:27:23", 1231, "Uptime: 1:27:23<br/>Memory Used: 1231 MB"],
      ["1:27:43", 483, "Uptime: 1:27:43<br/>Memory Used: 483 MB"],
      ["1:28:03", 800, "Uptime: 1:28:03<br/>Memory Used: 800 MB"],
      ["1:28:23", 1079, "Uptime: 1:28:23<br/>Memory Used: 1079 MB"]
    ]
  }, {
    vs: '3.20.62',
    data: [
      ["2:20:04", 911, "Uptime: 2:20:04<br/>Memory Used: 911 MB"],
      ["2:20:24", 914, "Uptime: 2:20:24<br/>Memory Used: 914 MB"],
      ["2:20:44", 916, "Uptime: 2:20:44<br/>Memory Used: 916 MB"],
      ["2:21:04", 920, "Uptime: 2:21:04<br/>Memory Used: 920 MB"],
      ["2:21:24", 921, "Uptime: 2:21:24<br/>Memory Used: 921 MB"],
      ["2:21:44", 924, "Uptime: 2:21:44<br/>Memory Used: 924 MB"],
      ["2:22:04", 927, "Uptime: 2:22:04<br/>Memory Used: 927 MB"],
      ["2:22:24", 639, "Uptime: 2:22:24<br/>Memory Used: 639 MB"],
      ["2:22:44", 685, "Uptime: 2:22:44<br/>Memory Used: 685 MB"],
      ["2:23:04", 803, "Uptime: 2:23:04<br/>Memory Used: 803 MB"],
      ["2:23:24", 827, "Uptime: 2:23:24<br/>Memory Used: 827 MB"],
      ["2:23:44", 853, "Uptime: 2:23:44<br/>Memory Used: 853 MB"],
      ["2:24:04", 941, "Uptime: 2:24:04<br/>Memory Used: 941 MB"]
    ]
  }];

releases.forEach(function(r){
  k = 0;
  r.data.forEach(function(d){ 
    d[0] = ++k;
  });
});

function drawChart() {
  // Create our data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Tick');
  data.addColumn('number', 'Release Version:  3.21.50');
  data.addColumn({
    'type': 'string',
    'role': 'tooltip',
    'p': {
      'html': true
    }
  });

  data.addRows(releases[0].data);


  // Set additional chart options
  var myOptions = Object.assign({}, commonOptions);
  myOptions.pointSize = 3;
  myOptions.hAxis['showTextEvery'] = 1;
  myOptions.vAxis['viewWindow'] = {};
  myOptions.vAxis['format'] = "##### MB";
  myOptions.interpolateNulls = true;
  // myOptions.seriesType= 'bars';


  var data1 = new google.visualization.DataTable();
  data1.addColumn('number', 'Tick');
  data1.addColumn('number', 'Previous Version:  3.20.62');
  data1.addColumn({
    'type': 'string',
    'role': 'tooltip',
    'p': {
      'html': true
    }
  });


  data1.addRows(releases[1].data);


  var joinedData = google.visualization.data.join(data, data1, 'full', [
    [0, 0]
  ], [1], [1]);
  var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
  chart.draw(joinedData, myOptions);
}
google.load('visualization', '1', {
  packages: ['corechart'],
  callback: drawChart
});

<script src="https://www.google.com/jsapi?fake=.js"></script>
<html>

<head>
  <script src="https://www.google.com/jsapi?fake=.js"></script>
</head>

<body>
  <div id="chart_div"></div>
</body>

</html>