google line chart points manipulation based on series value

Question

I am using Google Line Chart for my project. I need to manipulate points on the line chart based on the values. For example, if the value is less then 170 then it shows default point on line chart and if it is greater then 170, it should show different point on the line chart. how should i put different color for points in the line chart for one series? Here is my 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 = google.visualization.arrayToDataTable([
          ['Date', 'Record'],
          ['4/1',  165],
          ['4/2',  160],
          ['4/3',  163],
          ['4/4',  173]
        ]);

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

        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>

Plese help me on this.

jmac jmac · Accepted Answer · 2013-06-10T23:32:23

You cannot color points individually using the current Google Visualization API. Any coloring must be done with separate series.

In your case, you can achieve the desired result with a workaround. Here is what I presume you want:

Line Chart Sample

This code should give you the result you want:

<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', 'Line');
        data.addColumn('number', 'Under 170');
        data.addColumn('number', 'Over 170');
        data.addRows([
          ['4/1',  165, 165, null],
          ['4/2',  160, 160, null],
          ['4/3',  163, 163, null],
          ['4/4',  173, null, 173]
        ]);

        var options = {
          title: 'Line Chart',
          pointSize : 5,
          series: [{color: 'black', pointSize: 0}, {color: 'red', lineWidth: 0}, {color: 'blue', lineWidth: 0}]
        };

        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>

Basically, what you have to do is:

Create 3 different series
- One for the line (no points shown)
- One for the points <170 (color 1)
- One for the point >=170 (color 2)
Add all data values to series 1 (so there is a solid line)
Add points to series 2 that are <170, with all other values as null
Add points to series 3 that are >=170, with all other values as null

You can then use the series option to format the chart. The first series will determine the line color. The second series will determine the color for points <170. The third series will determine the color for point >=170.

google line chart points manipulation based on series value

1 Answers