charts.js
5.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
$(function () {
/**** Radar Charts: ChartJs ****/
var radarChartData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65,59,90,81,56,55,40]
},
{
label: "My Second dataset",
fillColor: "rgba(49, 157, 181,0.2)",
strokeColor: "#319DB5",
pointColor: "#319DB5",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "#319DB5",
data: [28,48,40,19,96,27,100]
}
]
};
window.myRadar = new Chart(document.getElementById("radar-chart").getContext("2d")).Radar(radarChartData, {
responsive: true,
tooltipCornerRadius: 0
});
/**** Line Charts: ChartJs ****/
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(49, 157, 181,0.2)",
strokeColor : "#319DB5",
pointColor : "#319DB5",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "#319DB5",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
tooltipCornerRadius: 0
});
/**** Pie Chart : ChartJs ****/
var pieData = [
{value: 300, color:"rgba(54, 173, 199,0.9)", highlight: "rgba(54, 173, 199,1)", label: "Blue"},
{value: 40, color: "rgba(201, 98, 95,0.9)", highlight: "rgba(201, 98, 95,1)", label: "Red"},
{value: 100,color: "rgba(255, 200, 112,0.9)", highlight: "rgba(255, 200, 112,1)", label: "Yellow"},
{value: 50, color: "rgba(27, 184, 152,0.9)", highlight: "rgba(27, 184, 152,1)", label: "Green"},
{value: 120, color: "rgba(97, 103, 116,0.9)", highlight: "rgba(97, 103, 116,1)", label: "Dark Grey"}
];
var pieData2 = [
{value: 80, color: "rgba(27, 184, 152,0.9)", highlight: "rgba(27, 184, 152,1)", label: "Green"},
{value: 120,color: "rgba(255, 200, 112,0.9)", highlight: "rgba(255, 200, 112,1)", label: "Yellow"},
{value: 80, color:"rgba(54, 173, 199,0.9)", highlight: "rgba(54, 173, 199,1)", label: "Blue"},
{value: 60, color: "rgba(201, 98, 95,0.9)", highlight: "rgba(201, 98, 95,1)", label: "Red"},
{value: 60, color: "rgba(97, 103, 116,0.9)", highlight: "rgba(97, 103, 116,1)", label: "Dark Grey"}
];
var ctx = document.getElementById("pie-chart").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData, {
tooltipCornerRadius: 0
});
var ctx2 = document.getElementById("pie-chart2").getContext("2d");
window.myPie = new Chart(ctx2).Pie(pieData2, {
tooltipCornerRadius: 0
});
/**** Polar Chart : ChartJs ****/
var polarData = [
{value: 80, color: "rgba(27, 184, 152,0.9)", highlight: "rgba(27, 184, 152,1)", label: "Green"},
{value: 120,color: "rgba(255, 200, 112,0.9)", highlight: "rgba(255, 200, 112,1)", label: "Yellow"},
{value: 80, color:"rgba(54, 173, 199,0.9)", highlight: "rgba(54, 173, 199,1)", label: "Blue"},
{value: 60, color: "rgba(201, 98, 95,0.9)", highlight: "rgba(201, 98, 95,1)", label: "Red"},
{value: 60, color: "rgba(97, 103, 116,0.9)", highlight: "rgba(97, 103, 116,1)", label: "Dark Grey"}
];
var polarData2 = [
{value: 300, color:"rgba(54, 173, 199,0.9)", highlight: "rgba(54, 173, 199,1)", label: "Blue"},
{value: 40, color: "rgba(201, 98, 95,0.9)", highlight: "rgba(201, 98, 95,1)", label: "Red"},
{value: 100,color: "rgba(255, 200, 112,0.9)", highlight: "rgba(255, 200, 112,1)", label: "Yellow"},
{value: 50, color: "rgba(27, 184, 152,0.9)", highlight: "rgba(27, 184, 152,1)", label: "Green"},
{value: 120, color: "rgba(97, 103, 116,0.9)", highlight: "rgba(97, 103, 116,1)", label: "Dark Grey"}
];
var ctx = document.getElementById("polar-chart").getContext("2d");
window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
responsive:true,
tooltipCornerRadius: 0
});
var ctx2 = document.getElementById("polar-chart2").getContext("2d");
window.myPolarArea = new Chart(ctx2).PolarArea(polarData2, {
responsive:true,
tooltipCornerRadius: 0
});
});