%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/google/line/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/google/line/line-interval.js |
/*========================================================================================= File Name: line-interval.js Description: google line interval chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Line Interval chart // ------------------------------ // Load the Visualization API and the corechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawLineInterval); // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it. function drawLineInterval() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('number', '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([ [1, 100, 90, 110, 85, 96, 104, 120], [2, 120, 95, 130, 90, 113, 124, 140], [3, 130, 105, 140, 100, 117, 133, 139], [4, 90, 85, 95, 85, 88, 92, 95], [5, 70, 74, 63, 67, 69, 70, 72], [6, 30, 39, 22, 21, 28, 34, 40], [7, 80, 77, 83, 70, 77, 85, 90], [8, 100, 90, 110, 85, 95, 102, 110] ]); // Set chart options var options_line_interval = { height: 400, fontSize: 12, curveType: 'function', lineWidth: 4, intervals: { 'style':'line' }, series: [{'color': '#1DE9B6'}], chartArea: { left: '5%', width: '90%', height: 350 }, vAxis: { gridlines:{ color: '#e9e9e9', count: 5 }, minValue: 0 }, hAxis: { gridlines:{ color: '#e9e9e9', count: 5 }, minValue: 0.5, maxValue: 8.5 }, legend: { position: 'top', alignment: 'center', textStyle: { fontSize: 12 } } }; // Instantiate and draw our chart, passing in some options. var line = new google.visualization.LineChart(document.getElementById('line-interval')); line.draw(data, options_line_interval); } // Resize chart // ------------------------------ $(function () { // Resize chart on menu width change and window resize $(window).on('resize', resize); $(".menu-toggle").on('click', resize); // Resize function function resize() { drawLineInterval(); } });