Linechart,Tablechart and Piechart

by forssux

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'controls']}]}"></script>
  <div id="table1"><!-- Table renders here --></div>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
  <div id="control_div"><!-- Controls renders here --></div>
  <div id="line_div"><!-- Line chart renders here --></div>
  <div id="table_div"><!-- Table renders here --></div>
  <table class="columns">
    <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();
          }

          function changeOptions() {
            programmaticChart.setOption('is3D', true);
            programmaticChart.draw();
          }
        </script>


      </td>
      <td>
        <div id="programmatic_chart_div"></div>
      </td>

    </tr>
  </table>
</div>
<!-- // <div id="dashboard_div">-->   

<!-- // this is the end -->

JavaScript

google.setOnLoadCallback(drawChart);

   var table1 = new google.visualization.Table(document.getElementById('table1'));
    table1.draw(data, {});
function drawChart() {
    var dashboard = new google.visualization.Dashboard(document.getElementById('programmatic_dashboard_div'));


    var data = new google.visualization.DataTable();
        data.addColumn('number', 'Drie');
        data.addColumn('string', 'Name');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Donuts eaten'); 
        data.addColumn('number', 'Hours Worked');


    data.addRows([
        [33333333,'Michael', new Date(2012,0,2),1,9],
        [33333,'Elisa', new Date(2012,0,3),7,8],
        [3,'Robert', new Date(2012,0,4),9,10],
        [3,'John', new Date(2012,0,5),7,8],
        [3,'Jessica', new Date(2012,0,6),3,5],
        [3,'Aaron', new Date(2012,0,6),7,4],
        [3,'Margareth', new Date(2012,0,7),7,3]
    ]);

    // We omit "var" so that programmaticSlider is visible to changeRange.
    programmaticSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'programmatic_control_div',
            'options': {
                'filterColumnLabel': 'Donuts eaten',
                'ui': {'labelStacking': 'vertical'}
            }
        });

    programmaticChart  = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'programmatic_chart_div',
        'options': {
            'width': 300,
            'height': 300,
            'legend': 'none',
            'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value'
        },
        
                  'view': {
                  'columns': [0, 4]
              }
    });

    dashboard.bind(programmaticSlider, programmaticChart);

    //Create a DataView from the data_table
    var dataView = new google.visualization.DataView(data);

    //Set the first column of the...