first commit

This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
@@ -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();