382 lines
10 KiB
JavaScript
382 lines
10 KiB
JavaScript
'use strict';
|
|
$(document).ready(function() {
|
|
setTimeout(function() {
|
|
// [ bar-simple ] chart start
|
|
Morris.Bar({
|
|
element: 'morris-bar-chart',
|
|
data: [{
|
|
y: '2008',
|
|
a: 50,
|
|
b: 40,
|
|
c: 35,
|
|
},
|
|
{
|
|
y: '2009',
|
|
a: 75,
|
|
b: 65,
|
|
c: 60,
|
|
},
|
|
{
|
|
y: '2010',
|
|
a: 50,
|
|
b: 40,
|
|
c: 55,
|
|
},
|
|
{
|
|
y: '2011',
|
|
a: 75,
|
|
b: 65,
|
|
c: 85,
|
|
},
|
|
{
|
|
y: '2012',
|
|
a: 100,
|
|
b: 90,
|
|
c: 40,
|
|
}
|
|
],
|
|
xkey: 'y',
|
|
barSizeRatio: 0.70,
|
|
barGap: 3,
|
|
resize: true,
|
|
responsive: true,
|
|
ykeys: ['a', 'b', 'c'],
|
|
labels: ['Bar 1', 'Bar 2', 'Bar 3'],
|
|
barColors: ["#19BCBF", "#463699", "#13bd8a"]
|
|
});
|
|
// [ bar-simple ] chart end
|
|
|
|
// [ bar-stacked ] chart start
|
|
Morris.Bar({
|
|
element: 'morris-bar-stacked-chart',
|
|
data: [{
|
|
y: '2008',
|
|
a: 50,
|
|
b: 40,
|
|
c: 35,
|
|
},
|
|
{
|
|
y: '2009',
|
|
a: 75,
|
|
b: 65,
|
|
c: 60,
|
|
},
|
|
{
|
|
y: '2010',
|
|
a: 50,
|
|
b: 40,
|
|
c: 55,
|
|
},
|
|
{
|
|
y: '2011',
|
|
a: 75,
|
|
b: 65,
|
|
c: 85,
|
|
},
|
|
{
|
|
y: '2012',
|
|
a: 100,
|
|
b: 90,
|
|
c: 40,
|
|
}
|
|
],
|
|
xkey: 'y',
|
|
stacked: true,
|
|
barSizeRatio: 0.50,
|
|
barGap: 3,
|
|
resize: true,
|
|
responsive: true,
|
|
ykeys: ['a', 'b', 'c'],
|
|
labels: ['Bar 1', 'Bar 2', 'Bar 3'],
|
|
barColors: ["#FF9764", "#FF425C", "#19BCBF"]
|
|
});
|
|
// [ bar-stacked ] chart end
|
|
|
|
// [ area-angle-chart ] start
|
|
Morris.Area({
|
|
element: 'morris-area-chart',
|
|
data: [{
|
|
y: '2006',
|
|
a: 0,
|
|
b: 0
|
|
},
|
|
{
|
|
y: '2007',
|
|
a: 130,
|
|
b: 100
|
|
},
|
|
{
|
|
y: '2008',
|
|
a: 80,
|
|
b: 60
|
|
},
|
|
{
|
|
y: '2009',
|
|
a: 70,
|
|
b: 200
|
|
},
|
|
{
|
|
y: '2010',
|
|
a: 220,
|
|
b: 150
|
|
},
|
|
{
|
|
y: '2011',
|
|
a: 105,
|
|
b: 90
|
|
},
|
|
{
|
|
y: '2012',
|
|
a: 250,
|
|
b: 150
|
|
}
|
|
],
|
|
xkey: 'y',
|
|
ykeys: ['a', 'b'],
|
|
labels: ['Series A', 'Series B'],
|
|
pointSize: 0,
|
|
fillOpacity: 0.8,
|
|
pointStrokeColors: ['#b4becb', '#463699'],
|
|
behaveLikeLine: true,
|
|
gridLineColor: '#e0e0e0',
|
|
lineWidth: 0,
|
|
smooth: false,
|
|
hideHover: 'auto',
|
|
responsive: true,
|
|
lineColors: ['#b4becb', '#463699'],
|
|
resize: true
|
|
});
|
|
// [ area-angle-chart ] end
|
|
|
|
// [ area-smooth-chart ] start
|
|
Morris.Area({
|
|
element: 'morris-area-curved-chart',
|
|
data: [{
|
|
period: '2010',
|
|
iphone: 0,
|
|
ipad: 0,
|
|
itouch: 0
|
|
}, {
|
|
period: '2011',
|
|
iphone: 50,
|
|
ipad: 15,
|
|
itouch: 5
|
|
}, {
|
|
period: '2012',
|
|
iphone: 20,
|
|
ipad: 50,
|
|
itouch: 65
|
|
}, {
|
|
period: '2013',
|
|
iphone: 60,
|
|
ipad: 12,
|
|
itouch: 7
|
|
}, {
|
|
period: '2014',
|
|
iphone: 30,
|
|
ipad: 20,
|
|
itouch: 120
|
|
}, {
|
|
period: '2015',
|
|
iphone: 25,
|
|
ipad: 80,
|
|
itouch: 40
|
|
}, {
|
|
period: '2016',
|
|
iphone: 10,
|
|
ipad: 10,
|
|
itouch: 10
|
|
}],
|
|
lineColors: ['#FF425C', '#463699', '#19BCBF'],
|
|
xkey: 'period',
|
|
ykeys: ['iphone', 'ipad', 'itouch'],
|
|
labels: ['Site A', 'Site B', 'Site C'],
|
|
pointSize: 0,
|
|
lineWidth: 0,
|
|
resize: true,
|
|
fillOpacity: 0.9,
|
|
responsive: true,
|
|
behaveLikeLine: true,
|
|
gridLineColor: '#d2d2d2',
|
|
hideHover: 'auto'
|
|
});
|
|
// [ area-smooth-chart ] end
|
|
|
|
// [ line-angle-chart ] Start
|
|
Morris.Line({
|
|
element: 'morris-line-chart',
|
|
data: [{
|
|
y: '2006',
|
|
a: 20,
|
|
b: 10
|
|
},
|
|
{
|
|
y: '2007',
|
|
a: 55,
|
|
b: 45
|
|
},
|
|
{
|
|
y: '2008',
|
|
a: 45,
|
|
b: 35
|
|
},
|
|
{
|
|
y: '2009',
|
|
a: 75,
|
|
b: 65
|
|
},
|
|
{
|
|
y: '2010',
|
|
a: 50,
|
|
b: 40
|
|
},
|
|
{
|
|
y: '2011',
|
|
a: 75,
|
|
b: 65
|
|
},
|
|
{
|
|
y: '2012',
|
|
a: 100,
|
|
b: 90
|
|
}
|
|
],
|
|
xkey: 'y',
|
|
redraw: true,
|
|
resize: true,
|
|
smooth: false,
|
|
ykeys: ['a', 'b'],
|
|
hideHover: 'auto',
|
|
responsive: true,
|
|
labels: ['Series A', 'Series B'],
|
|
lineColors: ['#463699', '#19BCBF']
|
|
});
|
|
// [ line-angle-chart ] end
|
|
|
|
// [ line-smooth-chart ] start
|
|
Morris.Line({
|
|
element: 'morris-line-smooth-chart',
|
|
data: [{
|
|
y: '2006',
|
|
a: 100,
|
|
b: 90
|
|
},
|
|
{
|
|
y: '2007',
|
|
a: 75,
|
|
b: 65
|
|
},
|
|
{
|
|
y: '2008',
|
|
a: 50,
|
|
b: 40
|
|
},
|
|
{
|
|
y: '2009',
|
|
a: 75,
|
|
b: 65
|
|
},
|
|
{
|
|
y: '2010',
|
|
a: 50,
|
|
b: 40
|
|
},
|
|
{
|
|
y: '2011',
|
|
a: 75,
|
|
b: 65
|
|
},
|
|
{
|
|
y: '2012',
|
|
a: 100,
|
|
b: 90
|
|
}
|
|
],
|
|
xkey: 'y',
|
|
redraw: true,
|
|
resize: true,
|
|
ykeys: ['a', 'b'],
|
|
hideHover: 'auto',
|
|
responsive: true,
|
|
labels: ['Series A', 'Series B'],
|
|
lineColors: ['#13bd8a', '#FF425C']
|
|
});
|
|
// [ line-smooth-chart ] end
|
|
|
|
// [ line-real-chart ] start
|
|
var nReloads = 0;
|
|
|
|
function data(offset) {
|
|
var ret = [];
|
|
for (var x = 0; x <= 360; x += 10) {
|
|
var v = (offset + x) % 360;
|
|
ret.push({
|
|
x: x,
|
|
y: Math.cos(Math.PI * v / 90).toFixed(4),
|
|
z: Math.cos(Math.PI * v / 180).toFixed(4),
|
|
a: Math.sin(Math.PI * v / 90).toFixed(4)
|
|
});
|
|
}
|
|
return ret;
|
|
}
|
|
var graph_real = Morris.Line({
|
|
element: 'morris-line-realtime-chart',
|
|
data: data(0),
|
|
resize: true,
|
|
xkey: 'x',
|
|
ykeys: ['y', 'z', 'a'],
|
|
labels: ['line 1', 'line 2', 'line 3'],
|
|
parseTime: false,
|
|
ymin: -1.0,
|
|
ymax: 1.0,
|
|
lineColors: ['#FF9764', '#FF425C', '#19BCBF'],
|
|
pointSize: 4,
|
|
responsive: true,
|
|
pointFillColors: ['#fff', '#fff', '#fff'],
|
|
pointStrokeColors: ['#FF9764', '#FF425C', '#19BCBF'],
|
|
lineWidth: 2,
|
|
hideHover: true
|
|
});
|
|
|
|
function update() {
|
|
nReloads++;
|
|
graph_real.setData(data(5 * nReloads));
|
|
}
|
|
setInterval(update, 100);
|
|
// [ line-real-chart ] end
|
|
|
|
// [ Donut-chart ] Start
|
|
var graph = Morris.Donut({
|
|
element: 'morris-donut-chart',
|
|
data: [{
|
|
value: 60,
|
|
label: 'Data 1'
|
|
},
|
|
{
|
|
value: 20,
|
|
label: 'Data 1'
|
|
},
|
|
{
|
|
value: 10,
|
|
label: 'Data 1'
|
|
},
|
|
{
|
|
value: 5,
|
|
label: 'Data 1'
|
|
}
|
|
],
|
|
colors: [
|
|
'#19BCBF',
|
|
'#463699',
|
|
'#FF425C',
|
|
'#FF9764',
|
|
],
|
|
resize: true,
|
|
formatter: function(x) {
|
|
return "val : " + x
|
|
}
|
|
});
|
|
}, 700);
|
|
// [ Donut-chart ] end
|
|
});
|