first commit
This commit is contained in:
@@ -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();
|
||||
Reference in New Issue
Block a user