Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/charts/google/bars/bar.js
+86
View File
@@ -0,0 +1,86 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - bars
*
* Google Visualization bar chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Bar chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawBar);
// Chart settings
function drawBar() {
// 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: '90%',
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($('#google-bar')[0]);
bar.draw(data, options_bar);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawBar();
}
});
assets/js/charts/google/bars/bar_stacked.js
+89
View File
@@ -0,0 +1,89 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - stacked bars
*
* Google Visualization stacked bar chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Stacked bars
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawBarStacked);
// Chart settings
function drawBarStacked() {
// 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: '90%',
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($('#google-bar-stacked')[0]);
bar_stacked.draw(data, options_bar_stacked);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawBarStacked();
}
});
assets/js/charts/google/bars/column.js
+90
View File
@@ -0,0 +1,90 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - columns
*
* Google Visualization column chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Column chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawColumn);
// Chart settings
function drawColumn() {
// 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: '90%',
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($('#google-column')[0]);
column.draw(data, options_column);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawColumn();
}
});
assets/js/charts/google/bars/column_stacked.js
+94
View File
@@ -0,0 +1,94 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - stacked columns
*
* Google Visualization stacked column chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Stacked columns
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawColumnStacked);
// Chart settings
function drawColumnStacked() {
// 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: '90%',
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($('#google-column-stacked')[0]);
column_stacked.draw(data, options_column_stacked);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawColumnStacked();
}
});
assets/js/charts/google/bars/combo.js
+93
View File
@@ -0,0 +1,93 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - chart combinations
*
* Google Visualization combo chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Combo chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCombo);
// Chart settings
function drawCombo() {
// 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: '90%',
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($('#google-combo')[0]);
combo.draw(data, options_combo);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawCombo();
}
});
assets/js/charts/google/bars/histogram.js
+121
View File
@@ -0,0 +1,121 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - histogram
*
* Google Visualization histogram demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Histogram
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawHistogram);
// Chart settings
function drawHistogram() {
// 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: '90%',
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($('#google-histogram')[0]);
histogram.draw(data, options_histogram);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawHistogram();
}
});
assets/js/charts/google/bubbles/bubble.js
+104
View File
@@ -0,0 +1,104 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - bubbles
*
* Google Visualization bubble chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Bubble chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawBubbleChart);
// Chart settings
function drawBubbleChart() {
// 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: '90%',
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($('#google-bubble')[0]);
bubble.draw(data, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawBubbleChart();
}
});
assets/js/charts/google/bubbles/bubble_gradient.js
+88
View File
@@ -0,0 +1,88 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - bubbles with color scale
*
* Google Visualization bubble chart with color scale demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Bubble chart with color scale
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawBubbleGradientChart);
// Chart settings
function drawBubbleGradientChart() {
// 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: '90%',
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($('#google-bubble-gradient')[0]);
gradient_bubble.draw(data, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawBubbleGradientChart();
}
});
assets/js/charts/google/lines/area.js
+93
View File
@@ -0,0 +1,93 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - area
*
* Google Visualization area chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Area chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawAreaChart);
// Chart settings
function drawAreaChart() {
// 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: '90%',
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($('#google-area')[0]);
area_chart.draw(data, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawAreaChart();
}
});
assets/js/charts/google/lines/area_intervals.js
+101
View File
@@ -0,0 +1,101 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - area intervals
*
* Google Visualization area chart with intervals demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Area intervals
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawAreaIntervals);
// Chart settings
function drawAreaIntervals() {
// 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: '90%',
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($('#google-area-intervals')[0]);
area_intervals.draw(data, options_area_intervals);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawAreaIntervals();
}
});
assets/js/charts/google/lines/area_stacked.js
+94
View File
@@ -0,0 +1,94 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - stacked area
*
* Google Visualization stacked area chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Stacked area
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawAreaStackedChart);
// Chart settings
function drawAreaStackedChart() {
// 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: '90%',
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($('#google-area-stacked')[0]);
area_stacked_chart.draw(data, options_area_stacked);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawAreaStackedChart();
}
});
assets/js/charts/google/lines/area_stepped.js
+93
View File
@@ -0,0 +1,93 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - stepped area
*
* Google Visualization stepped area chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Stepped area
// ------------------------------
// Initialize chart
google.load("visualization", "1", { packages:["corechart"] });
google.setOnLoadCallback(drawSteppedAreaChart);
// Chart settings
function drawSteppedAreaChart() {
// 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_stepped_area = {
fontName: 'Roboto',
height: 400,
isStacked: true,
fontSize: 12,
areaOpacity: 0.4,
chartArea: {
left: '5%',
width: '90%',
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($('#google-area-stepped')[0]);
stepped_area_chart.draw(data, options_stepped_area);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawSteppedAreaChart();
}
});
assets/js/charts/google/lines/line_intervals.js
+102
View File
@@ -0,0 +1,102 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - line intervals
*
* Google Visualization line chart with intervals demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Line intervals
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawLineIntervals);
// Chart settings
function drawLineIntervals() {
// 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: '90%',
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($('#google-line-intervals')[0]);
line_intervals.draw(data, options_line_intervals);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawLineIntervals();
}
});
assets/js/charts/google/lines/lines.js
+91
View File
@@ -0,0 +1,91 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - lines
*
* Google Visualization line chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Line chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawLineChart);
// Chart settings
function drawLineChart() {
// 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: '90%',
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($('#google-line')[0]);
line_chart.draw(data, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawLineChart();
}
});
assets/js/charts/google/other/candlestick.js
+120
View File
@@ -0,0 +1,120 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - candlestick
*
* Google Visualization candlestick chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Candlestick chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["sankey"]});
google.setOnLoadCallback(drawCandlestick);
// Chart settings
function drawCandlestick() {
// 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: '92%',
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($('#google-candlestick')[0]);
candlestick.draw(data, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawCandlestick();
}
});
assets/js/charts/google/other/diff.js
+114
View File
@@ -0,0 +1,114 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - diff chart
*
* Google Visualization diff chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Diff chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawDiff);
// Chart settings
function drawDiff() {
// 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: '90%',
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($('#google-diff')[0]);
// Set data
var diffData = diff.computeDiff(oldData, newData);
// Draw our chart, passing in some options
diff.draw(diffData, options);
};
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawDiff();
}
});
assets/js/charts/google/other/geo.js
+54
View File
@@ -0,0 +1,54 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - geo chart
*
* Google Visualization geo chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Geo chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
// Chart settings
function drawRegionsMap() {
// 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($('#google-geo-region')[0]);
chart.draw(data, options);
}
assets/js/charts/google/other/sankey.js
+119
View File
@@ -0,0 +1,119 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - sankey diagram
*
* Google Visualization sankey diagram demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Sankey diagram
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["sankey"]});
google.setOnLoadCallback(drawSankey);
// Chart settings
function drawSankey() {
// 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($('#google-sankey')[0]);
chart.draw(data, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawSankey();
}
});
assets/js/charts/google/other/trendline.js
+106
View File
@@ -0,0 +1,106 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - trendlines
*
* Google Visualization trendline chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Trendline chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawTrendline);
// Chart settings
function drawTrendline() {
// 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($('#google-trendline')[0]);
trendline.draw(data, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawTrendline();
}
});
assets/js/charts/google/pies/3d_exploded.js
+67
View File
@@ -0,0 +1,67 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - sliced 3D donut
*
* Google Visualization sliced 3D donut chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Sliced 3D donut chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawExploded3d);
// Chart settings
function drawExploded3d() {
// 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($('#google-3d-exploded')[0]);
pie_3d_exploded.draw(data, options);
}
assets/js/charts/google/pies/donut.js
+52
View File
@@ -0,0 +1,52 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - donut chart
*
* Google Visualization donut chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Donut chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawDonut);
// Chart settings
function drawDonut() {
// 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($('#google-donut')[0]);
donut.draw(data, options_donut);
}
assets/js/charts/google/pies/donut_exploded.js
+67
View File
@@ -0,0 +1,67 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - sliced donut
*
* Google Visualization sliced donut chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Sliced donut chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawExplodedDonut);
// Chart settings
function drawExplodedDonut() {
// 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($('#google-donut-exploded')[0]);
donut_exploded.draw(data, options_donut_exploded);
}
assets/js/charts/google/pies/donut_rotate.js
+53
View File
@@ -0,0 +1,53 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - rotated donut
*
* Google Visualization rotated donut chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Rotated donut chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawDonutRotated);
// Chart settings
function drawDonutRotated() {
// 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($('#google-donut-rotate')[0]);
donut_rotate.draw(data, options_donut_rotate);
}
assets/js/charts/google/pies/pie.js
+50
View File
@@ -0,0 +1,50 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - pie chart
*
* Google Visualization pie chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Pie chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawPie);
// Chart settings
function drawPie() {
// 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($('#google-pie')[0]);
pie.draw(data, options_pie);
}
assets/js/charts/google/pies/pie_3d.js
+52
View File
@@ -0,0 +1,52 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - 3D pie
*
* Google Visualization 3D pie chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// 3D pie chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawPie3d);
// Chart settings
function drawPie3d() {
// 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($('#google-pie-3d')[0]);
pie_3d.draw(data, options_pie_3d);
}
assets/js/charts/google/pies/pie_diff_border.js
+67
View File
@@ -0,0 +1,67 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - diff pie
*
* Google Visualization diff pie chart with border factor demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Diff pie chart
// ------------------------------
// Initialize chart
google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
// Chart settings
function drawChart() {
// 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($('#google-pie-diff-border')[0]);
// Set data
var diffData = chartRadius.computeDiff(oldData, newData);
// Draw our chart, passing in some options
chartRadius.draw(diffData, options);
}
assets/js/charts/google/pies/pie_diff_invert.js
+67
View File
@@ -0,0 +1,67 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - diff pie
*
* Google Visualization diff pie chart with inverted behaviour demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Diff pie chart
// ------------------------------
// Initialize chart
google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
// Chart settings
function drawChart() {
// 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($('#google-pie-diff-invert')[0]);
// Set data
var diffData = chartRadius.computeDiff(oldData, newData);
// Draw our chart, passing in some options
chartRadius.draw(diffData, options);
}
assets/js/charts/google/pies/pie_diff_opacity.js
+67
View File
@@ -0,0 +1,67 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - diff pie
*
* Google Visualization diff pie chart with transparency demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Diff pie chart
// ------------------------------
// Initialize chart
google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
// Chart settings
function drawChart() {
// 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($('#google-pie-diff-opacity')[0]);
// Set data
var diffData = chartRadius.computeDiff(oldData, newData);
// Draw our chart, passing in some options
chartRadius.draw(diffData, options);
}
assets/js/charts/google/pies/pie_diff_radius.js
+67
View File
@@ -0,0 +1,67 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - diff pie
*
* Google Visualization diff pie chart with radius factor demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Diff pie chart
// ------------------------------
// Initialize chart
google.load("visualization", '1.1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
// Chart settings
function drawChart() {
// 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($('#google-pie-diff-radius')[0]);
// Set data
var diffData = chartRadius.computeDiff(oldData, newData);
// Draw our chart, passing in some options
chartRadius.draw(diffData, options);
}
assets/js/charts/google/pies/pie_exploded.js
+66
View File
@@ -0,0 +1,66 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - sliced pie
*
* Google Visualization sliced pie chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Sliced pie chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawExplodedPie);
// Chart settings
function drawExplodedPie() {
// 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($('#google-pie-exploded')[0]);
pie_exploded.draw(data, options);
}
assets/js/charts/google/pies/pie_rotate.js
+52
View File
@@ -0,0 +1,52 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - rotated pie
*
* Google Visualization rotated pie chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Rotated pie chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawPieRotated);
// Chart settings
function drawPieRotated() {
// 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($('#google-pie-rotate')[0]);
pie_rotate.draw(data, options_pie_rotate);
}
assets/js/charts/google/scatter/scatter.js
+102
View File
@@ -0,0 +1,102 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - scatter
*
* Google Visualization scatter chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Scatter chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawScatter);
// Chart settings
function drawScatter() {
// 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: '90%',
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($('#google-scatter')[0]);
scatter.draw(data, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawScatter();
}
});
assets/js/charts/google/scatter/scatter_diff.js
+129
View File
@@ -0,0 +1,129 @@
/* ------------------------------------------------------------------------------
*
* # Google Visualization - diff scatter
*
* Google Visualization diff scatter chart demonstration
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
// Diff scatter chart
// ------------------------------
// Initialize chart
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawScatterDiff);
// Chart settings
function drawScatterDiff() {
// 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: '90%',
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($('#google-scatter-diff')[0]);
// Set data
var diffData = chartOldOpacity.computeDiff(oldData, newData);
// Draw our chart, passing in some options
chartOldOpacity.draw(diffData, options);
}
// Resize chart
// ------------------------------
$(function () {
// Resize chart on sidebar width change and window resize
$(window).on('resize', resize);
$(".sidebar-control").on('click', resize);
// Resize function
function resize() {
drawScatterDiff();
}
});