// Morris.js Charts sample data for SB Admin template
$(function() {
// Area Chart
Morris.Area({
element: 'morris-area-chart',
data: [{
period: '2010 Q1',
iphone: 2666,
ipad: null,
itouch: 2647
}, {
period: '2010 Q2',
iphone: 2778,
ipad: 2294,
itouch: 2441
}, {
period: '2010 Q3',
iphone: 4912,
ipad: 1969,
itouch: 2501
}, {
period: '2010 Q4',
iphone: 3767,
ipad: 3597,
itouch: 5689
}, {
period: '2011 Q1',
iphone: 6810,
ipad: 1914,
itouch: 2293
}, {
period: '2011 Q2',
iphone: 5670,
ipad: 4293,
itouch: 1881
}, {
period: '2011 Q3',
iphone: 4820,
ipad: 3795,
itouch: 1588
}, {
period: '2011 Q4',
iphone: 15073,
ipad: 5967,
itouch: 5175
}, {
period: '2012 Q1',
iphone: 10687,
ipad: 4460,
itouch: 2028
}, {
period: '2012 Q2',
iphone: 8432,
ipad: 5713,
itouch: 1791
}],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['iPhone', 'iPad', 'iPod Touch'],
pointSize: 2,
hideHover: 'auto',
resize: true
});
// Donut Chart
Morris.Donut({
element: 'morris-donut-chart',
data: [{
label: "Download Sales",
value: 12
}, {
label: "In-Store Sales",
value: 30
}, {
label: "Mail-Order Sales",
value: 20
}],
resize: true
});
// Line Chart
Morris.Line({
// ID of the element in which to draw the chart.
element: 'morris-line-chart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [{
d: '2012-10-01',
visits: 802
}, {
d: '2012-10-02',
visits: 783
}, {
d: '2012-10-03',
visits: 820
}, {
d: '2012-10-04',
visits: 839
}, {
d: '2012-10-05',
visits: 792
}, {
d: '2012-10-06',
visits: 859
}, {
d: '2012-10-07',
visits: 790
}, {
d: '2012-10-08',
visits: 1680
}, {
d: '2012-10-09',
visits: 1592
}, {
d: '2012-10-10',
visits: 1420
}, {
d: '2012-10-11',
visits: 882
}, {
d: '2012-10-12',
visits: 889
}, {
d: '2012-10-13',
visits: 819
}, {
d: '2012-10-14',
visits: 849
}, {
d: '2012-10-15',
visits: 870
}, {
d: '2012-10-16',
visits: 1063
}, {
d: '2012-10-17',
visits: 1192
}, {
d: '2012-10-18',
visits: 1224
}, {
d: '2012-10-19',
visits: 1329
}, {
d: '2012-10-20',
visits: 1329
}, {
d: '2012-10-21',
visits: 1239
}, {
d: '2012-10-22',
visits: 1190
}, {
d: '2012-10-23',
visits: 1312
}, {
d: '2012-10-24',
visits: 1293
}, {
d: '2012-10-25',
visits: 1283
}, {
d: '2012-10-26',
visits: 1248
}, {
d: '2012-10-27',
visits: 1323
}, {
d: '2012-10-28',
visits: 1390
}, {
d: '2012-10-29',
visits: 1420
}, {
d: '2012-10-30',
visits: 1529
}, {
d: '2012-10-31',
visits: 1892
}, ],
// The name of the data record attribute that contains x-visitss.
xkey: 'd',
// A list of names of data record attributes that contain y-visitss.
ykeys: ['visits'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Visits'],
// Disables line smoothing
smooth: false,
resize: true
});
// Bar Chart
Morris.Bar({
element: 'morris-bar-chart',
data: [{
device: 'iPhone',
geekbench: 136
}, {
device: 'iPhone 3G',
geekbench: 137
}, {
device: 'iPhone 3GS',
geekbench: 275
}, {
device: 'iPhone 4',
geekbench: 380
}, {
device: 'iPhone 4S',
geekbench: 655
}, {
device: 'iPhone 5',
geekbench: 1571
}],
xkey: 'device',
ykeys: ['geekbench'],
labels: ['Geekbench'],
barRatio: 0.4,
xLabelAngle: 35,
hideHover: 'auto',
resize: true
});
});
|
Download
