charts.js
6.13 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
123
124
125
126
127
angular.module('newApp').factory('chartService', function () {
function init() {
/**** 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
});
};
return {
init:init
}
});