Color Change - Google Column chart material - Javascript Google Chart

Javascript examples for Google Chart:Column Chart

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

Description

Color Change - Google Column chart material

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Column 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','packages':['corechart']}]}"></script> 
      <div id="columnchart_material"></div> 
      <script type="text/javascript">
      google.load("visualization", "1.0", {packages:["bar"]});
      google.setOnLoadCallback(drawChart);
  function drawChart() {/* w w w .  j  a v a  2 s .co m*/
    var data = google.visualization.arrayToDataTable([
      ['', 'Ville', {role: 'style'}, 'Departement', {role: 'style'} ],
      ['Taxe d\'habitation',22, 'color: #A63950', 24, 'color: #39A68F', ],
      ['Taxe fonci?re sur le bati',24,  'color: #A63950', 21,  'color: #39A68F',],
      ['Taxe fonci?re non-bati', 36,  'color: #A63950', 18, 'color: #39A68F',]
    ]);
    var options = {
      chart: {
        title: 'Taxes communales',
      }
    };
    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }

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

Related Tutorials