Google Charts Add Markers to Linecharts Function

Question

I am using this code to display google linecharts:

google.load('visualization', '1', {'packages':['linechart']});
      google.setOnLoadCallback(drawChartYear);

      function drawChartYear() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Cars', 'Bikes', 'Both'],
          ['2012',  1000,      400,      1400],
          ['2013',  1170,      460,      1630],
          ['2014',  660,       1120,     1780],
          ['2015',  1030,      540,      1570]
        ]);

        var chart = new google.visualization.LineChart(document.getElementById('line_chart_year_div'));
        chart.draw(data, {width: 800, height: 240, legend: 'bottom', title: 'View'});
      }

What I need to add to this code are Markers.

How do I do this using my function?

Answer 1

As I know google chart doesn't supply to display markers, so my solution is to get svg points on the chart and add markers on the points as svg image.

jsfiddle

google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = [
        ['Year', 'Cars', 'Bikes', 'Both'],
        ['2012',  1000,      400,      1400],
        ['2013',  1170,      460,      1630],
        ['2014',  660,       1120,     1780],
        ['2015',  1030,      540,      1570]
    ];
    var chart_data = google.visualization.arrayToDataTable(data);

    var options = {
        width: 800, 
        height: 300, 
        legend: 'bottom', 
        title: 'View'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(chart_data, options);
    // Paths whose logicalname lead by "line#" include chart points
    var path_collection = document.getElementsByTagName('path');
    var path_array = Array.prototype.slice.call( path_collection, 0 );
    var paths = path_array.filter(function(path){
        return path.logicalname && path.logicalname.indexOf("line#") > -1;
    });

    paths.forEach(function(path, index1){
        // convert coordinate format
        path.getAttribute('d').split('M').pop().split('L').forEach(function(str_point, index2){
            var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
            var point = str_point.split(",");
            image.setAttributeNS(null, "x", point[0]-12);
            image.setAttributeNS(null, "y", point[1]-25);
            image.setAttributeNS("http://www.w3.org/1999/xlink", "href", "https://cdn3.iconfinder.com/data/icons/location-map/512/pin_marker_star-512.png");
            image.setAttributeNS(null, "height", "25px"); 
            image.setAttributeNS(null, "width", "25px"); 
            image.setAttributeNS(null, "style","cursor:pointer");
            image.addEventListener("mousedown", function(e){
                alert(data[0][1+index1] +": "+ data[1+index2][1+index1]);
            });
            path.parentNode.appendChild(image);
        });
    });
}