/* ------------------------------------------------------------------------------ * * # Google Visualization - area intervals * * Google Visualization area chart with intervals demonstration * * Version: 1.0 * Latest update: August 1, 2015 * * ---------------------------------------------------------------------------- */ // Area intervals // ------------------------------ // Initialize chart google.load("visualization", "1", {packages: ["corechart"]}); google.setOnLoadCallback(drawAreaIntervals); // Chart settings function drawAreaIntervals() { // Data var data = new google.visualization.DataTable(); data.addColumn('string', 'x'); data.addColumn('number', 'values'); data.addColumn({id: 'i0', type: 'number', role: 'interval'}); data.addColumn({id: 'i1', type: 'number', role: 'interval'}); data.addColumn({id: 'i2', type: 'number', role: 'interval'}); data.addColumn({id: 'i2', type: 'number', role: 'interval'}); data.addColumn({id: 'i2', type: 'number', role: 'interval'}); data.addColumn({id: 'i2', type: 'number', role: 'interval'}); data.addRows([ ['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]]); // The intervals data as areas var options_area_intervals = { fontName: 'Roboto', height: 400, curveType: 'function', fontSize: 12, chartArea: { left: '5%', width: '90%', height: 350 }, lineWidth: 2, tooltip: { textStyle: { fontName: 'Roboto', fontSize: 13 } }, series: [{'color': '#43A047'}], intervals: {'style': 'area'}, // Use area intervals. pointSize: 5, vAxis: { title: 'Number values', titleTextStyle: { fontSize: 13, italic: false }, gridlines: { color: '#e5e5e5', count: 10 }, minValue: 0 }, legend: 'none' }; // Draw chart var area_intervals = new google.visualization.LineChart($('#google-area-intervals')[0]); area_intervals.draw(data, options_area_intervals); } // Resize chart // ------------------------------ $(function () { // Resize chart on sidebar width change and window resize $(window).on('resize', resize); $(".sidebar-control").on('click', resize); // Resize function function resize() { drawAreaIntervals(); } });