| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- /*=========================================================================================
- File Name: bar-intervals.js
- Description: google bar interval chart
- ----------------------------------------------------------------------------------------
- Item Name: Robust - Responsive Admin Theme
- Version: 1.2
- 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();
- }
- });
|