Google charts to use dashboard with new Material charts - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Google charts to use dashboard with new Material charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Controls Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> 
         <table class="columns"> 
            <tbody>
               <tr> 
                  <td> 
                     <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div> 
                     <div> 
                        <button style="margin: 1em 1em 1em 2em" onclick="changeRange();"> Select range [2, 5] </button>
                        <br> 
                        <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();"> Make the pie chart 3D </button> 
                     </div> 
                     <script type="text/javascript">
              function changeRange() {
                programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
                programmaticSlider.draw();
              }// ww  w  .  j av a  2  s  .  co  m
              function changeOptions() {
                programmaticChart.setOption('is3D', true);
                programmaticChart.draw();
              }
            
                     </script> 
                  </td> 
                  <td> 
                     <div id="programmatic_chart_div"></div> 
                  </td> 
               </tr> 
            </tbody>
         </table> 
      </div> 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['line', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);
      function drawStuff() {
        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));
        programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten',
            'ui': {'labelStacking': 'vertical'}
          }
        });
       programmaticChart  = new google.visualization.ChartWrapper({
        'chartType': 'Line',
        'containerId': 'programmatic_chart_div',
        'options': {
          'width': 300,
          'height': 300,
          'legend': 'none',
          'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
          'pieSliceText': 'value'
        }
      });
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Donuts eaten'],
        ['Michael' , 5],
        ['Elisa', 7],
        ['Robert', 3],
        ['John', 2],
        ['Jessica', 6],
        ['Aaron', 1],
        ['Margareth', 8]
      ]);
      dashboard.bind(programmaticSlider, programmaticChart);
      dashboard.draw(data);
    }

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

Related Tutorials