352 lines
7.8 KiB
JavaScript
352 lines
7.8 KiB
JavaScript
$(function() {
|
|
/* ChartJS
|
|
* -------
|
|
* Data and config for chartjs
|
|
*/
|
|
'use strict';
|
|
var data = {
|
|
labels: ["2013", "2014", "2014", "2015", "2016", "2017"],
|
|
datasets: [{
|
|
label: '# of Votes',
|
|
data: [10, 19, 3, 5, 2, 3],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255,99,132,1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)'
|
|
],
|
|
borderWidth: 1,
|
|
fill: false
|
|
}]
|
|
};
|
|
var multiLineData = {
|
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
datasets: [{
|
|
label: 'Dataset 1',
|
|
data: [12, 19, 3, 5, 2, 3],
|
|
borderColor: [
|
|
'#587ce4'
|
|
],
|
|
borderWidth: 2,
|
|
fill: false
|
|
},
|
|
{
|
|
label: 'Dataset 2',
|
|
data: [5, 23, 7, 12, 42, 23],
|
|
borderColor: [
|
|
'#ede190'
|
|
],
|
|
borderWidth: 2,
|
|
fill: false
|
|
},
|
|
{
|
|
label: 'Dataset 3',
|
|
data: [15, 10, 21, 32, 12, 33],
|
|
borderColor: [
|
|
'#f44252'
|
|
],
|
|
borderWidth: 2,
|
|
fill: false
|
|
}
|
|
]
|
|
};
|
|
var options = {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
|
|
};
|
|
var doughnutPieData = {
|
|
datasets: [{
|
|
data: [30, 40, 30],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.5)',
|
|
'rgba(54, 162, 235, 0.5)',
|
|
'rgba(255, 206, 86, 0.5)',
|
|
'rgba(75, 192, 192, 0.5)',
|
|
'rgba(153, 102, 255, 0.5)',
|
|
'rgba(255, 159, 64, 0.5)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255,99,132,1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)'
|
|
],
|
|
}],
|
|
|
|
// These labels appear in the legend and in the tooltips when hovering different arcs
|
|
labels: [
|
|
'Pink',
|
|
'Blue',
|
|
'Yellow',
|
|
]
|
|
};
|
|
var doughnutPieOptions = {
|
|
responsive: true,
|
|
animation: {
|
|
animateScale: true,
|
|
animateRotate: true
|
|
}
|
|
};
|
|
var areaData = {
|
|
labels: ["2013", "2014", "2015", "2016", "2017"],
|
|
datasets: [{
|
|
label: '# of Votes',
|
|
data: [12, 19, 3, 5, 2, 3],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)',
|
|
'rgba(54, 162, 235, 0.2)',
|
|
'rgba(255, 206, 86, 0.2)',
|
|
'rgba(75, 192, 192, 0.2)',
|
|
'rgba(153, 102, 255, 0.2)',
|
|
'rgba(255, 159, 64, 0.2)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255,99,132,1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)',
|
|
'rgba(255, 159, 64, 1)'
|
|
],
|
|
borderWidth: 1,
|
|
fill: true, // 3: no fill
|
|
}]
|
|
};
|
|
|
|
var areaOptions = {
|
|
plugins: {
|
|
filler: {
|
|
propagate: true
|
|
}
|
|
}
|
|
}
|
|
|
|
var multiAreaData = {
|
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
datasets: [{
|
|
label: 'Facebook',
|
|
data: [8, 11, 13, 15, 12, 13, 16, 15, 13, 19, 11, 14],
|
|
borderColor: ['rgba(255, 99, 132, 0.5)'],
|
|
backgroundColor: ['rgba(255, 99, 132, 0.5)'],
|
|
borderWidth: 1,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Twitter',
|
|
data: [7, 17, 12, 16, 14, 18, 16, 12, 15, 11, 13, 9],
|
|
borderColor: ['rgba(54, 162, 235, 0.5)'],
|
|
backgroundColor: ['rgba(54, 162, 235, 0.5)'],
|
|
borderWidth: 1,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Linkedin',
|
|
data: [6, 14, 16, 20, 12, 18, 15, 12, 17, 19, 15, 11],
|
|
borderColor: ['rgba(255, 206, 86, 0.5)'],
|
|
backgroundColor: ['rgba(255, 206, 86, 0.5)'],
|
|
borderWidth: 1,
|
|
fill: true
|
|
}
|
|
]
|
|
};
|
|
|
|
var multiAreaOptions = {
|
|
plugins: {
|
|
filler: {
|
|
propagate: true
|
|
}
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
|
|
var scatterChartData = {
|
|
datasets: [{
|
|
label: 'First Dataset',
|
|
data: [{
|
|
x: -10,
|
|
y: 0
|
|
},
|
|
{
|
|
x: 0,
|
|
y: 3
|
|
},
|
|
{
|
|
x: -25,
|
|
y: 5
|
|
},
|
|
{
|
|
x: 40,
|
|
y: 5
|
|
}
|
|
],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.2)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255,99,132,1)'
|
|
],
|
|
borderWidth: 1
|
|
},
|
|
{
|
|
label: 'Second Dataset',
|
|
data: [{
|
|
x: 10,
|
|
y: 5
|
|
},
|
|
{
|
|
x: 20,
|
|
y: -30
|
|
},
|
|
{
|
|
x: -25,
|
|
y: 15
|
|
},
|
|
{
|
|
x: -10,
|
|
y: 5
|
|
}
|
|
],
|
|
backgroundColor: [
|
|
'rgba(54, 162, 235, 0.2)',
|
|
],
|
|
borderColor: [
|
|
'rgba(54, 162, 235, 1)',
|
|
],
|
|
borderWidth: 1
|
|
}
|
|
]
|
|
}
|
|
|
|
var scatterChartOptions = {
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'linear',
|
|
position: 'bottom'
|
|
}]
|
|
}
|
|
}
|
|
// Get context with jQuery - using jQuery's .get() method.
|
|
if ($("#barChart").length) {
|
|
var barChartCanvas = $("#barChart").get(0).getContext("2d");
|
|
// This will get the first returned node in the jQuery collection.
|
|
var barChart = new Chart(barChartCanvas, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: options
|
|
});
|
|
}
|
|
|
|
if ($("#lineChart").length) {
|
|
var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
|
|
var lineChart = new Chart(lineChartCanvas, {
|
|
type: 'line',
|
|
data: data,
|
|
options: options
|
|
});
|
|
}
|
|
|
|
if ($("#linechart-multi").length) {
|
|
var multiLineCanvas = $("#linechart-multi").get(0).getContext("2d");
|
|
var lineChart = new Chart(multiLineCanvas, {
|
|
type: 'line',
|
|
data: multiLineData,
|
|
options: options
|
|
});
|
|
}
|
|
|
|
if ($("#areachart-multi").length) {
|
|
var multiAreaCanvas = $("#areachart-multi").get(0).getContext("2d");
|
|
var multiAreaChart = new Chart(multiAreaCanvas, {
|
|
type: 'line',
|
|
data: multiAreaData,
|
|
options: multiAreaOptions
|
|
});
|
|
}
|
|
|
|
if ($("#doughnutChart").length) {
|
|
var doughnutChartCanvas = $("#doughnutChart").get(0).getContext("2d");
|
|
var doughnutChart = new Chart(doughnutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: doughnutPieData,
|
|
options: doughnutPieOptions
|
|
});
|
|
}
|
|
|
|
if ($("#pieChart").length) {
|
|
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
|
|
var pieChart = new Chart(pieChartCanvas, {
|
|
type: 'pie',
|
|
data: doughnutPieData,
|
|
options: doughnutPieOptions
|
|
});
|
|
}
|
|
|
|
if ($("#areaChart").length) {
|
|
var areaChartCanvas = $("#areaChart").get(0).getContext("2d");
|
|
var areaChart = new Chart(areaChartCanvas, {
|
|
type: 'line',
|
|
data: areaData,
|
|
options: areaOptions
|
|
});
|
|
}
|
|
|
|
if ($("#scatterChart").length) {
|
|
var scatterChartCanvas = $("#scatterChart").get(0).getContext("2d");
|
|
var scatterChart = new Chart(scatterChartCanvas, {
|
|
type: 'scatter',
|
|
data: scatterChartData,
|
|
options: scatterChartOptions
|
|
});
|
|
}
|
|
|
|
if ($("#browserTrafficChart").length) {
|
|
var doughnutChartCanvas = $("#browserTrafficChart").get(0).getContext("2d");
|
|
var doughnutChart = new Chart(doughnutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: browserTrafficData,
|
|
options: doughnutPieOptions
|
|
});
|
|
}
|
|
}); |