first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,120 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - bars
|
||||
*
|
||||
* Google Visualization bar chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleBarBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Bar chart
|
||||
var _googleBarBasic = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawBar();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawBar);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeBarBasic;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeBarBasic);
|
||||
resizeBarBasic = setTimeout(function () {
|
||||
drawBar();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawBar() {
|
||||
|
||||
// Define charts element
|
||||
var bar_chart_element = document.getElementById('google-bar');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Year', 'Sales', 'Expenses'],
|
||||
['2004', 1000, 400],
|
||||
['2005', 1170, 460],
|
||||
['2006', 660, 1120],
|
||||
['2007', 1030, 540]
|
||||
]);
|
||||
|
||||
|
||||
// Options
|
||||
var options_bar = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var bar = new google.visualization.BarChart(bar_chart_element);
|
||||
bar.draw(data, options_bar);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleBarBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleBarBasic.init();
|
||||
@@ -0,0 +1,124 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - stacked bars
|
||||
*
|
||||
* Google Visualization stacked bar chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleBarStacked = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Stacked bar chart
|
||||
var _googleBarStacked = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawBarStacked();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawBarStacked);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeBarStacked;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeBarStacked);
|
||||
resizeBarStacked = setTimeout(function () {
|
||||
drawBarStacked();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawBarStacked() {
|
||||
|
||||
// Define charts element
|
||||
var bar_stacked_element = document.getElementById('google-bar-stacked');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['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, '']
|
||||
]);
|
||||
|
||||
|
||||
// Options
|
||||
var options_bar_stacked = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
isStacked: true,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
hAxis: {
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var bar_stacked = new google.visualization.BarChart(bar_stacked_element);
|
||||
bar_stacked.draw(data, options_bar_stacked);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleBarStacked();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleBarStacked.init();
|
||||
@@ -0,0 +1,124 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - columns
|
||||
*
|
||||
* Google Visualization column chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleColumnBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Column chart
|
||||
var _googleColumnBasic = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawColumn();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawColumn);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeColumn;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeColumn);
|
||||
resizeColumn = setTimeout(function () {
|
||||
drawColumn();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawColumn() {
|
||||
|
||||
// Define charts element
|
||||
var line_chart_element = document.getElementById('google-column');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Year', 'Sales', 'Expenses'],
|
||||
['2004', 1000, 400],
|
||||
['2005', 1170, 460],
|
||||
['2006', 660, 1120],
|
||||
['2007', 1030, 540]
|
||||
]);
|
||||
|
||||
|
||||
// Options
|
||||
var options_column = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Sales and Expenses',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var column = new google.visualization.ColumnChart(line_chart_element);
|
||||
column.draw(data, options_column);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleColumnBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleColumnBasic.init();
|
||||
@@ -0,0 +1,128 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - stacked columns
|
||||
*
|
||||
* Google Visualization stacked column chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleColumnStacked = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Stacked column chart
|
||||
var _googleColumnStacked = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawColumnStacked();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawColumnStacked);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeColumnStacked;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeColumnStacked);
|
||||
resizeColumnStacked = setTimeout(function () {
|
||||
drawColumnStacked();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawColumnStacked() {
|
||||
|
||||
// Define charts element
|
||||
var column_stacked_element = document.getElementById('google-column-stacked');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['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, '']
|
||||
]);
|
||||
|
||||
|
||||
// Options
|
||||
var options_column_stacked = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
isStacked: true,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Sales and Expenses',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var column_stacked = new google.visualization.ColumnChart(column_stacked_element);
|
||||
column_stacked.draw(data, options_column_stacked);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleColumnStacked();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleColumnStacked.init();
|
||||
@@ -0,0 +1,127 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - chart combinations
|
||||
*
|
||||
* Google Visualization combo chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleComboChart = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Combo chart
|
||||
var _googleComboChart = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawCombo();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawCombo);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeCombo;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeCombo);
|
||||
resizeCombo = setTimeout(function () {
|
||||
drawCombo();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawCombo() {
|
||||
|
||||
// Define charts element
|
||||
var combo_chart_element = document.getElementById('google-combo');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
|
||||
['2004/05', 165, 938, 522, 998, 450, 614.6],
|
||||
['2005/06', 135, 1120, 599, 1268, 288, 682],
|
||||
['2006/07', 157, 1167, 587, 807, 397, 623],
|
||||
['2007/08', 139, 1110, 615, 968, 215, 609.4],
|
||||
['2008/09', 136, 691, 629, 1026, 366, 569.6]
|
||||
]);
|
||||
|
||||
|
||||
// Options
|
||||
var options_combo = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
seriesType: "bars",
|
||||
series: {
|
||||
5: {
|
||||
type: "line",
|
||||
pointSize: 5
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var combo = new google.visualization.ComboChart(combo_chart_element);
|
||||
combo.draw(data, options_combo);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleComboChart();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleComboChart.init();
|
||||
@@ -0,0 +1,155 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - histogram
|
||||
*
|
||||
* Google Visualization histogram demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleHistogram = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Histogram
|
||||
var _googleHistogram = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawHistogram();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawHistogram);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeHistogram;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeHistogram);
|
||||
resizeHistogram = setTimeout(function () {
|
||||
drawHistogram();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawHistogram() {
|
||||
|
||||
// Define charts element
|
||||
var histogram_chart_element = document.getElementById('google-histogram');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Dinosaur', 'Length'],
|
||||
['Acrocanthosaurus (top-spined lizard)', 12.2],
|
||||
['Albertosaurus (Alberta lizard)', 9.1],
|
||||
['Allosaurus (other lizard)', 12.2],
|
||||
['Apatosaurus (deceptive lizard)', 22.9],
|
||||
['Archaeopteryx (ancient wing)', 0.9],
|
||||
['Argentinosaurus (Argentina lizard)', 36.6],
|
||||
['Baryonyx (heavy claws)', 9.1],
|
||||
['Brachiosaurus (arm lizard)', 30.5],
|
||||
['Ceratosaurus (horned lizard)', 6.1],
|
||||
['Coelophysis (hollow form)', 2.7],
|
||||
['Compsognathus (elegant jaw)', 0.9],
|
||||
['Deinonychus (terrible claw)', 2.7],
|
||||
['Diplodocus (double beam)', 27.1],
|
||||
['Dromicelomimus (emu mimic)', 3.4],
|
||||
['Gallimimus (fowl mimic)', 5.5],
|
||||
['Mamenchisaurus (Mamenchi lizard)', 21.0],
|
||||
['Megalosaurus (big lizard)', 7.9],
|
||||
['Microvenator (small hunter)', 1.2],
|
||||
['Ornithomimus (bird mimic)', 4.6],
|
||||
['Oviraptor (egg robber)', 1.5],
|
||||
['Plateosaurus (flat lizard)', 7.9],
|
||||
['Sauronithoides (narrow-clawed lizard)', 2.0],
|
||||
['Seismosaurus (tremor lizard)', 45.7],
|
||||
['Spinosaurus (spiny lizard)', 12.2],
|
||||
['Supersaurus (super lizard)', 30.5],
|
||||
['Tyrannosaurus (tyrant lizard)', 15.2],
|
||||
['Ultrasaurus (ultra lizard)', 30.5],
|
||||
['Velociraptor (swift robber)', 1.8]]
|
||||
);
|
||||
|
||||
|
||||
// Options
|
||||
var options_histogram = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
isStacked: true,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Dinosaur length',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
hAxis: {
|
||||
gridlines:{
|
||||
color: '#e5e5e5'
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var histogram = new google.visualization.Histogram(histogram_chart_element);
|
||||
histogram.draw(data, options_histogram);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleHistogram();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleHistogram.init();
|
||||
@@ -0,0 +1,136 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - bubbles
|
||||
*
|
||||
* Google Visualization bubble chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleBubbleChart = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Bubble chart
|
||||
var _googleBubbleChart = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawBubbleChart();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawBubbleChart);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeBubbleChart;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeBubbleChart);
|
||||
resizeBubbleChart = setTimeout(function () {
|
||||
drawBubbleChart();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawBubbleChart() {
|
||||
|
||||
// Define charts element
|
||||
var bubble_chart_element = document.getElementById('google-bubble');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['ID', 'Life Expectancy', 'Fertility Rate', 'Region'],
|
||||
['CAN', 82.66, 1.67, 'North America'],
|
||||
['DEU', 79.84, 1.36, 'Europe'],
|
||||
['DNK', 70.6, 1.84, 'Europe'],
|
||||
['EGY', 72.73, 2.78, 'Middle East'],
|
||||
['GBR', 75.05, 2, 'Europe'],
|
||||
['IRN', 72.49, 0.7, 'Middle East'],
|
||||
['IRQ', 68.09, 4.77, 'Middle East'],
|
||||
['ISR', 81.55, 3.96, 'Middle East'],
|
||||
['RUS', 68.6, 1.54, 'Europe'],
|
||||
['USA', 78.09, 3.05, 'North America']
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 450,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 400
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Fertility Rate',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
bubble: {
|
||||
textStyle: {
|
||||
auraColor: 'none',
|
||||
color: '#fff'
|
||||
},
|
||||
stroke: '#fff'
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var bubble = new google.visualization.BubbleChart(bubble_chart_element);
|
||||
bubble.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleBubbleChart();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleBubbleChart.init();
|
||||
@@ -0,0 +1,120 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - bubbles with color scale
|
||||
*
|
||||
* Google Visualization bubble chart with color scale demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleBubbleGradientChart = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Bubble chart with gradient
|
||||
var _googleBubbleGradientChart = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawBubbleGradientChart();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawBubbleGradientChart);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeBubbleGradientChart;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeBubbleGradientChart);
|
||||
resizeBubbleGradientChart = setTimeout(function () {
|
||||
drawBubbleGradientChart();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawBubbleGradientChart() {
|
||||
|
||||
// Define charts element
|
||||
var bubble_gradient_element = document.getElementById('google-bubble-gradient');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['ID', 'X', 'Y', 'Temperature'],
|
||||
['', 80, 167, 120],
|
||||
['', 79, 136, 130],
|
||||
['', 78, 184, 50],
|
||||
['', 72, 278, 230],
|
||||
['', 81, 200, 210],
|
||||
['', 72, 170, 100],
|
||||
['', 68, 477, 80]
|
||||
]);
|
||||
|
||||
// Optinos
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 450,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 400
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
bubble: {
|
||||
textStyle: {
|
||||
fontSize: 11
|
||||
},
|
||||
stroke: '#fff'
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var gradient_bubble = new google.visualization.BubbleChart(bubble_gradient_element);
|
||||
gradient_bubble.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleBubbleGradientChart();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleBubbleGradientChart.init();
|
||||
@@ -0,0 +1,127 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - area
|
||||
*
|
||||
* Google Visualization area chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleAreaBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Area chart
|
||||
var _googleAreaBasic = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawAreaChart();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawAreaChart);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeAreaChart;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeAreaChart);
|
||||
resizeAreaChart = setTimeout(function () {
|
||||
drawAreaChart();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawAreaChart() {
|
||||
|
||||
// Define charts element
|
||||
var area_basic_element = document.getElementById('google-area');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Year', 'Sales', 'Expenses'],
|
||||
['2004', 1000, 400],
|
||||
['2005', 1170, 460],
|
||||
['2006', 660, 1120],
|
||||
['2007', 1030, 540]
|
||||
]);
|
||||
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
curveType: 'function',
|
||||
fontSize: 12,
|
||||
areaOpacity: 0.4,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
pointSize: 4,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Sales and Expenses',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridarea:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'end',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var area_chart = new google.visualization.AreaChart(area_basic_element);
|
||||
area_chart.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleAreaBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleAreaBasic.init();
|
||||
@@ -0,0 +1,135 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - area intervals
|
||||
*
|
||||
* Google Visualization area chart with intervals demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleAreaIntervals = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Area intervals
|
||||
var _googleAreaIntervals = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawAreaIntervals();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawAreaIntervals);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeAreaIntervals;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeAreaIntervals);
|
||||
resizeAreaIntervals = setTimeout(function () {
|
||||
drawAreaIntervals();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawAreaIntervals() {
|
||||
|
||||
// Define charts element
|
||||
var area_intervals_element = document.getElementById('google-area-intervals');
|
||||
|
||||
// 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: '94%',
|
||||
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(area_intervals_element);
|
||||
area_intervals.draw(data, options_area_intervals);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleAreaIntervals();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleAreaIntervals.init();
|
||||
@@ -0,0 +1,128 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - stacked area
|
||||
*
|
||||
* Google Visualization stacked area chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleAreaStacked = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Stacked area chart
|
||||
var _googleAreaStacked = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawAreaStackedChart();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawAreaStackedChart);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeAreaStacked;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeAreaStacked);
|
||||
resizeAreaStacked = setTimeout(function () {
|
||||
drawAreaStackedChart();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawAreaStackedChart() {
|
||||
|
||||
// Define charts element
|
||||
var area_stacked_element = document.getElementById('google-area-stacked');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Year', 'Cars', 'Trucks', 'Drones', 'Segways'],
|
||||
['2013', 870, 460, 310, 220],
|
||||
['2014', 460, 720, 220, 460],
|
||||
['2015', 930, 640, 340, 330],
|
||||
['2016', 1000, 400, 180, 500]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options_area_stacked = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
curveType: 'function',
|
||||
fontSize: 12,
|
||||
areaOpacity: 0.4,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
isStacked: true,
|
||||
pointSize: 4,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
lineWidth: 1.5,
|
||||
vAxis: {
|
||||
title: 'Number values',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'end',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var area_stacked_chart = new google.visualization.AreaChart(area_stacked_element);
|
||||
area_stacked_chart.draw(data, options_area_stacked);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleAreaStacked();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleAreaStacked.init();
|
||||
@@ -0,0 +1,127 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - stepped area
|
||||
*
|
||||
* Google Visualization stepped area chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleAreaStepped = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Stepped area chart
|
||||
var _googleAreaStepped = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawSteppedAreaChart();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawSteppedAreaChart);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeSteppedAreaChart;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeSteppedAreaChart);
|
||||
resizeSteppedAreaChart = setTimeout(function () {
|
||||
drawSteppedAreaChart();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawSteppedAreaChart() {
|
||||
|
||||
// Define charts element
|
||||
var area_stepped_element = document.getElementById('google-area-stepped');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
|
||||
['Alfred Hitchcock (1935)', 8.4, 7.9],
|
||||
['Ralph Thomas (1959)', 6.9, 6.5],
|
||||
['Don Sharp (1978)', 6.5, 6.4],
|
||||
['James Hawes (2008)', 4.4, 6.2]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
isStacked: true,
|
||||
fontSize: 12,
|
||||
areaOpacity: 0.4,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
lineWidth: 1,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
pointSize: 5,
|
||||
vAxis: {
|
||||
title: 'Accumulated Rating',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var stepped_area_chart = new google.visualization.SteppedAreaChart(document.getElementById('google-area-stepped'));
|
||||
stepped_area_chart.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleAreaStepped();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleAreaStepped.init();
|
||||
@@ -0,0 +1,136 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - line intervals
|
||||
*
|
||||
* Google Visualization line chart with intervals demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleLineIntervals = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Line intervals chart
|
||||
var _googleLineIntervals = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawLineIntervals();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawLineIntervals);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeLineIntervals;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeLineIntervals);
|
||||
resizeLineIntervals = setTimeout(function () {
|
||||
drawLineIntervals();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawLineIntervals() {
|
||||
|
||||
// Define charts element
|
||||
var line_intervals_element = document.getElementById('google-line-intervals');
|
||||
|
||||
// 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 narrow lines (useful for showing raw source data)
|
||||
var options_line_intervals = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
curveType: 'function',
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
lineWidth: 3,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
series: [{'color': '#EF5350'}],
|
||||
intervals: {'style': 'line'}, // Use line intervals.
|
||||
pointSize: 5,
|
||||
vAxis: {
|
||||
title: 'Number values',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: 'none'
|
||||
};
|
||||
|
||||
|
||||
// Draw chart
|
||||
var line_intervals = new google.visualization.LineChart(line_intervals_element);
|
||||
line_intervals.draw(data, options_line_intervals);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleLineIntervals();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleLineIntervals.init();
|
||||
@@ -0,0 +1,126 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - lines
|
||||
*
|
||||
* Google Visualization line chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleLineBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Line chart
|
||||
var _googleLineBasic = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawLineChart();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawLineChart);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeLineBasic;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeLineBasic);
|
||||
resizeLineBasic = setTimeout(function () {
|
||||
drawLineChart();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawLineChart() {
|
||||
|
||||
// Define charts element
|
||||
var line_chart_element = document.getElementById('google-line');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Year', 'Sales', 'Expenses'],
|
||||
['2004', 1000, 400],
|
||||
['2005', 1170, 460],
|
||||
['2006', 660, 1120],
|
||||
['2007', 1030, 540]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
curveType: 'function',
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
pointSize: 4,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Sales and Expenses',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var line_chart = new google.visualization.LineChart(line_chart_element);
|
||||
line_chart.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleLineBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleLineBasic.init();
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - candlestick
|
||||
*
|
||||
* Google Visualization candlestick chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleCandlestickChart = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Candlestick chart
|
||||
var _googleCandlestickChart = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawCandlestick();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawCandlestick);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeCandlestickChart;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeCandlestickChart);
|
||||
resizeCandlestickChart = setTimeout(function () {
|
||||
drawCandlestick();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawCandlestick() {
|
||||
|
||||
// Define charts element
|
||||
var candlestick_chart_element = document.getElementById('google-candlestick');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['1', 20, 28, 38, 45],
|
||||
['2', 31, 38, 55, 66],
|
||||
['3', 50, 55, 77, 80],
|
||||
['4', 77, 77, 66, 50],
|
||||
['5', 68, 66, 22, 15],
|
||||
['6', 12, 25, 40, 60],
|
||||
['7', 10, 69, 39, 90],
|
||||
['8', 18, 56, 62, 80],
|
||||
['9', 10, 12, 40, 59],
|
||||
['10', 30, 36, 48, 55],
|
||||
['11', 78, 66, 42, 35],
|
||||
['12', 32, 35, 46, 32],
|
||||
['13', 65, 23, 54, 23],
|
||||
['14', 60, 54, 43, 30],
|
||||
['15', 12, 23, 45, 50],
|
||||
['16', 4, 15, 60, 45],
|
||||
['17', 5, 23, 25, 40],
|
||||
['18', 90, 56, 45, 23],
|
||||
['19', 65, 55, 45, 25],
|
||||
['20', 43, 35, 23, 2],
|
||||
['21', 12, 36, 58, 69],
|
||||
['22', 18, 26, 46, 60],
|
||||
['23', 60, 56, 23, 10],
|
||||
['24', 45, 23, 11, 1],
|
||||
['25', 4, 19, 40, 65],
|
||||
['26', 50, 40, 22, 12],
|
||||
['27', 67, 55, 34, 20],
|
||||
['28', 4, 12, 45, 68],
|
||||
['29', 34, 35, 56, 60],
|
||||
['30', 53, 20, 12, 2],
|
||||
['31', 25, 35, 45, 55]
|
||||
|
||||
// Treat first row as data as well.
|
||||
], true);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
colors: ['#546E7A'],
|
||||
candlestick: {
|
||||
risingColor: {
|
||||
fill: '#546E7A',
|
||||
stroke: '#546E7A'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Income and Expenses',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: 'none'
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var candlestick = new google.visualization.CandlestickChart(candlestick_chart_element);
|
||||
candlestick.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleCandlestickChart();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleCandlestickChart.init();
|
||||
@@ -0,0 +1,146 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - diff chart
|
||||
*
|
||||
* Google Visualization diff chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleDiffChart = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Diff chart
|
||||
var _googleDiffChart = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawDiff();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawDiff);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeDiffChart;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeDiffChart);
|
||||
resizeDiffChart = setTimeout(function () {
|
||||
drawDiff();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawDiff() {
|
||||
|
||||
// Define charts element
|
||||
var diff_chart_element = document.getElementById('google-diff');
|
||||
|
||||
// Old data
|
||||
var oldData = google.visualization.arrayToDataTable([
|
||||
['Name', 'Popularity'],
|
||||
['Cesar', 425],
|
||||
['Rachel', 420],
|
||||
['Patrick', 290],
|
||||
['Eric', 620],
|
||||
['Eugene', 520],
|
||||
['John', 460],
|
||||
['Greg', 420],
|
||||
['Matt', 410]
|
||||
]);
|
||||
|
||||
// New data
|
||||
var newData = google.visualization.arrayToDataTable([
|
||||
['Name', 'Popularity'],
|
||||
['Cesar', 307],
|
||||
['Rachel', 360],
|
||||
['Patrick', 200],
|
||||
['Eric', 550],
|
||||
['Eugene', 460],
|
||||
['John', 320],
|
||||
['Greg', 390],
|
||||
['Matt', 360]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 350
|
||||
},
|
||||
colors: ['#4CAF50'],
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Popularity',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'end',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Attach chart to the DOM element
|
||||
var diff = new google.visualization.ColumnChart(diff_chart_element);
|
||||
|
||||
// Set data
|
||||
var diffData = diff.computeDiff(oldData, newData);
|
||||
|
||||
// Draw our chart, passing in some options
|
||||
diff.draw(diffData, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleDiffChart();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleDiffChart.init();
|
||||
@@ -0,0 +1,102 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - geo chart
|
||||
*
|
||||
* Google Visualization geo chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleGeoRegion = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Geo chart
|
||||
var _googleGeoRegion = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawRegionsMap();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawRegionsMap);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeGeoRegion;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeGeoRegion);
|
||||
resizeGeoRegion = setTimeout(function () {
|
||||
drawRegionsMap();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawRegionsMap() {
|
||||
|
||||
// Define charts element
|
||||
var geo_region_element = document.getElementById('google-geo-region');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Country', 'Popularity'],
|
||||
['Germany', 200],
|
||||
['United States', 300],
|
||||
['Brazil', 400],
|
||||
['Canada', 500],
|
||||
['France', 600],
|
||||
['RU', 700]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 500,
|
||||
width: "100%",
|
||||
fontSize: 12,
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var chart = new google.visualization.GeoChart(geo_region_element);
|
||||
chart.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleGeoRegion();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleGeoRegion.init();
|
||||
@@ -0,0 +1,151 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - sankey diagram
|
||||
*
|
||||
* Google Visualization sankey diagram demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleSankeyBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Sankey diagram
|
||||
var _googleSankeyBasic = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawSankey();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawSankey);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeSankeyBasic;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeSankeyBasic);
|
||||
resizeSankeyBasic = setTimeout(function () {
|
||||
drawSankey();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart', 'sankey']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawSankey() {
|
||||
|
||||
// Define charts element
|
||||
var sankey_chart_element = document.getElementById('google-sankey');
|
||||
|
||||
// Data
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('string', 'From');
|
||||
data.addColumn('string', 'To');
|
||||
data.addColumn('number', 'Weight');
|
||||
data.addRows([
|
||||
[ 'Brazil', 'Portugal', 4 ],
|
||||
[ 'Brazil', 'France', 1 ],
|
||||
[ 'Brazil', 'Spain', 1 ],
|
||||
[ 'Brazil', 'England', 1 ],
|
||||
[ 'Canada', 'Portugal', 1 ],
|
||||
[ 'Canada', 'France', 4 ],
|
||||
[ 'Canada', 'England', 1 ],
|
||||
[ 'Mexico', 'Portugal', 1 ],
|
||||
[ 'Mexico', 'France', 1 ],
|
||||
[ 'Mexico', 'Spain', 4 ],
|
||||
[ 'Mexico', 'England', 1 ],
|
||||
[ 'USA', 'Portugal', 1 ],
|
||||
[ 'USA', 'France', 1 ],
|
||||
[ 'USA', 'Spain', 1 ],
|
||||
[ 'USA', 'England', 4 ],
|
||||
[ 'Portugal', 'Angola', 2 ],
|
||||
[ 'Portugal', 'Senegal', 1 ],
|
||||
[ 'Portugal', 'Morocco', 1 ],
|
||||
[ 'Portugal', 'South Africa', 3 ],
|
||||
[ 'France', 'Angola', 1 ],
|
||||
[ 'France', 'Mali', 3 ],
|
||||
[ 'France', 'Morocco', 3 ],
|
||||
[ 'France', 'South Africa', 1 ],
|
||||
[ 'Spain', 'Senegal', 1 ],
|
||||
[ 'Spain', 'Morocco', 3 ],
|
||||
[ 'Spain', 'South Africa', 1 ],
|
||||
[ 'England', 'Angola', 1 ],
|
||||
[ 'England', 'Senegal', 1 ],
|
||||
[ 'England', 'Morocco', 2 ],
|
||||
[ 'England', 'South Africa', 4 ],
|
||||
[ 'South Africa', 'India', 1 ],
|
||||
[ 'South Africa', 'Japan', 3 ],
|
||||
[ 'Angola', 'China', 2 ],
|
||||
[ 'Angola', 'India', 1 ],
|
||||
[ 'Angola', 'Japan', 3 ],
|
||||
[ 'Senegal', 'China', 2 ],
|
||||
[ 'Senegal', 'India', 1 ],
|
||||
[ 'Senegal', 'Japan', 3 ],
|
||||
[ 'Mali', 'China', 2 ],
|
||||
[ 'Mali', 'India', 1 ],
|
||||
[ 'Mali', 'Japan', 3 ],
|
||||
[ 'Morocco', 'China', 2 ],
|
||||
[ 'Morocco', 'India', 1 ],
|
||||
[ 'Morocco', 'Japan', 3 ],
|
||||
[ 'Morocco', 'Senegal', 1 ]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
height: 600,
|
||||
sankey: {
|
||||
link: {
|
||||
color: {
|
||||
fill: '#eee',
|
||||
fillOpacity: 0.3
|
||||
}
|
||||
},
|
||||
node: {
|
||||
width: 8,
|
||||
nodePadding: 80,
|
||||
label: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var chart = new google.visualization.Sankey(sankey_chart_element);
|
||||
chart.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleSankeyBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleSankeyBasic.init();
|
||||
@@ -0,0 +1,138 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - trendlines
|
||||
*
|
||||
* Google Visualization trendline chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleTrendline = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Trendline chart
|
||||
var _googleTrendline = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawTrendline();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawTrendline);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeTrendline;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeTrendline);
|
||||
resizeTrendline = setTimeout(function () {
|
||||
drawTrendline();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawTrendline() {
|
||||
|
||||
// Define charts element
|
||||
var trendline_element = document.getElementById('google-trendline');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Week', 'Bugs', 'Tests'],
|
||||
[1, 175, 10],
|
||||
[2, 159, 20],
|
||||
[3, 126, 35],
|
||||
[4, 129, 40],
|
||||
[5, 108, 60],
|
||||
[6, 92, 70],
|
||||
[7, 55, 72],
|
||||
[8, 50, 97]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 400,
|
||||
curveType: 'function',
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '92%',
|
||||
height: 350
|
||||
},
|
||||
hAxis: {
|
||||
format: '#',
|
||||
viewWindow: {min: 0, max: 9},
|
||||
gridlines: {count: 10}
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Bugs and tests',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
colors: ['#6D4C41', '#FB8C00'],
|
||||
trendlines: {
|
||||
0: {
|
||||
labelInLegend: 'Bug line',
|
||||
visibleInLegend: true,
|
||||
},
|
||||
1: {
|
||||
labelInLegend: 'Test line',
|
||||
visibleInLegend: true,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'end',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var trendline = new google.visualization.ColumnChart(trendline_element);
|
||||
trendline.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleTrendline();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleTrendline.init();
|
||||
@@ -0,0 +1,115 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - sliced 3D donut
|
||||
*
|
||||
* Google Visualization sliced 3D donut chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleDonut3dExploded = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// 3D donut chart
|
||||
var _googleDonut3dExploded = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawDonut3dExploded();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawDonut3dExploded);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeDonut3dExploded;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeDonut3dExploded);
|
||||
resizeDonut3dExploded = setTimeout(function () {
|
||||
drawDonut3dExploded();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawDonut3dExploded() {
|
||||
|
||||
// Define charts element
|
||||
var donut_3d_exploded_element = document.getElementById('google-3d-exploded');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Language', 'Speakers (in millions)'],
|
||||
['Assamese', 13],
|
||||
['Bengali', 83],
|
||||
['Gujarati', 46],
|
||||
['Hindi', 90],
|
||||
['Kannada', 38],
|
||||
['Maithili', 20],
|
||||
['Malayalam', 33],
|
||||
['Marathi', 72],
|
||||
['Oriya', 33],
|
||||
['Punjabi', 29],
|
||||
['Tamil', 61],
|
||||
['Telugu', 74],
|
||||
['Urdu', 52]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 300,
|
||||
width: 540,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '95%',
|
||||
height: '95%'
|
||||
},
|
||||
is3D: true,
|
||||
pieSliceText: 'label',
|
||||
slices: {
|
||||
2: {offset: 0.15},
|
||||
8: {offset: 0.1},
|
||||
10: {offset: 0.15},
|
||||
11: {offset: 0.1}
|
||||
}
|
||||
};
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
var pie_3d_exploded = new google.visualization.PieChart(donut_3d_exploded_element);
|
||||
pie_3d_exploded.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleDonut3dExploded();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleDonut3dExploded.init();
|
||||
@@ -0,0 +1,100 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - donut chart
|
||||
*
|
||||
* Google Visualization donut chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleDonutBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Donut chart
|
||||
var _googleDonutBasic = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawDonut();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawDonut);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeDonutBasic;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeDonutBasic);
|
||||
resizeDonutBasic = setTimeout(function () {
|
||||
drawDonut();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawDonut() {
|
||||
|
||||
// Define charts element
|
||||
var donut_chart_element = document.getElementById('google-donut');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Task', 'Hours per Day'],
|
||||
['Work', 11],
|
||||
['Eat', 2],
|
||||
['Commute', 2],
|
||||
['Watch TV', 2],
|
||||
['Sleep', 7]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options_donut = {
|
||||
fontName: 'Roboto',
|
||||
pieHole: 0.55,
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
}
|
||||
};
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
var donut = new google.visualization.PieChart(donut_chart_element);
|
||||
donut.draw(data, options_donut);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleDonutBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleDonutBasic.init();
|
||||
@@ -0,0 +1,115 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - sliced donut
|
||||
*
|
||||
* Google Visualization sliced donut chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleDonutExploded = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Exploded donut
|
||||
var _googleDonutExploded = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawDonutExploded();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawDonutExploded);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeDonutExploded;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeDonutExploded);
|
||||
resizeDonutExploded = setTimeout(function () {
|
||||
drawDonutExploded();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawDonutExploded() {
|
||||
|
||||
// Define charts element
|
||||
var donut_exploded_element = document.getElementById('google-donut-exploded');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Language', 'Speakers (in millions)'],
|
||||
['Assamese', 13],
|
||||
['Bengali', 83],
|
||||
['Gujarati', 46],
|
||||
['Hindi', 90],
|
||||
['Kannada', 38],
|
||||
['Maithili', 20],
|
||||
['Malayalam', 33],
|
||||
['Marathi', 72],
|
||||
['Oriya', 33],
|
||||
['Punjabi', 29],
|
||||
['Tamil', 61],
|
||||
['Telugu', 74],
|
||||
['Urdu', 52]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options_donut_exploded = {
|
||||
fontName: 'Roboto',
|
||||
height: 300,
|
||||
width: 540,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
pieHole: 0.5,
|
||||
pieSliceText: 'label',
|
||||
slices: {
|
||||
2: {offset: 0.15},
|
||||
8: {offset: 0.1},
|
||||
10: {offset: 0.15},
|
||||
11: {offset: 0.1}
|
||||
}
|
||||
};
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
var donut_exploded = new google.visualization.PieChart(donut_exploded_element);
|
||||
donut_exploded.draw(data, options_donut_exploded);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleDonutExploded();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleDonutExploded.init();
|
||||
@@ -0,0 +1,101 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - rotated donut
|
||||
*
|
||||
* Google Visualization rotated donut chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleDonutRotated = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Rotated donut
|
||||
var _googleDonutRotated = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawDonutRotated();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawDonutRotated);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeDonutRotated;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeDonutRotated);
|
||||
resizeDonutRotated = setTimeout(function () {
|
||||
drawDonutRotated();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawDonutRotated() {
|
||||
|
||||
// Define charts element
|
||||
var donut_rotated_element = document.getElementById('google-donut-rotate');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Task', 'Hours per Day'],
|
||||
['Work', 11],
|
||||
['Eat', 2],
|
||||
['Commute', 2],
|
||||
['Watch TV', 2],
|
||||
['Sleep', 7]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options_donut_rotate = {
|
||||
fontName: 'Roboto',
|
||||
pieHole: 0.55,
|
||||
pieStartAngle: 180,
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
}
|
||||
};
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
var donut_rotate = new google.visualization.PieChart(donut_rotated_element);
|
||||
donut_rotate.draw(data, options_donut_rotate);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleDonutRotated();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleDonutRotated.init();
|
||||
@@ -0,0 +1,99 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - pie chart
|
||||
*
|
||||
* Google Visualization pie chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GooglePieBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Pie chart
|
||||
var _googlePieBasic = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawPie();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawPie);
|
||||
|
||||
// Resize on window resize
|
||||
var resizePieBasic;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizePieBasic);
|
||||
resizePieBasic = setTimeout(function () {
|
||||
drawPie();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawPie() {
|
||||
|
||||
// Define charts element
|
||||
var pie_chart_element = document.getElementById('google-pie');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Task', 'Hours per Day'],
|
||||
['Work', 11],
|
||||
['Eat', 2],
|
||||
['Commute', 2],
|
||||
['Watch TV', 2],
|
||||
['Sleep', 7]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options_pie = {
|
||||
fontName: 'Roboto',
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
}
|
||||
};
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
var pie = new google.visualization.PieChart(pie_chart_element);
|
||||
pie.draw(data, options_pie);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googlePieBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GooglePieBasic.init();
|
||||
@@ -0,0 +1,100 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - 3D pie
|
||||
*
|
||||
* Google Visualization 3D pie chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GooglePie3d = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// 3D pie chart
|
||||
var _googlePie3d = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawPie3d();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawPie3d);
|
||||
|
||||
// Resize on window resize
|
||||
var resizePie3d;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizePie3d);
|
||||
resizePie3d = setTimeout(function () {
|
||||
drawPie3d();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawPie3d() {
|
||||
|
||||
// Define charts element
|
||||
var pie_3d_element = document.getElementById('google-pie-3d');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Task', 'Hours per Day'],
|
||||
['Work', 11],
|
||||
['Eat', 2],
|
||||
['Commute', 2],
|
||||
['Watch TV', 2],
|
||||
['Sleep', 7]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options_pie_3d = {
|
||||
fontName: 'Roboto',
|
||||
is3D: true,
|
||||
height: 300,
|
||||
width: 540,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '95%',
|
||||
height: '95%'
|
||||
}
|
||||
};
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
var pie_3d = new google.visualization.PieChart(pie_3d_element);
|
||||
pie_3d.draw(data, options_pie_3d);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googlePie3d();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GooglePie3d.init();
|
||||
@@ -0,0 +1,115 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - diff pie
|
||||
*
|
||||
* Google Visualization diff pie chart with border factor demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GooglePieDiffBorder = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Pie with border factor
|
||||
var _googlePieDiffBorder = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawPieDiffBorder();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawPieDiffBorder);
|
||||
|
||||
// Resize on window resize
|
||||
var resizePieDiffBorder;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizePieDiffBorder);
|
||||
resizePieDiffBorder = setTimeout(function () {
|
||||
drawPieDiffBorder();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawPieDiffBorder() {
|
||||
|
||||
// Define charts element
|
||||
var pie_diff_border_element = document.getElementById('google-pie-diff-border');
|
||||
|
||||
// Old data set
|
||||
var oldData = google.visualization.arrayToDataTable([
|
||||
['Major', 'Degrees'],
|
||||
['Business', 256070], ['Education', 108034],
|
||||
['Social Sciences & History', 127101], ['Health', 81863],
|
||||
['Psychology', 74194]
|
||||
]);
|
||||
|
||||
// New data set
|
||||
var newData = google.visualization.arrayToDataTable([
|
||||
['Major', 'Degrees'],
|
||||
['Business', 358293], ['Education', 101265],
|
||||
['Social Sciences & History', 172780], ['Health', 129634],
|
||||
['Psychology', 97216]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
diff: {
|
||||
innerCircle: {
|
||||
borderFactor: 0.08
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Attach chart to the DOM element
|
||||
var chartRadius = new google.visualization.PieChart(pie_diff_border_element);
|
||||
|
||||
// Set data
|
||||
var diffData = chartRadius.computeDiff(oldData, newData);
|
||||
|
||||
// Draw our chart, passing in some options
|
||||
chartRadius.draw(diffData, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googlePieDiffBorder();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GooglePieDiffBorder.init();
|
||||
@@ -0,0 +1,115 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - diff pie
|
||||
*
|
||||
* Google Visualization diff pie chart with inverted behaviour demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GooglePieDiffInvert = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Pie with inverted behaviour
|
||||
var _googlePieDiffInvert = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawPieDiffInvert();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawPieDiffInvert);
|
||||
|
||||
// Resize on window resize
|
||||
var resizePieDiffInvert;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizePieDiffInvert);
|
||||
resizePieDiffInvert = setTimeout(function () {
|
||||
drawPieDiffInvert();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawPieDiffInvert() {
|
||||
|
||||
// Define charts element
|
||||
var pie_diff_invert_element = document.getElementById('google-pie-diff-invert');
|
||||
|
||||
// Old data
|
||||
var oldData = google.visualization.arrayToDataTable([
|
||||
['Major', 'Degrees'],
|
||||
['Business', 256070], ['Education', 108034],
|
||||
['Social Sciences & History', 127101], ['Health', 81863],
|
||||
['Psychology', 74194]
|
||||
]);
|
||||
|
||||
// New data
|
||||
var newData = google.visualization.arrayToDataTable([
|
||||
['Major', 'Degrees'],
|
||||
['Business', 358293], ['Education', 101265],
|
||||
['Social Sciences & History', 172780], ['Health', 129634],
|
||||
['Psychology', 97216]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
diff: {
|
||||
oldData: {
|
||||
inCenter: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Attach chart to the DOM element
|
||||
var chartRadius = new google.visualization.PieChart(pie_diff_invert_element);
|
||||
|
||||
// Set data
|
||||
var diffData = chartRadius.computeDiff(oldData, newData);
|
||||
|
||||
// Draw our chart, passing in some options
|
||||
chartRadius.draw(diffData, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googlePieDiffInvert();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GooglePieDiffInvert.init();
|
||||
@@ -0,0 +1,115 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - diff pie
|
||||
*
|
||||
* Google Visualization diff pie chart with transparency demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GooglePieDiffOpacity = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Pie with opacity
|
||||
var _googlePieDiffOpacity = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawPieDiffOpacity();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawPieDiffOpacity);
|
||||
|
||||
// Resize on window resize
|
||||
var resizePieDiffOpacity;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizePieDiffOpacity);
|
||||
resizePieDiffOpacity = setTimeout(function () {
|
||||
drawPieDiffOpacity();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawPieDiffOpacity() {
|
||||
|
||||
// Define charts element
|
||||
var pie_diff_opacity_element = document.getElementById('google-pie-diff-opacity');
|
||||
|
||||
// Old data
|
||||
var oldData = google.visualization.arrayToDataTable([
|
||||
['Major', 'Degrees'],
|
||||
['Business', 256070], ['Education', 108034],
|
||||
['Social Sciences & History', 127101], ['Health', 81863],
|
||||
['Psychology', 74194]
|
||||
]);
|
||||
|
||||
// New data
|
||||
var newData = google.visualization.arrayToDataTable([
|
||||
['Major', 'Degrees'],
|
||||
['Business', 358293], ['Education', 101265],
|
||||
['Social Sciences & History', 172780], ['Health', 129634],
|
||||
['Psychology', 97216]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
diff: {
|
||||
oldData: {
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Attach chart to the DOM element
|
||||
var chartRadius = new google.visualization.PieChart(pie_diff_opacity_element);
|
||||
|
||||
// Set data
|
||||
var diffData = chartRadius.computeDiff(oldData, newData);
|
||||
|
||||
// Draw our chart, passing in some options
|
||||
chartRadius.draw(diffData, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googlePieDiffOpacity();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GooglePieDiffOpacity.init();
|
||||
@@ -0,0 +1,115 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - diff pie
|
||||
*
|
||||
* Google Visualization diff pie chart with radius factor demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GooglePieDiff = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Pie with radius factor
|
||||
var _googlePieDiff = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawPieDiff();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawPieDiff);
|
||||
|
||||
// Resize on window resize
|
||||
var resizePieDiff;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizePieDiff);
|
||||
resizePieDiff = setTimeout(function () {
|
||||
drawPieDiff();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawPieDiff() {
|
||||
|
||||
// Define charts element
|
||||
var pie_diff_element = document.getElementById('google-pie-diff-radius');
|
||||
|
||||
// Old data
|
||||
var oldData = google.visualization.arrayToDataTable([
|
||||
['Major', 'Degrees'],
|
||||
['Business', 256070], ['Education', 108034],
|
||||
['Social Sciences & History', 127101], ['Health', 81863],
|
||||
['Psychology', 74194]
|
||||
]);
|
||||
|
||||
// New data
|
||||
var newData = google.visualization.arrayToDataTable([
|
||||
['Major', 'Degrees'],
|
||||
['Business', 358293], ['Education', 101265],
|
||||
['Social Sciences & History', 172780], ['Health', 129634],
|
||||
['Psychology', 97216]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
diff: {
|
||||
innerCircle: {
|
||||
radiusFactor: 0.8
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Attach chart to the DOM element
|
||||
var chartRadius = new google.visualization.PieChart(pie_diff_element);
|
||||
|
||||
// Set data
|
||||
var diffData = chartRadius.computeDiff(oldData, newData);
|
||||
|
||||
// Draw our chart, passing in some options
|
||||
chartRadius.draw(diffData, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googlePieDiff();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GooglePieDiff.init();
|
||||
@@ -0,0 +1,114 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - sliced pie
|
||||
*
|
||||
* Google Visualization sliced pie chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GooglePieExploded = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Exploded pie
|
||||
var _googlePieExploded = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawExplodedPie();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawExplodedPie);
|
||||
|
||||
// Resize on window resize
|
||||
var resizePieExploded;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizePieExploded);
|
||||
resizePieExploded = setTimeout(function () {
|
||||
drawExplodedPie();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawExplodedPie() {
|
||||
|
||||
// Define charts element
|
||||
var pie_exploded_element = document.getElementById('google-pie-exploded');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Language', 'Speakers (in millions)'],
|
||||
['Assamese', 13],
|
||||
['Bengali', 83],
|
||||
['Gujarati', 46],
|
||||
['Hindi', 90],
|
||||
['Kannada', 38],
|
||||
['Maithili', 20],
|
||||
['Malayalam', 33],
|
||||
['Marathi', 72],
|
||||
['Oriya', 33],
|
||||
['Punjabi', 29],
|
||||
['Tamil', 61],
|
||||
['Telugu', 74],
|
||||
['Urdu', 52]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 300,
|
||||
width: 540,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
},
|
||||
pieSliceText: 'label',
|
||||
slices: {
|
||||
2: {offset: 0.15},
|
||||
8: {offset: 0.1},
|
||||
10: {offset: 0.15},
|
||||
11: {offset: 0.1}
|
||||
}
|
||||
};
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
var pie_exploded = new google.visualization.PieChart(pie_exploded_element);
|
||||
pie_exploded.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googlePieExploded();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GooglePieExploded.init();
|
||||
@@ -0,0 +1,100 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - rotated pie
|
||||
*
|
||||
* Google Visualization rotated pie chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GooglePieRotate = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Rotated pie
|
||||
var _googlePieRotate = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawPieRotated();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawPieRotated);
|
||||
|
||||
// Resize on window resize
|
||||
var resizePieRotate;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizePieRotate);
|
||||
resizePieRotate = setTimeout(function () {
|
||||
drawPieRotated();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawPieRotated() {
|
||||
|
||||
// Define charts element
|
||||
var pie_rotate_element = document.getElementById('google-pie-rotate');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Task', 'Hours per Day'],
|
||||
['Work', 11],
|
||||
['Eat', 2],
|
||||
['Commute', 2],
|
||||
['Watch TV', 2],
|
||||
['Sleep', 7]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options_pie_rotate = {
|
||||
fontName: 'Roboto',
|
||||
pieStartAngle: 180,
|
||||
height: 300,
|
||||
width: 500,
|
||||
chartArea: {
|
||||
left: 50,
|
||||
width: '90%',
|
||||
height: '90%'
|
||||
}
|
||||
};
|
||||
|
||||
// Instantiate and draw our chart, passing in some options.
|
||||
var pie_rotate = new google.visualization.PieChart(pie_rotate_element);
|
||||
pie_rotate.draw(data, options_pie_rotate);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googlePieRotate();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GooglePieRotate.init();
|
||||
@@ -0,0 +1,134 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - scatter
|
||||
*
|
||||
* Google Visualization scatter chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleScatterBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Scatter chart
|
||||
var _googleScatterBasic = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawScatter();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawScatter);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeScatterBasic;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeScatterBasic);
|
||||
resizeScatterBasic = setTimeout(function () {
|
||||
drawScatter();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawScatter() {
|
||||
|
||||
// Define charts element
|
||||
var scatter_chart_element = document.getElementById('google-scatter');
|
||||
|
||||
// Data
|
||||
var data = google.visualization.arrayToDataTable([
|
||||
['Age', 'Weight'],
|
||||
[ 8, 12],
|
||||
[ 4, 6],
|
||||
[ 11, 14],
|
||||
[ 4, 5],
|
||||
[ 3, 3.5],
|
||||
[ 6.5, 7],
|
||||
[ 7, 10],
|
||||
[ 6.5, 12],
|
||||
[ 6, 13],
|
||||
[ 8, 16],
|
||||
[ 12, 17],
|
||||
[ 18, 8],
|
||||
[ 18, 9],
|
||||
[ 16, 12]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 450,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 400
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
hAxis: {
|
||||
minValue: 0,
|
||||
maxValue: 15
|
||||
},
|
||||
vAxis: {
|
||||
title: 'Weight',
|
||||
titleTextStyle: {
|
||||
fontSize: 13,
|
||||
italic: false
|
||||
},
|
||||
gridlines:{
|
||||
color: '#e5e5e5',
|
||||
count: 10
|
||||
},
|
||||
minValue: 0,
|
||||
maxValue: 15
|
||||
},
|
||||
legend: 'none',
|
||||
pointSize: 10,
|
||||
colors: ['#E53935']
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
var scatter = new google.visualization.ScatterChart(scatter_chart_element);
|
||||
scatter.draw(data, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleScatterBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleScatterBasic.init();
|
||||
@@ -0,0 +1,159 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Google Visualization - diff scatter
|
||||
*
|
||||
* Google Visualization diff scatter chart demonstration
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var GoogleScatterDiff = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Scatter diff chart
|
||||
var _googleScatterDiff = function() {
|
||||
if (typeof google == 'undefined') {
|
||||
console.warn('Warning - Google Charts library is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize chart
|
||||
google.charts.load('current', {
|
||||
callback: function () {
|
||||
|
||||
// Draw chart
|
||||
drawScatterDiff();
|
||||
|
||||
// Resize on sidebar width change
|
||||
$(document).on('click', '.sidebar-control', drawScatterDiff);
|
||||
|
||||
// Resize on window resize
|
||||
var resizeScatterDiff;
|
||||
$(window).on('resize', function() {
|
||||
clearTimeout(resizeScatterDiff);
|
||||
resizeScatterDiff = setTimeout(function () {
|
||||
drawScatterDiff();
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
packages: ['corechart']
|
||||
});
|
||||
|
||||
// Chart settings
|
||||
function drawScatterDiff() {
|
||||
|
||||
// Define charts element
|
||||
var scatter_diff_element = document.getElementById('google-scatter-diff');
|
||||
|
||||
// Old data
|
||||
var oldData = google.visualization.arrayToDataTable([
|
||||
['', 'Medicine 1', 'Medicine 2'],
|
||||
[23, null, 12], [9, null, 39], [15, null, 28],
|
||||
[37, null, 30], [21, null, 14], [12, null, 18],
|
||||
[29, null, 34], [ 8, null, 12], [38, null, 28],
|
||||
[35, null, 12], [26, null, 10], [10, null, 29],
|
||||
[11, null, 10], [27, null, 38], [39, null, 17],
|
||||
[34, null, 20], [38, null, 5], [33, null, 27],
|
||||
[23, null, 39], [12, null, 10], [ 8, 15, null],
|
||||
[39, 15, null], [27, 31, null], [30, 24, null],
|
||||
[31, 39, null], [35, 6, null], [ 5, 5, null],
|
||||
[19, 39, null], [22, 8, null], [19, 23, null],
|
||||
[27, 20, null], [11, 6, null], [34, 33, null],
|
||||
[38, 8, null], [39, 29, null], [13, 23, null],
|
||||
[13, 36, null], [39, 6, null], [14, 37, null], [13, 39, null]
|
||||
]);
|
||||
|
||||
// New data
|
||||
var newData = google.visualization.arrayToDataTable([
|
||||
['', 'Medicine 1', 'Medicine 2'],
|
||||
[22, null, 12], [7, null, 40], [14, null, 31],
|
||||
[37, null, 30], [18, null, 17], [9, null, 20],
|
||||
[26, null, 36], [5, null, 13], [36, null, 30],
|
||||
[35, null, 15], [24, null, 12], [7, null, 31],
|
||||
[10, null, 12], [24, null, 40], [37, null, 18],
|
||||
[32, null, 21], [35, null, 7], [31, null, 30],
|
||||
[21, null, 42], [12, null, 10], [10, 13, null],
|
||||
[40, 12, null], [28, 29, null], [32, 22, null],
|
||||
[31, 37, null], [38, 5, null], [6, 4, null],
|
||||
[21, 36, null], [22, 8, null], [21, 22, null],
|
||||
[28, 17, null], [12, 5, null], [37, 30, null],
|
||||
[41, 7, null], [41, 27, null], [15, 20, null],
|
||||
[14, 36, null], [42, 3, null], [14, 37, null], [15, 36, null]
|
||||
]);
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
fontName: 'Roboto',
|
||||
height: 450,
|
||||
fontSize: 12,
|
||||
chartArea: {
|
||||
left: '5%',
|
||||
width: '94%',
|
||||
height: 400
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontName: 'Roboto',
|
||||
fontSize: 13
|
||||
}
|
||||
},
|
||||
hAxis: {
|
||||
minValue: 0
|
||||
},
|
||||
vAxis: {
|
||||
gridlines: {
|
||||
color: '#e5e5e5',
|
||||
count: 5
|
||||
},
|
||||
minValue: 0
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
alignment: 'center',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
pointSize: 10,
|
||||
diff: {
|
||||
oldData: {
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Attach chart to the DOM element
|
||||
var chartOldOpacity = new google.visualization.ScatterChart(scatter_diff_element);
|
||||
|
||||
// Set data
|
||||
var diffData = chartOldOpacity.computeDiff(oldData, newData);
|
||||
|
||||
// Draw our chart, passing in some options
|
||||
chartOldOpacity.draw(diffData, options);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_googleScatterDiff();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
GoogleScatterDiff.init();
|
||||
Reference in New Issue
Block a user