drawing google line chart with multiple colors points

In this tutorial I will show how can we draw google line chart with different point colors.

Lets see bellow code.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Record');
        data.addRows([
          ['1',  1605],
          ['2',  1060],
          ['3',  1543],
          ['4',  1730]
        ]);

        var options = {
          title: 'Line Chart', pointSize : 10 };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>`enter code here`
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Above script will plot line chart something like this
1

Now what if we want the colors of points to be different with google line chart ?
Well we need to do some manipulations for this…
First we need to create different column for each color in data ie.

Lets say I want point in two colors blue & red, so for that we need to create data something like this

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Record');
        data.addColumn('number', 'BlueRecord');
        data.addColumn('number', 'RedRecord');
        data.addRows([
          ['1',  1605, 1605, null],
          ['2',  1060, 1060, null],
          ['3',  1543, null, 1543],
          ['4',  1730, 1730, null]
        ]);

and need to add bellow option in options

 series: [{color: 'blue', pointSize: 0}, {color: 'blue', lineWidth: 0}, {color: 'red', lineWidth: 0}]

Bellow is full code

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'Record');
    data.addColumn('number', 'BlueRecord');
    data.addColumn('number', 'RedRecord');
    data.addRows([
        ['1', 1605, 1605, null],
        ['2', 1060, 1060, null],
        ['3', 1543, null, 1543],
        ['4', 1730, 1730, null]
    ]);

    var options = {
        series: [{
            color: 'blue',
            pointSize: 0
        }, {
            color: 'blue',
            lineWidth: 0
        }, {
            color: 'red',
            lineWidth: 0
        }],
        title: 'Line Chart',
        pointSize: 10,
        legend: {
            position: 'none'
        },
    };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>`enter code here`
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

It will look something like bellow
2

Here is JSFiddle Link for this tutorial.

admin

  • Yasser

    Nice post