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,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();