Google Charts Add Markers to Line charts Function - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Line Chart

Description

Google Charts Add Markers to Line charts Function

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Area Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
      <div id="chart_div" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
      google.setOnLoadCallback(drawChart);
      function drawChart() {/*from   ww w.  j  a  v a  2s  .  c om*/
        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);
          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){
              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){
                      console.log(data[0][1+index1] +": "+ data[1+index2][1+index1]);
                  });
                  path.parentNode.appendChild(image);
              });
          });
      }

      </script>  
   </body>
</html>

Related Tutorials