CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
ironsand
ironsand

Reputation: 15151

How to draw Google Line Chart with different x-axis values

There are two values like this:

var company1 = [
    [new Date(2004, 12, 1), 1000],
    [new Date(2004, 12, 3), 500],
    [new Date(2004, 12, 7), 950]
    [new Date(2004, 12, 8), 1000]];
var company2 = [
    [new Date(2004, 12, 2), 800],
    [new Date(2004, 12, 4), 600],
    [new Date(2004, 12, 5), 300]
    [new Date(2004, 12, 8), 500]];

And I want to draw a chart like this.

enter image description here

To draw a line chart like this, do I need to create an arrays like this?

  ['2004/12/1', 1000, null],
  ['2004/12/2', 750, 800],
  ['2004/12/3', 500, 700],
  ['2004/12/4', 650, 600],
  ['2004/12/5', 800, 300],
  ['2004/12/7', 950, 400],
  ['2004/12/8', 1000, 500]

or is there a easier way to create a chart with different x-axis values?

This is the jsfiddle snippet for the chart. https://jsfiddle.net/fe26/u3n8qsay/

Upvotes: 1

Views: 2436

Answers (1)

cringe
cringe

Reputation: 13950

You can use google_visualization_data_join to join two sets of data. See Google Chart - two date series on the same chart

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

function drawChart() {
    var data1 = new google.visualization.DataTable();
    data1.addColumn('date', 'Date');
    data1.addColumn('number', 'Company 1');
    
    data1.addRows([
      [new Date(2004, 11, 1), 1000],
      [new Date(2004, 11, 3), 500],
      [new Date(2004, 11, 7), 950],
      [new Date(2004, 11, 8), 1000]
    ]);
    
    var data2 = new google.visualization.DataTable();
    data2.addColumn('date', 'Date');
    data2.addColumn('number', 'Company 2');
    
    data2.addRows([
      [new Date(2004, 11, 2), 800],
      [new Date(2004, 11, 4), 600],
      [new Date(2004, 11, 5), 300],
      [new Date(2004, 11, 8), 500]
    ]);
    
    var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
    
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(joinedData, {
        height: 300,
        width: 600,
        interpolateNulls: true
    });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions