fistcommit
This commit is contained in:
Kicap
256
assets/scripts/chart.chartjs.init.js
Normal file
256
assets/scripts/chart.chartjs.init.js
Normal file
@ -0,0 +1,256 @@
|
||||
/**
|
||||
* 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);
|
||||
Reference in New Issue
Block a user