109 lines
3.3 KiB
JavaScript
Executable File
109 lines
3.3 KiB
JavaScript
Executable File
$(function() {
|
|
// Line Chart example
|
|
|
|
var lineData = {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [
|
|
{
|
|
label: "Data 1",
|
|
backgroundColor: 'rgba(52,152,219, 0.9)',
|
|
borderColor: 'rgba(52,152,219, 1)',
|
|
pointBorderColor: "#fff",
|
|
data: [28, 48, 40, 19, 86, 27, 90],
|
|
},{
|
|
label: "Data 2",
|
|
backgroundColor: 'rgba(213,217,219, 0.9)',
|
|
borderColor: 'rgba(213,217,219, 1)',
|
|
pointBorderColor: "#fff",
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
|
}
|
|
]
|
|
};
|
|
var lineOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
};
|
|
var ctx = document.getElementById("line_chart").getContext("2d");
|
|
new Chart(ctx, {type: 'line', data: lineData, options:lineOptions});
|
|
|
|
// Bar Chart example
|
|
|
|
var barData = {
|
|
labels: ["Sunday", "Munday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
|
datasets: [
|
|
{
|
|
label: "Data 1",
|
|
backgroundColor:'#DADDE0',
|
|
data: [45, 80, 58, 74, 54, 59, 40]
|
|
},
|
|
{
|
|
label: "Data 2",
|
|
backgroundColor: '#2ecc71',
|
|
borderColor: "#fff",
|
|
data: [29, 48, 40, 19, 78, 31, 85]
|
|
}
|
|
]
|
|
};
|
|
var barOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
};
|
|
|
|
var ctx = document.getElementById("bar_chart").getContext("2d");
|
|
new Chart(ctx, {type: 'bar', data: barData, options:barOptions});
|
|
|
|
// doughnut chart example
|
|
|
|
var doughnutData = {
|
|
labels: ["App","Software","Laptop" ],
|
|
datasets: [{
|
|
data: [200,40,60],
|
|
backgroundColor: ["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]
|
|
}]
|
|
} ;
|
|
|
|
|
|
var doughnutOptions = {
|
|
responsive: true
|
|
};
|
|
|
|
|
|
var ctx4 = document.getElementById("doughnut_chart").getContext("2d");
|
|
new Chart(ctx4, {type: 'doughnut', data: doughnutData, options:doughnutOptions});
|
|
|
|
// Radar chart example
|
|
|
|
var radarData = {
|
|
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
|
datasets: [{
|
|
label: "My First Dataset",
|
|
data: [65, 59, 90, 81, 56, 55, 40],
|
|
fill: true,
|
|
backgroundColor: "rgba(255, 99, 132, 0.2)",
|
|
borderColor: "rgb(255, 99, 132)",
|
|
pointBackgroundColor: "rgb(255, 99, 132)",
|
|
pointBorderColor: "#fff",
|
|
pointHoverBackgroundColor: "#fff",
|
|
pointHoverBorderColor: "rgb(255, 99, 132)"
|
|
}, {
|
|
label: "My Second Dataset",
|
|
data: [28, 48, 40, 19, 96, 27, 100],
|
|
fill: true,
|
|
backgroundColor: "rgba(54, 162, 235, 0.2)",
|
|
borderColor: "rgb(54, 162, 235)",
|
|
pointBackgroundColor: "rgb(54, 162, 235)",
|
|
pointBorderColor: "#fff",
|
|
pointHoverBackgroundColor: "#fff",
|
|
pointHoverBorderColor: "rgb(54, 162, 235)"
|
|
}]
|
|
};
|
|
|
|
var radarOptions = {
|
|
responsive: true
|
|
};
|
|
|
|
var ctx5 = document.getElementById("radar_chart").getContext("2d");
|
|
new Chart(ctx5, {type: 'radar', data: radarData, options:radarOptions});
|
|
|
|
});
|