Draw two lines in column chart google charts

Question

I am trying to draw two lines using google combo charts, I am referring this link https://developers.google.com/chart/interactive/docs/gallery/combochart but I am able to draw only one line!!!

function drawchart1(dataValues) {
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        var data = new google.visualization.DataTable();

        data.addColumn('string', 'KPI_MONTH');
        data.addColumn('number', 'DIE');
        data.addColumn('number', 'DIE_TS');
        data.addColumn('number', 'DIE_LL');

        for (var i = 0; i < dataValues.length; i++) {
            data.addRow([dataValues[i].KPI_MONTH, dataValues[i].DIE, dataValues[i].DIE_TS, dataValues[i].DIE_LL]);
        }
        // Instantiate and draw our chart, passing in some options
        var chart = new google.visualization.ComboChart(document.getElementById('ColumnChart'));
        //var chart1 = new google.visualization.PieChart(document.getElementById('piechart1'));

        chart.draw(data,
          {
              
              title: "Column Chart of Google Chart in Asp.net",
              position: "top",
              fontsize: "14px",
              seriesType: 'bars',
         
             series: { 2: { type: 'line' } },
              series: { 1: { type: 'line' } },
              chartArea: { width: '50%' },
          });

Only for the series 1 graph is getting generated like below.Only one line is geeting generated in this graph

WhiteHat WhiteHat · Accepted Answer · 2016-01-26T13:09:51

The chart options should only have one key for series, which can have multiple series definitions.

    series: {
      1: { type: 'line' },
      2: { type: 'line' }
    },

Example...

google.load('visualization', '1', {
  packages: ['corechart'],
  callback: drawchart1
});

function drawchart1(dataValues) {

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'KPI_MONTH');
    data.addColumn('number', 'DIE');
    data.addColumn('number', 'DIE_TS');
    data.addColumn('number', 'DIE_LL');

    data.addRow(['Jan-15', 80, 90, 80]);
    data.addRow(['Feb-15', null, 90, 80]);
    data.addRow(['Mar-15', 100, 90, 80]);
    data.addRow(['Apr-15', 100, 90, 80]);
    data.addRow(['May-15', 20, 90, 80]);
    data.addRow(['Jun-15', 30, 90, 80]);
    data.addRow(['Jul-15', 10, 90, 80]);
    data.addRow(['Aug-15', 50, 90, 80]);
    data.addRow(['Sep-15', 30, 90, 80]);
    data.addRow(['Oct-15', 10, 90, 80]);
    data.addRow(['Nov-15', 20, 90, 80]);
    data.addRow(['Dec-15', 100, 90, 80]);

    var chart = new google.visualization.ComboChart(document.getElementById('ColumnChart'));
    chart.draw(data,
    {
        title: "Column Chart of Google Chart in Asp.net",
        position: "top",
        fontsize: "14px",
        seriesType: 'bars',
        series: {
          1: { type: 'line' },
          2: { type: 'line' }
        },
        chartArea: { width: '50%' },
      });
}

<script src="https://www.google.com/jsapi"></script>
<div id="ColumnChart"></div>

Draw two lines in column chart google charts

1 Answers