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 - Box Plot Intervals Chart

How to Draw a Box Plot Intervals?

Please wait google chart is loading...

In this example, we will draw a box plot intervals. Please hover the points in the above chart to view particular details.


HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src=""></script> </head> <body> <div id="point"> </div> <script> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawBoxPlot); function drawBoxPlot() { var array = [ ['a', 100, 90, 110, 85, 96, 104, 120], ['b', 120, 95, 130, 90, 113, 124, 140], ['c', 130, 105, 140, 100, 117, 133, 139], ['d', 90, 85, 95, 85, 88, 92, 95], ['e', 70, 74, 63, 67, 69, 70, 72], ['f', 30, 39, 22, 21, 28, 34, 40], ['g', 80, 77, 83, 70, 77, 85, 90], ['h', 100, 90, 110, 85, 95, 102, 110] ]; var data = new google.visualization.DataTable(); data.addColumn('string', 'x'); data.addColumn('number', 'series0'); data.addColumn('number', 'series1'); data.addColumn('number', 'series2'); data.addColumn('number', 'series3'); data.addColumn('number', 'series4'); data.addColumn('number', 'series5'); data.addColumn('number', 'series6'); data.addColumn({id:'max', type:'number', role:'interval'}); data.addColumn({id:'min', type:'number', role:'interval'}); data.addColumn({id:'firstQuartile', type:'number', role:'interval'}); data.addColumn({id:'median', type:'number', role:'interval'}); data.addColumn({id:'thirdQuartile', type:'number', role:'interval'}); data.addRows(getBoxPlotValues(array)); /* * Takes an array of input data and returns an * array of the input data with the box plot * interval data appended to each row. */ function getBoxPlotValues(array) { for (var i = 0; i < array.length; i++) { var arr = array[i].slice(1).sort(function (a, b) { return a - b; }); var max = arr[arr.length - 1]; var min = arr[0]; var median = getMedian(arr); // First Quartile is the median from lowest to overall median. var firstQuartile = getMedian(arr.slice(0, 4)); // Third Quartile is the median from the overall median to the highest. var thirdQuartile = getMedian(arr.slice(3)); array[i][8] = max; array[i][9] = min array[i][10] = firstQuartile; array[i][11] = median; array[i][12] = thirdQuartile; } return array; } /* * Takes an array and returns * the median value. */ function getMedian(array) { var length = array.length; /* If the array is an even length the * median is the average of the two * middle-most values. Otherwise the * median is the middle-most value. */ if (length % 2 === 0) { var midUpper = length / 2; var midLower = midUpper - 1; return (array[midUpper] + array[midLower]) / 2; } else { return array[Math.floor(length / 2)]; } } var options = { title:'Box Plot', height: 400, legend: {position: 'none'}, hAxis: { gridlines: {color: '#fff'} }, lineWidth: 0, series: [{'color': '#D3362D'}], intervals: { barWidth: 1, boxWidth: 1, lineWidth: 2, style: 'boxes' }, interval: { max: { style: 'bars', fillOpacity: 1, color: '#777' }, min: { style: 'bars', fillOpacity: 1, color: '#777' } } }; var chart = new google.visualization.LineChart(document.getElementById('point')); chart.draw(data, options); } </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