CODEWITHSUNDEEP
chartsgoogle-visualizationlinechart
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

Google Line chart with dual Y axis but with 3 or more time series

I need to draw a line graph with multiple lines, but the graph is also a Dual Y-chart. In my case it can be 3 or more lines, in which each line belongs to the left or right Y-axis.

So, looking at the example/jsfiddle from the documentation

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

  function drawChart() {

    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Month');
    data.addColumn('number', "Average Temperature");
    data.addColumn('number', "Average Hours of Daylight");

    data.addRows([
      [new Date(2014, 0),  -.5,  5.7],
      [new Date(2014, 1),   .4,  8.7],
      [new Date(2014, 2),   .5,   12],
      [new Date(2014, 3),  2.9, 15.3],
      [new Date(2014, 4),  6.3, 18.6],
      [new Date(2014, 5),    9, 20.9],
      [new Date(2014, 6), 10.6, 19.8],
      [new Date(2014, 7), 10.3, 16.6],
      [new Date(2014, 8),  7.4, 13.3],
      [new Date(2014, 9),  4.4,  9.9],
      [new Date(2014, 10), 1.1,  6.6],
      [new Date(2014, 11), -.2,  4.5]
    ]);

    var materialOptions = {
      chart: {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
      },
      width: 900,
      height: 500,
      series: {
        // Gives each series an axis name that matches the Y-axis below.
        0: {axis: 'Temps'},
        1: {axis: 'Daylight'}
      },
      axes: {
        // Adds labels to each axis; they don't have to match the axis names.
        y: {
          Temps: {label: 'Temps (Celsius)'},
          Daylight: {label: 'Daylight'}
        }
      }
    };

    var classicOptions = {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
      width: 900,
      height: 500,
    // Gives each series an axis that matches the vAxes number below.
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1}
      },
      vAxes: {
        // Adds titles to each axis.
        0: {title: 'Temps (Celsius)'},
      1: {title: 'Daylight'}
    },
    hAxis: {
      ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
              new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
              new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
             ]
    },
    vAxis: {
      viewWindow: {
        max: 30
      }
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, materialOptions);
    button.innerText = 'Change to Classic';
    button.onclick = drawClassicChart;
  }

  function drawClassicChart() {
    var classicChart = new google.visualization.LineChart(chartDiv);
    classicChart.draw(data, classicOptions);
    button.innerText = 'Change to Material';
    button.onclick = drawMaterialChart;
  }

  drawMaterialChart();

}

DEMO

it is completely unclear how I should do this. I tried to add another data.addRows([...]) but that doesn't give a nice chart

Any suggestions?

Upvotes: 1

Views: 1371

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

not sure I completely understand the question.
but if you simply want additional lines,
you need to add additional columns to the data table.

for each column added, a new line, or series, will be added to the chart.
the following data table will generate four lines. 

var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Line 1 - Series 0");
data.addColumn('number', "Line 2 - Series 1");
data.addColumn('number', "Line 3 - Series 2");
data.addColumn('number', "Line 4 - Series 3");

and you control which axis each line belongs to,
by setting the axis name. 

  series: {
    // Gives each series an axis name that matches the Y-axis below.
    0: {axis: 'Temps'},
    1: {axis: 'Daylight'},
    2: {axis: 'Temps'},
    3: {axis: 'Daylight'}
  },

here, the first line, or series 0, will belong to the left axis, Temps.
the second (series 1) to the right (Daylight), and so on.

see following working snippet... 

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

  function drawChart() {

    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Month');
    data.addColumn('number', "Line 1 - Series 0");
    data.addColumn('number', "Line 2 - Series 1");
    data.addColumn('number', "Line 3 - Series 2");
    data.addColumn('number', "Line 4 - Series 3");

    data.addRows([
      [new Date(2014, 0),  -.5,  5.7, -1, 10],
      [new Date(2014, 1),   .4,  8.7, -1, 10],
      [new Date(2014, 2),   .5,   12, -1, 10],
      [new Date(2014, 3),  2.9, 15.3, -1, 10],
      [new Date(2014, 4),  6.3, 18.6, -1, 10],
      [new Date(2014, 5),    9, 20.9, -1, 10],
      [new Date(2014, 6), 10.6, 19.8, -1, 10],
      [new Date(2014, 7), 10.3, 16.6, -1, 10],
      [new Date(2014, 8),  7.4, 13.3, -1, 10],
      [new Date(2014, 9),  4.4,  9.9, -1, 10],
      [new Date(2014, 10), 1.1,  6.6, -1, 10],
      [new Date(2014, 11), -.2,  4.5, -1, 10]
    ]);

    var materialOptions = {
      chart: {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
      },
      width: 900,
      height: 500,
      series: {
        // Gives each series an axis name that matches the Y-axis below.
        0: {axis: 'Temps'},
        1: {axis: 'Daylight'},
        2: {axis: 'Temps'},
        3: {axis: 'Daylight'}
      },
      axes: {
        // Adds labels to each axis; they don't have to match the axis names.
        y: {
          Temps: {label: 'Temps (Celsius)'},
          Daylight: {label: 'Daylight'}
        }
      }
    };

    var classicOptions = {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
      width: 900,
      height: 500,
    // Gives each series an axis that matches the vAxes number below.
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1},
        2: {targetAxisIndex: 0},
        3: {targetAxisIndex: 1}
      },
      vAxes: {
        // Adds titles to each axis.
        0: {title: 'Temps (Celsius)'},
      1: {title: 'Daylight'}
    },
    hAxis: {
      ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
              new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
              new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
             ]
    },
    vAxis: {
      viewWindow: {
        max: 30
      }
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, materialOptions);
    button.innerText = 'Change to Classic';
    button.onclick = drawClassicChart;
  }

  function drawClassicChart() {
    var classicChart = new google.visualization.LineChart(chartDiv);
    classicChart.draw(data, classicOptions);
    button.innerText = 'Change to Material';
    button.onclick = drawMaterialChart;
  }

  drawMaterialChart();

}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions