Google Changing Highlight Color on Line Chart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Google Changing Highlight Color on Line Chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Explorer Highlight Box Hacking - MutationObserver</title> 
      <style>

#chart_div {/*from   ww  w  .j a v  a  2  s  .c  om*/
   width:50vw;
}


      </style> 
   </head> 
   <body translate="no"> 
      <script src="https://www.gstatic.com/charts/loader.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
      <div id="chart_div"></div> 
      <script>
      google.charts.load('current', {
  callback: function () {
    var y = {
      "cols": [
      {"p": {"role": "domain"},"label": "Distance","type": "number"},
      {"p": {"role": "data"},"label": "Row A","type": "number"}],
      "rows": [
        {"c":[{"v":0.00},{"v":154.0}]},
        {"c":[{"v":0.01},{"v":154.3}]},
        {"c":[{"v":0.02},{"v":154.5}]},
        {"c":[{"v":0.03},{"v":154.8}]},
        {"c":[{"v":0.04},{"v":155.0}]},
        {"c":[{"v":0.05},{"v":155.2}]},
        {"c":[{"v":0.06},{"v":155.4}]},
        {"c":[{"v":0.07},{"v":155.6}]},
        {"c":[{"v":0.08},{"v":155.8}]},
        {"c":[{"v":0.09},{"v":156.0}]},
        {"c":[{"v":0.10},{"v":156.2}]},
        {"c":[{"v":0.11},{"v":156.3}]},
        {"c":[{"v":0.12},{"v":156.4}]},
        {"c":[{"v":0.13},{"v":156.5}]},
      ]
    };
    var data = new google.visualization.DataTable(y);
    var options = {
      explorer: {
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomOut: 1,
        maxZoomIn: 0.01,
      },
      hAxis: {
        title: 'Distance'
      },
      vAxis: {
        title: 'Elevation'
      },
    };
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(container);
    chart.draw(data, options);
    var observer = new MutationObserver(function(mutations) {
      for(var i=0; i<mutations.length; ++i) {
        for(var j=0; j<mutations[i].addedNodes.length; ++j) {
          if (mutations[i].addedNodes[j].getAttribute('fill') === '#0000ff') {
            mutations[i].addedNodes[j].setAttribute('fill', 'magenta');
          }
        }
      }
    });
    var config = { childList: true, subtree:true };
    observer.observe(container, config);
  },
  packages:['corechart']
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials