traffic-counter/assets/scripts/chart.chartjs.init.js

256 lines
6.8 KiB
JavaScript

/**
* Theme: Ninja Admin Template
* Author: NinjaTeam
* Module/App: Chartist-Chart
*/
(function($) {
"use strict";
var ChartJs = {},
randomScalingFactor = function() {
return Math.round(Math.random() * 15) + 5;
};
$(document).ready(function(){
if ($('#bar-chartjs-chart').length) ChartJs.bar('bar-chartjs-chart','top','bar');
if ($('#horizontal-bar-chartjs-chart').length) ChartJs.bar('horizontal-bar-chartjs-chart','right','horizontalBar');
if ($('#line-chartjs-chart').length) ChartJs.line('line-chartjs-chart',false);
if ($('#area-chartjs-chart').length) ChartJs.line('area-chartjs-chart',true);
if ($('#pie-chartjs-chart').length) ChartJs.pie('pie-chartjs-chart','pie');
if ($('#donut-chartjs-chart').length) ChartJs.pie('donut-chartjs-chart','doughnut');
if ($('#polar-chartjs-chart').length) ChartJs.polar('polar-chartjs-chart');
if ($('#radar-chartjs-chart').length) ChartJs.radar('radar-chartjs-chart');
return false;
});
ChartJs = {
bar: function(container,position,type){
var barChartData = {
labels: ["January", "February", "March", "April"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "rgba(249,200,81,0.3)",
borderColor: "rgb(249, 200, 81)",
borderWidth: 1,
hoverBackgroundColor: "rgba(249,200,81,0.6)",
hoverBorderColor: "rgb(249, 200, 81)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: 'Dataset 2',
backgroundColor: "rgba(127, 193, 252, 0.3)",
borderColor: "#7fc1fc",
borderWidth: 1,
hoverBackgroundColor: "rgba(127, 193, 252, 0.6)",
hoverBorderColor: "#7fc1fc",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: 'Dataset 3',
backgroundColor: "rgba(245,112,122,0.3)",
borderColor: "#f5707a",
borderWidth: 1,
hoverBackgroundColor: "rgba(245,112,122,0.6)",
hoverBorderColor: "#f5707a",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
};
var ctx = document.getElementById(container).getContext("2d"),
skip = (type == "bar") ? "bottom" : "left" ;
new Chart(ctx, {
type: type,
data: barChartData,
options: {
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each bar to be 2px wide and green
hover: {
mode: 'label'
},
responsive: true,
legend: {
position: position,
},
scales: {
xAxes: [{
ticks: {
beginAtZero:true
},
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}],
},
}
});
return false;
},
line: function(container,fill){
var lineData = {
labels: ["0", "1", "2", "3","4","5","6","7","8","9","10"],
datasets: [{
label: 'Series 1',
fill: fill,
borderColor: "rgba(245,112,122,1)",
pointBackgroundColor: "rgb(245,112,122)",
backgroundColor: "rgba(245,112,122,0.3)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(),randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
};
var ctx = document.getElementById(container).getContext("2d");
new Chart(ctx, {
type: 'line',
data: lineData,
options: {
hover: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
ticks: {
beginAtZero:true
}
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
return false;
},
pie : function(container,type){
var ctx = document.getElementById(container).getContext("2d"),
config = {
type: type,
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
"#f9c851",
"#3ac9d6",
"#ebeff2",
],
hoverBackgroundColor: [
"#f9c851",
"#3ac9d6",
"#ebeff2"
],
hoverBorderColor: "#fff"
}],
labels: [
"Red",
"Green",
"Yellow",
]
},
options: {
responsive: true
}
};
new Chart(ctx, config);
return false;
},
polar: function(container){
var ctx = document.getElementById(container).getContext("2d"),
config = {
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
"#f5707a",
"#188ae2",
"#4bd396",
"#8d6e63",
],
label: 'My dataset' // for legend
}],
labels: [
"Red",
"Blue",
"Green",
"Grey",
]
},
options: {
responsive: true,
legend: {
position: 'top',
},
scale: {
ticks: {
beginAtZero: true
},
reverse: false
},
animation: {
animateRotate: false,
animateScale: true
}
}
};
new Chart.PolarArea(ctx, config);
return false;
},
radar: function(container){
var ctx = document.getElementById(container).getContext("2d"),
config = {
type: 'radar',
data: {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "Peter",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: "John",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
},]
},
options: {
legend: {
position: 'top',
},
scale: {
reverse: false,
gridLines: {
color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
},
ticks: {
beginAtZero: true
}
}
}
};
new Chart(ctx, config);
return false;
}
}
})(jQuery);