%PDF- %PDF-
| Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/google/bar/ |
| Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/google/bar/bar-intervals.js |
/*=========================================================================================
File Name: bar-intervals.js
Description: google bar 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
==========================================================================================*/
// Bar Intervals
// ------------------------------
// 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(drawBarIntervals);
// Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
function drawBarIntervals() {
// 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_bar_interval = {
curveType: 'function',
series: [{'color': '#f4a911'}],
intervals: { style: 'bars' },
height: 400,
fontSize: 12,
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 bar = new google.visualization.LineChart(document.getElementById('bar-intervals'));
bar.draw(data, options_bar_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() {
drawBarIntervals();
}
});