Add Stroked Point Markers to a Google Line Chart

I was pretty easily able to add point markers to a google line chart, but it took a little more digging to be able to add a line stroke to those points.  I wanted something like the following (which is the result of the code used below):

 

\"Google

 

 

It came down to making sure to use the arrayToDataTable functionlity to insert the data instead of the data.addRows functionality.  This allows you to insert more parameters for each point, allowing you to specify storke colors, sizing, fill colors, and point size for each point:

  google.load(\'visualization\', \'1.0\', {\'packages\':[\'corechart\']});
  google.setOnLoadCallback(drawChart);

  function drawChart() {

    //Create the data table:
      var data = new google.visualization.DataTable();
      data.addColumn(\'string\', \'Topping\');
      data.addColumn(\'number\', \'Slices\');
				
    //Add the data:	
      var data = google.visualization.arrayToDataTable
        ([[\'X\', \'Y\', {\'type\': \'string\', \'role\': \'style\'}],
          [1, 3, \'point { size: 5; fill-color: white; stroke-color: #639426; stroke-width: 2}\'],
          [2, 2.5, \'point { size: 5; fill-color: white; stroke-color: #639426; stroke-width: 2}\'],
          [3, 3, \'point { size: 5; fill-color: white; stroke-color: #639426; stroke-width: 2}\'],
          [4, 4, \'point { size: 5; fill-color: white; stroke-color: #639426; stroke-width: 2}\'],
          [5, 5, \'point { size: 5; fill-color: white; stroke-color: #639426; stroke-width: 2}\'],
          [6, 3, \'point { size: 5; fill-color: white; stroke-color: #639426; stroke-width: 2}\'],
          [7, 2.5, \'point { size: 5; fill-color: white; stroke-color: #639426; stroke-width: 2}\'],
          [8, 3, \'point { size: 5; fill-color: white; stroke-color: #639426; stroke-width: 2}\']
       ]);

    //Set chart options:
       var options = {
         width:1000,
         height:500,
         backgroundColor: \'white\',
         chartArea: {backgroundColor: \'white\'},
         colors: [\'#639426\'],
         pointSize: 5
       };

    //Draw chart:
        var chart = new google.visualization.AreaChart(document.getElementById(\'chart_div\'));
        chart.draw(data, options);
  }	

 

I couldn\'t find a way to \'globally\' apply those values so they don\'t have to be added with each piece of point data, but since I\'m generally looping through something to generate the data points, it\'s not too big of a deal.




Related Posts


Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Removing the Horizontal Margins on a Google Chart Graph

I seem to be able to successfully modify quite a bit with google charts, but I couldn't find a good way to remove the horizontal padding to the left and right of a google graph. From what I can find, there really isn't a good way to do it...
Read Post

PHP JSON Returned As Object Instead of Array

I was returning, what I thought was an array from PHP, but it kept returning it as a json object...
Read Post

A Simple Slideout Menu

I just wanted an easy slideout menu. Click on a link, and the menu slides out from the left side of the screen. Click on the link again, or somewhere else on the page, and the menu slides back in...
Read Post