Google chart voor Roos

gistfile1.txt

// HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example2-visualization" style="width: 600px; height: 360px; padding: 10px;"></div>
<button id="example2-b1">Toon 21e eeuw</button>

// JavaScript
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(init);

function init() {
    // Some raw data (not necessarily accurate)
    var rowData14eEeuw = [['Factor', 'Immuniteit', 'Communicatie', 'Hygiëne', 'Gezondheidsmaatregelen', 'Reizen'],
                    ['', 4, 8, 4, 8, -2 ]];
    var rowData21eEeuw = [['Factor', 'Immuniteit', 'Communicatie', 'Hygiëne', 'Gezondheidsmaatregelen', 'Reizen'],
                    ['', -2, -8, -2, -8, 8 ]];

    // Create and populate the data tables.
    var data = [];
    data[0] = google.visualization.arrayToDataTable(rowData14eEeuw);
    data[1] = google.visualization.arrayToDataTable(rowData21eEeuw);

    var options = {
    	chartArea: {left:60,top:40,width: '50%', height: '80%'},
      titleTextStyle: {fontSize: 16},
      legend: {position: 'right', textStyle: {color: 'black', fontSize: 14}},
      vAxis: {title: "Relatieve invloed op verspreiding", titleTextStyle: {fontSize: 14}, minValue: -10, maxValue: 10},
      hAxis: {title: "Factor", titleTextStyle: {fontSize: 14}},
      seriesType: "bars",
      series: {5: {type: "line"}},
      animation:{
        duration: 1000,
        easing: 'out'
      }
    };
    var current = 0;
    // Create and draw the visualization.
    var chart = new google.visualization.ComboChart(document.getElementById('example2-visualization'));
    var button = document.getElementById('example2-b1');
    function drawChart() {
       // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button.innerText = 'Toon ' + (current ? '14e eeuw' : '21e eeuw');
          });
      options['title'] = 'Pestepidemie ' + (current ? '21e eeuw' : '14e eeuw') + '';

      chart.draw(data[current], options);
    }
    drawChart();

    button.onclick = function() {
      current = 1 - current;
      button.innerText = 'Toon ' + (current ? '14e eeuw' : '21e eeuw');
      drawChart();
    }
  }