HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> <style> #myDrawChart{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; align-items:center; margin:20px 0; } #myDrawChart > span{ width:450px; margin-top:50px; height:300px; } </style> </head> <body> <div id="myDrawChart"> <span id='scatterchart_before'></span> <span id='scatterchart_after'></span> <span id='scatterchart_diff'></span> </div> <script> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var oldData = google.visualization.arrayToDataTable([ ['', 'Medicine 1', 'Medicine 2'], [23, null, 12], [9, null, 39], [15, null, 28], [37, null, 30], [21, null, 14], [12, null, 18], [29, null, 34], [ 8, null, 12], [38, null, 28], [35, null, 12], [26, null, 10], [10, null, 29], [11, null, 10], [27, null, 38], [39, null, 17], [34, null, 20], [38, null, 5], [33, null, 27], [23, null, 39], [12, null, 10], [ 8, 15, null], [39, 15, null], [27, 31, null], [30, 24, null], [31, 39, null], [35, 6, null], [ 5, 5, null], [19, 39, null], [22, 8, null], [19, 23, null], [27, 20, null], [11, 6, null], [34, 33, null], [38, 8, null], [39, 29, null], [13, 23, null], [13, 36, null], [39, 6, null], [14, 37, null], [13, 39, null] ]); var newData = google.visualization.arrayToDataTable([ ['', 'Medicine 1', 'Medicine 2'], [22, null, 12], [7, null, 40], [14, null, 31], [37, null, 30], [18, null, 17], [9, null, 20], [26, null, 36], [5, null, 13], [36, null, 30], [35, null, 15], [24, null, 12], [7, null, 31], [10, null, 12], [24, null, 40], [37, null, 18], [32, null, 21], [35, null, 7], [31, null, 30], [21, null, 42], [12, null, 10], [10, 13, null], [40, 12, null], [28, 29, null], [32, 22, null], [31, 37, null], [38, 5, null], [6, 4, null], [21, 36, null], [22, 8, null], [21, 22, null], [28, 17, null], [12, 5, null], [37, 30, null], [41, 7, null], [41, 27, null], [15, 20, null], [14, 36, null], [42, 3, null], [14, 37, null], [15, 36, null] ]); var options1 = { title:'Experiment 1', titleTextStyle: { fontSize: 17, color: '#206020' }, hAxis: { viewWindow: { min: 0, max: 50 } }, vAxis: { viewWindow: { min: 0, max: 50 } }, theme: 'maximized', }; var options2 = { title:'Experiment 2', titleTextStyle: { fontSize: 17, color: '#5c5c3d' }, hAxis: { viewWindow: { min: 0, max: 50 } }, vAxis: { viewWindow: { min: 0, max: 50 } }, theme: 'maximized', }; var options3 = { title:'Experiment 1 vs Experiment 2', titleTextStyle: { fontSize: 17, color: '#993300' }, hAxis: { viewWindow: { min: 0, max: 50 } }, vAxis: { viewWindow: { min: 0, max: 50 } }, theme: 'maximized', }; var chartBefore = new google.visualization.ScatterChart(document.getElementById('scatterchart_before')); var chartAfter = new google.visualization.ScatterChart(document.getElementById('scatterchart_after')); var chartDiff = new google.visualization.ScatterChart(document.getElementById('scatterchart_diff')); var diffData = chartDiff.computeDiff(oldData, newData); chartBefore.draw(oldData, options1); chartAfter.draw(newData, options2); chartDiff.draw(diffData, options3); } </script> </body> </html>
OUTPUT
×

Save as Private