first commit
This commit is contained in:
465
assets/pages/jquery.google-charts.init.js
Normal file
465
assets/pages/jquery.google-charts.init.js
Normal file
@@ -0,0 +1,465 @@
|
||||
/**
|
||||
* Theme: Zircos Admin Template
|
||||
* Author: Coderthemes
|
||||
* Module/App: Flot-Chart
|
||||
*/
|
||||
|
||||
! function($) {
|
||||
"use strict";
|
||||
|
||||
var GoogleChart = function() {
|
||||
this.$body = $("body")
|
||||
};
|
||||
|
||||
//creates line graph
|
||||
GoogleChart.prototype.createLineChart = function(selector, data, axislabel, colors) {
|
||||
var options = {
|
||||
fontName: 'Hind Madurai',
|
||||
height: 340,
|
||||
curveType: 'function',
|
||||
fontSize: 14,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '90%',
|
||||
height: 300
|
||||
},
|
||||
pointSize: 4,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Hind Madurai',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: axislabel,
|
||||
titleTextStyle: {
|
||||
fontSize: 14,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
lineWidth: 3,
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var line_chart = new google.visualization.LineChart(selector);
|
||||
line_chart.draw(google_chart_data, options);
|
||||
return line_chart;
|
||||
},
|
||||
//creates area graph
|
||||
GoogleChart.prototype.createAreaChart = function(selector, data, axislabel, colors) {
|
||||
var options = {
|
||||
fontName: 'Hind Madurai',
|
||||
height: 340,
|
||||
curveType: 'function',
|
||||
fontSize: 14,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '90%',
|
||||
height: 300
|
||||
},
|
||||
pointSize: 4,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Hind Madurai',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: axislabel,
|
||||
titleTextStyle: {
|
||||
fontSize: 14,
|
||||
italic: false
|
||||
},
|
||||
gridarea: {
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
gridlines: {
|
||||
color: '#f5f5f5'
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'end',
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
lineWidth: 2,
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var area_chart = new google.visualization.AreaChart(selector);
|
||||
area_chart.draw(google_chart_data, options);
|
||||
return area_chart;
|
||||
},
|
||||
//creates Column graph
|
||||
GoogleChart.prototype.createColumnChart = function(selector, data, axislabel, colors) {
|
||||
var options = {
|
||||
fontName: 'Hind Madurai',
|
||||
height: 400,
|
||||
fontSize: 13,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '90%',
|
||||
height: 350
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Hind Madurai',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: axislabel,
|
||||
titleTextStyle: {
|
||||
fontSize: 14,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var column_chart = new google.visualization.ColumnChart(selector);
|
||||
column_chart.draw(google_chart_data, options);
|
||||
return column_chart;
|
||||
},
|
||||
//creates bar graph
|
||||
GoogleChart.prototype.createBarChart = function(selector, data, colors) {
|
||||
var options = {
|
||||
fontName: 'Hind Madurai',
|
||||
height: 400,
|
||||
fontSize: 14,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '90%',
|
||||
height: 350
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Hind Madurai',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
gridlines:{
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var bar_chart = new google.visualization.BarChart(selector);
|
||||
bar_chart.draw(google_chart_data, options);
|
||||
return bar_chart;
|
||||
},
|
||||
//creates Column Stacked
|
||||
GoogleChart.prototype.createColumnStackChart = function(selector, data, axislabel, colors) {
|
||||
var options = {
|
||||
fontName: 'Hind Madurai',
|
||||
height: 400,
|
||||
fontSize: 13,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '90%',
|
||||
height: 350
|
||||
},
|
||||
isStacked: true,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Hind Madurai',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: axislabel,
|
||||
titleTextStyle: {
|
||||
fontSize: 14,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var stackedcolumn_chart = new google.visualization.ColumnChart(selector);
|
||||
stackedcolumn_chart.draw(google_chart_data, options);
|
||||
return stackedcolumn_chart;
|
||||
},
|
||||
//creates Bar Stacked
|
||||
GoogleChart.prototype.createBarStackChart = function(selector, data, colors) {
|
||||
var options = {
|
||||
fontName: 'Hind Madurai',
|
||||
height: 400,
|
||||
fontSize: 13,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '90%',
|
||||
height: 350
|
||||
},
|
||||
isStacked: true,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Hind Madurai',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
hAxis: {
|
||||
gridlines: {
|
||||
color: '#f5f5f5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var stackedbar_chart = new google.visualization.BarChart(selector);
|
||||
stackedbar_chart.draw(google_chart_data, options);
|
||||
return stackedbar_chart;
|
||||
},
|
||||
//creates pie chart
|
||||
GoogleChart.prototype.createPieChart = function(selector, data, colors, is3D, issliced) {
|
||||
var options = {
|
||||
fontName: 'Hind Madurai',
|
||||
fontSize: 13,
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
if(is3D) {
|
||||
options['is3D'] = true;
|
||||
}
|
||||
|
||||
if(issliced) {
|
||||
options['is3D'] = true;
|
||||
options['pieSliceText'] = 'label';
|
||||
options['slices'] = {
|
||||
2: {offset: 0.15},
|
||||
5: {offset: 0.1}
|
||||
};
|
||||
}
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var pie_chart = new google.visualization.PieChart(selector);
|
||||
pie_chart.draw(google_chart_data, options);
|
||||
return pie_chart;
|
||||
},
|
||||
|
||||
//creates donut chart
|
||||
GoogleChart.prototype.createDonutChart = function(selector, data, colors) {
|
||||
var options = {
|
||||
fontName: 'Hind Madurai',
|
||||
fontSize: 13,
|
||||
height: 300,
|
||||
pieHole: 0.55,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
colors: colors
|
||||
};
|
||||
|
||||
var google_chart_data = google.visualization.arrayToDataTable(data);
|
||||
var pie_chart = new google.visualization.PieChart(selector);
|
||||
pie_chart.draw(google_chart_data, options);
|
||||
return pie_chart;
|
||||
},
|
||||
//init
|
||||
GoogleChart.prototype.init = function () {
|
||||
var $this = this;
|
||||
|
||||
//creating line chart
|
||||
var common_data = [
|
||||
['Year', 'Sales', 'Expenses'],
|
||||
['2010', 850, 120],
|
||||
['2011', 745, 200],
|
||||
['2012', 852, 180],
|
||||
['2013', 1000, 400],
|
||||
['2014', 1170, 460],
|
||||
['2015', 660, 1120],
|
||||
['2016', 1030, 540]
|
||||
];
|
||||
$this.createLineChart($('#line-chart')[0], common_data, 'Sales and Expenses', ['#4bd396', '#f5707a']);
|
||||
|
||||
|
||||
//creating area chart using same data
|
||||
$this.createAreaChart($('#area-chart')[0], common_data, 'Sales and Expenses', ['#4bd396', '#f5707a']);
|
||||
|
||||
|
||||
//creating column chart
|
||||
var column_data = [
|
||||
['Year', 'Desktop', 'Tablets', 'Mobiles'],
|
||||
['2010', 850, 120, 200],
|
||||
['2011', 745, 200, 562],
|
||||
['2012', 852, 180, 521],
|
||||
['2013', 1000, 400, 652],
|
||||
['2014', 1170, 460, 200],
|
||||
['2015', 660, 1120, 562],
|
||||
['2016', 1030, 540, 852]
|
||||
];
|
||||
$this.createColumnChart($('#column-chart')[0], column_data, 'Sales and Expenses', ['#4bd396', '#f5707a', '#3ac9d6']);
|
||||
|
||||
|
||||
//creating bar chart
|
||||
var bar_data = [
|
||||
['Year', 'Sales', 'Expenses'],
|
||||
['2004', 1000, 400],
|
||||
['2005', 1170, 460],
|
||||
['2006', 660, 1120],
|
||||
['2007', 1030, 540]
|
||||
];
|
||||
$this.createBarChart($('#bar-chart')[0], bar_data, ['#4bd396', '#f5707a']);
|
||||
|
||||
|
||||
//creating columns tacked chart
|
||||
var column_stacked_data = [
|
||||
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ],
|
||||
['2000', 20, 30, 35, 40, 45, 30, ''],
|
||||
['2005', 14, 20, 25, 30, 48, 30, ''],
|
||||
['2010', 10, 24, 20, 32, 18, 5, ''],
|
||||
['2015', 15, 25, 30, 35, 20, 15, ''],
|
||||
['2020', 16, 22, 23, 30, 16, 9, ''],
|
||||
['2025', 12, 26, 20, 40, 20, 30, ''],
|
||||
['2030', 28, 19, 29, 30, 12, 13, '']
|
||||
];
|
||||
$this.createColumnStackChart($('#column-stacked-chart')[0], column_stacked_data, 'Sales and Expenses', ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5', '#3ac9d6']);
|
||||
|
||||
|
||||
//creating bar tacked chart
|
||||
var bar_stacked_data = [
|
||||
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ],
|
||||
['2000', 20, 30, 35, 40, 45, 30, ''],
|
||||
['2005', 14, 20, 25, 30, 48, 30, ''],
|
||||
['2010', 10, 24, 20, 32, 18, 5, ''],
|
||||
['2015', 15, 25, 30, 35, 20, 15, ''],
|
||||
['2020', 16, 22, 23, 30, 16, 9, ''],
|
||||
['2025', 12, 26, 20, 40, 20, 30, ''],
|
||||
['2030', 28, 19, 29, 30, 12, 13, '']
|
||||
];
|
||||
$this.createBarStackChart($('#bar-stacked-chart')[0], bar_stacked_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5', '#3ac9d6']);
|
||||
|
||||
|
||||
//creating pie chart
|
||||
var pie_data = [
|
||||
['Task', 'Hours per Day'],
|
||||
['Work', 11],
|
||||
['Eat', 2],
|
||||
['Commute', 2],
|
||||
['Watch TV', 2],
|
||||
['Sleep', 7]
|
||||
];
|
||||
$this.createPieChart($('#pie-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], false, false);
|
||||
|
||||
|
||||
//creating donut chart
|
||||
$this.createDonutChart($('#donut-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5']);
|
||||
|
||||
//creating 3d pie chart
|
||||
$this.createPieChart($('#pie-3d-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], true, false);
|
||||
|
||||
//creating Sliced pie chart
|
||||
var sliced_Data = [
|
||||
['Language', 'Speakers (in millions)'],
|
||||
['Assamese', 13],
|
||||
['Bengali', 83],
|
||||
['Gujarati', 46],
|
||||
['Hindi', 90],
|
||||
['Kannada', 38],
|
||||
['Malayalam', 33]
|
||||
];
|
||||
$this.createPieChart($('#3d-exploded-chart')[0], sliced_Data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], true, true);
|
||||
|
||||
//on window resize - redrawing all charts
|
||||
$(window).on('resize', function() {
|
||||
$this.createLineChart($('#line-chart')[0], common_data, 'Sales and Expenses', ['#4bd396', '#f5707a']);
|
||||
$this.createAreaChart($('#area-chart')[0], common_data, 'Sales and Expenses', ['#4bd396', '#f5707a']);
|
||||
$this.createColumnChart($('#column-chart')[0], column_data, 'Sales and Expenses', ['#4bd396', '#f5707a', '#3ac9d6']);
|
||||
$this.createBarChart($('#bar-chart')[0], bar_data, ['#4bd396', '#f5707a']);
|
||||
$this.createColumnStackChart($('#column-stacked-chart')[0], column_stacked_data, 'Sales and Expenses', ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5', '#3ac9d6']);
|
||||
$this.createBarStackChart($('#bar-stacked-chart')[0], bar_stacked_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5', '#3ac9d6']);
|
||||
$this.createPieChart($('#pie-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], false, false);
|
||||
$this.createDonutChart($('#donut-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5']);
|
||||
$this.createPieChart($('#pie-3d-chart')[0], pie_data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], true, false);
|
||||
$this.createPieChart($('#3d-exploded-chart')[0], sliced_Data, ['#188ae2', '#4bd396', '#f9c851', '#f5707a', '#6b5fb5'], true, true);
|
||||
});
|
||||
},
|
||||
//init GoogleChart
|
||||
$.GoogleChart = new GoogleChart, $.GoogleChart.Constructor = GoogleChart
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing GoogleChart
|
||||
function($) {
|
||||
"use strict";
|
||||
//loading visualization lib - don't forget to include this
|
||||
google.load("visualization", "1", {packages:["corechart"]});
|
||||
//after finished load, calling init method
|
||||
google.setOnLoadCallback(function() {$.GoogleChart.init();});
|
||||
}(window.jQuery);
|
||||
Reference in New Issue
Block a user