Google Charts Controls and Dashboards

How to use Google Charts Controls and Dashboards with data from Keen IO

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="diaBottom">
  <!--Divs that will hold each control and chart-->
 
</div>

JavaScript

google.charts.load('current', {packages: ['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Reporting Period');
data.addColumn('number', 'RSC - Mean scores')
;data.addColumn('number', 'RSC - Room for improvement');
data.addColumn('number', 'M&B Germany - Mean scores');
data.addColumn('number', 'M&B Germany - Room for improvement');
data.addRow(['2016', {v: 76.50, f:'76.5'}, {v: 23.50, f:'23.5' }, {v: 76.74, f:'76.7'}, {v: 23.26, f:'23.3' } ]);
data.addRow(['2017', {v: 78.54, f:'78.5'}, {v: 21.46, f:'21.5' }, {v: 77.41, f:'77.4'}, {v: 22.59, f:'22.6' } ]);
data.addRow(['2018', {v: 79.88, f:'79.9'}, {v: 20.12, f:'20.1' }, {v: 73.43, f:'73.4'}, {v: 26.57, f:'26.6' } ]);
var options = {  legend: { position: 'left', alignment: 'start', textStyle: { fontSize: 10 } },  
isStacked: true,
vAxis: { textStyle : { fontSize: 9, bold: true, fontName: 'Arial' }, titleTextStyle: { fontSize: 12, fontName: 'Arial' }, viewWindow: { min: 0, max: 100 }, gridlines: {count: 6} },  series: {	2: { targetAxisIndex: 1 },	3: { targetAxisIndex: 1 }	},  vAxes: { 0: { title: 'Mean scores' }, 1: { textStyle: {color: '#FFF'} } },  colors: ['#005580', '#808000'],  chartArea: { height:'88%' },  hAxis: { viewWindow : {max : 14}, viewWindowMode : 'explicit', title: 'Reporting Period', titleTextStyle: { fontSize: 12, fontName: 'Arial' }, textStyle : { fontSize: 9, bold: true, fontName: 'Arial' }, gridlines: {color: '#1E4D6B'}, showTextEvery:1 },  backgroundColor: {fill: 'transparent'},  
tooltip: {isHtml: true, textStyle: {fontSize:'8', bold:true, fontName: 'Arial'} }, 
bar: {groupWidth: '60%'} };
var chart = new google.charts.Bar(document.getElementById('diaBottom'));
chart.draw(data, google.charts.Bar.convertOptions(options));};

//var chart = new google.charts.Bar(document.getElementById('chart_div'));
// chart.draw(data, google.charts.Bar.convertOptions(options));