Google Charts Tutorial

Google Charts Home

Google Charts Area

Basic Area ChartNegative Area ChartStacked Area ChartPercentage Area ChartMissing Points Area ChartInverted Area Chart

Google Charts Bar

Basic Bar ChartCustomized Bar ChartLabeled Bar ChartGrouped Bar ChartAnnotation Bar ChartStacked Bar ChartNegative Stacked Bar ChartPercentage Stacked Bar ChartMaterial Bar ChartDual X-axes Bar ChartRight Y-axis Bar ChartCustomized Axis and Tick Labels

Google Charts Bubble

Basic Bubble ChartLabeled Bubble ChartCustomized Labels Bubble Chart

Google Charts Calendar

Basic Calendar ChartCustomized Days Calendar ChartCustomized Weeks Calendar ChartCustomized Months Calendar ChartCustomized Years Calendar ChartCustomized Size Calendar ChartCustomized Cell Calendar ChartCustomized Focused CellCustomized noDataPattern

Google Charts Candlestick

Basic Candlestick chartCustomized Color Candlestick

Google Charts Column

Basic Column ChartCustomized Column ChartLabeled Column ChartGrouped Column ChartAnnotation Column ChartStacked Column ChartNegative Stacked Column chartPercentage Stacked Column ChartMaterial Column ChartTrendlines Column ChartDual Y-axes Column ChartTop X-axis Column ChartCustomized Axis and Tick Labels

Google Charts Combo

Combo Chart

Google Charts Differentiate

Diff Bar ChartDiff Column ChartDiff Pie ChartDiff Scatter Chart

Google Charts Gantt

Basic Gantt ChartNo Dependencies Gantt ChartGrouped Gantt ChartCritical Path Gantt ChartStyling Arrow Gantt ChartStyling Tracks Gantt Chart

Google Charts Gauge

Gauge Chart

Google Charts Histogram

Basic Histogram ChartCustomized Color Histogram ChartControlling Buckets Histogram ChartMultiple Series Histogram Chart

Google Charts Line

Basic Line ChartCustomized Line ChartCurved Line ChartVisible Points Line ChartLog Scales Line ChartCrosshairs Line ChartTrending Line ChartMaterial Line ChartTop X Line ChartCustomized Axis and Tick Labels

Google Charts Interval

Basic Line IntervalsTailored Line IntervalsBar IntervalsBox IntervalsStick IntervalsSticks Horizontal IntervalsPoint IntervalsArea IntervalsCombining IntervalsBackground Boxes IntervalsPoints and Whiskers IntervalsBox Plot Intervals

Google Charts Organization

Organization Chart

Google Charts Pie

Basic Pie ChartDonut Pie Chart3D Pie ChartRotating Pie ChartExploded Slice Pie ChartRemoving Slice Pie ChartSlice Visibility Threshold Pie Chart

Google Charts Sankey

Basic Sankey DiagramMultilevel Sankey DiagramCustomized Color Sankey DiagramCustomized Label Sankey DiagramCustomized Node Sankey Diagram

Google Charts Scatter

Basic Scatter ChartAnimating Scatter ChartMaterial Scatter ChartDual-Y Scatter ChartTop-X Scatter Chart

Google Charts Stepped

Basic Stepped Area ChartStacked Stepped Area Charts100% Stacked Stepped Area Charts

Google Charts Table

Table Chart

Google Charts Timeline

Basic Timeline ChartLabeled Timeline ChartAdvance Timeline ChartSingle Row Timeline ChartCustomized Color Timeline ChartCustomized Font Timeline ChartOverlapped Gridlines Timeline ChartCustomized Tooltip Timeline Chart

Google Charts Treemaps

Basic TreemapsHighlights TreemapsTooltips Treemaps

Google Charts Trendlines

Linear Trendlines ChartExponential Trendlines ChartCustomized Color Trendlines ChartPolynomial Trendlines ChartCustomized Opacity/WidthVisible Point Trendlines ChartChanging Label Trendlines Chart

Google Charts Word Trees

Basic Word Tree ChartCustomized Font Word Tree ChartStyling Word Tree Chart

Google Charts - Diff Scatter Chart

How to Draw a Diff Scatter Chart?

In this example, we will draw a diff scatter chart. Please hover the dots in the above chart to view particular details.

Example

HTML Online 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>

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author