mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2025-06-15 04:26:05 +00:00
Initial commit
This commit is contained in:
Khanh Ngo
18
app/static/global/plugins/morris/examples/_template.html
Normal file
18
app/static/global/plugins/morris/examples/_template.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Title</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// Insert code here:
|
||||
// it'll get eval()-ed and prettyprinted.
|
||||
</pre>
|
||||
</body>
|
||||
31
app/static/global/plugins/morris/examples/area-as-line.html
Normal file
31
app/static/global/plugins/morris/examples/area-as-line.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Area charts behaving like line charts</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// Use Morris.Area instead of Morris.Line
|
||||
Morris.Area({
|
||||
element: 'graph',
|
||||
behaveLikeLine: true,
|
||||
data: [
|
||||
{x: '2011 Q1', y: 3, z: 3},
|
||||
{x: '2011 Q2', y: 2, z: 1},
|
||||
{x: '2011 Q3', y: 2, z: 4},
|
||||
{x: '2011 Q4', y: 3, z: 3}
|
||||
],
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z'],
|
||||
labels: ['Y', 'Z']
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
34
app/static/global/plugins/morris/examples/area.html
Normal file
34
app/static/global/plugins/morris/examples/area.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Area charts</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// Use Morris.Area instead of Morris.Line
|
||||
Morris.Area({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{x: '2010 Q4', y: 3, z: 7},
|
||||
{x: '2011 Q1', y: 3, z: 4},
|
||||
{x: '2011 Q2', y: null, z: 1},
|
||||
{x: '2011 Q3', y: 2, z: 5},
|
||||
{x: '2011 Q4', y: 8, z: 2},
|
||||
{x: '2012 Q1', y: 4, z: 4}
|
||||
],
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z'],
|
||||
labels: ['Y', 'Z']
|
||||
}).on('click', function(i, row){
|
||||
console.log(i, row);
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
44
app/static/global/plugins/morris/examples/bar-colors.html
Normal file
44
app/static/global/plugins/morris/examples/bar-colors.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Bar charts</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// Use Morris.Bar
|
||||
Morris.Bar({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{x: '2011 Q1', y: 0},
|
||||
{x: '2011 Q2', y: 1},
|
||||
{x: '2011 Q3', y: 2},
|
||||
{x: '2011 Q4', y: 3},
|
||||
{x: '2012 Q1', y: 4},
|
||||
{x: '2012 Q2', y: 5},
|
||||
{x: '2012 Q3', y: 6},
|
||||
{x: '2012 Q4', y: 7},
|
||||
{x: '2013 Q1', y: 8}
|
||||
],
|
||||
xkey: 'x',
|
||||
ykeys: ['y'],
|
||||
labels: ['Y'],
|
||||
barColors: function (row, series, type) {
|
||||
if (type === 'bar') {
|
||||
var red = Math.ceil(255 * row.y / this.ymax);
|
||||
return 'rgb(' + red + ',0,0)';
|
||||
}
|
||||
else {
|
||||
return '#000';
|
||||
}
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
31
app/static/global/plugins/morris/examples/bar-no-axes.html
Normal file
31
app/static/global/plugins/morris/examples/bar-no-axes.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Bar charts</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// Use Morris.Bar
|
||||
Morris.Bar({
|
||||
element: 'graph',
|
||||
axes: false,
|
||||
data: [
|
||||
{x: '2011 Q1', y: 3, z: 2, a: 3},
|
||||
{x: '2011 Q2', y: 2, z: null, a: 1},
|
||||
{x: '2011 Q3', y: 0, z: 2, a: 4},
|
||||
{x: '2011 Q4', y: 2, z: 4, a: 3}
|
||||
],
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z', 'a'],
|
||||
labels: ['Y', 'Z', 'A']
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
32
app/static/global/plugins/morris/examples/bar.html
Normal file
32
app/static/global/plugins/morris/examples/bar.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Bar charts</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// Use Morris.Bar
|
||||
Morris.Bar({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{x: '2011 Q1', y: 3, z: 2, a: 3},
|
||||
{x: '2011 Q2', y: 2, z: null, a: 1},
|
||||
{x: '2011 Q3', y: 0, z: 2, a: 4},
|
||||
{x: '2011 Q4', y: 2, z: 4, a: 3}
|
||||
],
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z', 'a'],
|
||||
labels: ['Y', 'Z', 'A']
|
||||
}).on('click', function(i, row){
|
||||
console.log(i, row);
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
37
app/static/global/plugins/morris/examples/days.html
Normal file
37
app/static/global/plugins/morris/examples/days.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formatting Dates YYYY-MM-DD</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var day_data = [
|
||||
{"period": "2012-10-01", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: day_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN']
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Decimal Data</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
var decimal_data = [];
|
||||
for (var x = 0; x <= 360; x += 10) {
|
||||
decimal_data.push({
|
||||
x: x,
|
||||
y: 1.5 + 1.5 * Math.sin(Math.PI * x / 180).toFixed(4)
|
||||
});
|
||||
}
|
||||
window.m = Morris.Line({
|
||||
element: 'graph',
|
||||
data: decimal_data,
|
||||
xkey: 'x',
|
||||
ykeys: ['y'],
|
||||
labels: ['sin(x)'],
|
||||
parseTime: false,
|
||||
hoverCallback: function (index, options, default_content, row) {
|
||||
return default_content.replace("sin(x)", "1.5 + 1.5 sin(" + row.x + ")");
|
||||
},
|
||||
xLabelMargin: 10,
|
||||
integerYLabels: true
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Displaying X Labels Diagonally (Bar Chart)</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var day_data = [
|
||||
{"period": "2012-10-01", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
|
||||
];
|
||||
Morris.Bar({
|
||||
element: 'graph',
|
||||
data: day_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN'],
|
||||
xLabelAngle: 60
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Displaying X Labels Diagonally</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var day_data = [
|
||||
{"period": "2012-10-30", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: day_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN'],
|
||||
xLabelAngle: 60
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
38
app/static/global/plugins/morris/examples/donut-colors.html
Normal file
38
app/static/global/plugins/morris/examples/donut-colors.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
<style>
|
||||
body { background:#ccc; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Donut Chart</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
Morris.Donut({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{value: 70, label: 'foo'},
|
||||
{value: 15, label: 'bar'},
|
||||
{value: 10, label: 'baz'},
|
||||
{value: 5, label: 'A really really long label'}
|
||||
],
|
||||
backgroundColor: '#ccc',
|
||||
labelColor: '#060',
|
||||
colors: [
|
||||
'#0BA462',
|
||||
'#39B580',
|
||||
'#67C69D',
|
||||
'#95D7BB'
|
||||
],
|
||||
formatter: function (x) { return x + "%"}
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Donut Chart</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
Morris.Donut({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{value: 70, label: 'foo', formatted: 'at least 70%' },
|
||||
{value: 15, label: 'bar', formatted: 'approx. 15%' },
|
||||
{value: 10, label: 'baz', formatted: 'approx. 10%' },
|
||||
{value: 5, label: 'A really really long label', formatted: 'at most 5%' }
|
||||
],
|
||||
formatter: function (x, data) { return data.formatted; }
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
29
app/static/global/plugins/morris/examples/donut.html
Normal file
29
app/static/global/plugins/morris/examples/donut.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Donut Chart</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
Morris.Donut({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{value: 70, label: 'foo'},
|
||||
{value: 15, label: 'bar'},
|
||||
{value: 10, label: 'baz'},
|
||||
{value: 5, label: 'A really really long label'}
|
||||
],
|
||||
formatter: function (x) { return x + "%"}
|
||||
}).on('click', function(i, row){
|
||||
console.log(i, row);
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
30
app/static/global/plugins/morris/examples/dst.html
Normal file
30
app/static/global/plugins/morris/examples/dst.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Daylight-savings time</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// This crosses a DST boundary in the UK.
|
||||
Morris.Area({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{x: '2013-03-30 22:00:00', y: 3, z: 3},
|
||||
{x: '2013-03-31 00:00:00', y: 2, z: 0},
|
||||
{x: '2013-03-31 02:00:00', y: 0, z: 2},
|
||||
{x: '2013-03-31 04:00:00', y: 4, z: 4}
|
||||
],
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z'],
|
||||
labels: ['Y', 'Z']
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
57
app/static/global/plugins/morris/examples/events.html
Normal file
57
app/static/global/plugins/morris/examples/events.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Time Events</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
var week_data = [
|
||||
{"period": "2011 W27", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2011 W26", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2011 W25", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2011 W24", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2011 W23", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2011 W22", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2011 W21", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2011 W20", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2011 W19", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2011 W18", "licensed": 3215, "sorned": 622},
|
||||
{"period": "2011 W17", "licensed": 3148, "sorned": 632},
|
||||
{"period": "2011 W16", "licensed": 3155, "sorned": 681},
|
||||
{"period": "2011 W15", "licensed": 3190, "sorned": 667},
|
||||
{"period": "2011 W14", "licensed": 3226, "sorned": 620},
|
||||
{"period": "2011 W13", "licensed": 3245, "sorned": null},
|
||||
{"period": "2011 W12", "licensed": 3289, "sorned": null},
|
||||
{"period": "2011 W11", "licensed": 3263, "sorned": null},
|
||||
{"period": "2011 W10", "licensed": 3189, "sorned": null},
|
||||
{"period": "2011 W09", "licensed": 3079, "sorned": null},
|
||||
{"period": "2011 W08", "licensed": 3085, "sorned": null},
|
||||
{"period": "2011 W07", "licensed": 3055, "sorned": null},
|
||||
{"period": "2011 W06", "licensed": 3063, "sorned": null},
|
||||
{"period": "2011 W05", "licensed": 2943, "sorned": null},
|
||||
{"period": "2011 W04", "licensed": 2806, "sorned": null},
|
||||
{"period": "2011 W03", "licensed": 2674, "sorned": null},
|
||||
{"period": "2011 W02", "licensed": 1702, "sorned": null},
|
||||
{"period": "2011 W01", "licensed": 1732, "sorned": null}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: week_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN'],
|
||||
events: [
|
||||
'2011-04',
|
||||
'2011-08'
|
||||
]
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
33
app/static/global/plugins/morris/examples/goals.html
Normal file
33
app/static/global/plugins/morris/examples/goals.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Value Goals</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
var decimal_data = [];
|
||||
for (var x = 0; x <= 360; x += 10) {
|
||||
decimal_data.push({
|
||||
x: x,
|
||||
y: Math.sin(Math.PI * x / 180).toFixed(4)
|
||||
});
|
||||
}
|
||||
window.m = Morris.Line({
|
||||
element: 'graph',
|
||||
data: decimal_data,
|
||||
xkey: 'x',
|
||||
ykeys: ['y'],
|
||||
labels: ['sin(x)'],
|
||||
parseTime: false,
|
||||
goals: [-1, 0, 1]
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
13
app/static/global/plugins/morris/examples/lib/example.css
Normal file
13
app/static/global/plugins/morris/examples/lib/example.css
Normal file
@ -0,0 +1,13 @@
|
||||
body {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#graph {
|
||||
width: 800px;
|
||||
height: 250px;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
pre {
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
4
app/static/global/plugins/morris/examples/lib/example.js
Normal file
4
app/static/global/plugins/morris/examples/lib/example.js
Normal file
@ -0,0 +1,4 @@
|
||||
$(function () {
|
||||
eval($('#code').text());
|
||||
prettyPrint();
|
||||
});
|
||||
@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formatting Dates with YYYY-MM</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var month_data = [
|
||||
{"period": "2012-10", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2011-08", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2011-03", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2010-08", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2010-05", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2010-03", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2010-01", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2009-12", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2009-10", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2009-09", "licensed": 3215, "sorned": 622}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: month_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN'],
|
||||
smooth: false
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
36
app/static/global/plugins/morris/examples/negative.html
Normal file
36
app/static/global/plugins/morris/examples/negative.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Negative values</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
var neg_data = [
|
||||
{"period": "2011-08-12", "a": 100},
|
||||
{"period": "2011-03-03", "a": 75},
|
||||
{"period": "2010-08-08", "a": 50},
|
||||
{"period": "2010-05-10", "a": 25},
|
||||
{"period": "2010-03-14", "a": 0},
|
||||
{"period": "2010-01-10", "a": -25},
|
||||
{"period": "2009-12-10", "a": -50},
|
||||
{"period": "2009-10-07", "a": -75},
|
||||
{"period": "2009-09-25", "a": -100}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: neg_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['a'],
|
||||
labels: ['Series A'],
|
||||
units: '%'
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
38
app/static/global/plugins/morris/examples/no-grid.html
Normal file
38
app/static/global/plugins/morris/examples/no-grid.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formatting Dates YYYY-MM-DD</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var day_data = [
|
||||
{"period": "2012-10-01", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
grid: false,
|
||||
data: day_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN']
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Non-continuous data</h1>
|
||||
<p>Null series values will break the line when rendering, missing values will be skipped</p>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var day_data = [
|
||||
{"period": "2012-10-01", "licensed": 3407},
|
||||
{"period": "2012-09-30", "sorned": 0},
|
||||
{"period": "2012-09-29", "sorned": 618},
|
||||
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2012-09-19", "licensed": 3257, "sorned": null},
|
||||
{"period": "2012-09-18", "licensed": 3248, "other": 1000},
|
||||
{"period": "2012-09-17", "sorned": 0},
|
||||
{"period": "2012-09-16", "sorned": 0},
|
||||
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2012-09-10", "licensed": 3215}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: day_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned', 'other'],
|
||||
labels: ['Licensed', 'SORN', 'Other'],
|
||||
/* custom label formatting with `xLabelFormat` */
|
||||
xLabelFormat: function(d) { return (d.getMonth()+1)+'/'+d.getDate()+'/'+d.getFullYear(); },
|
||||
/* setting `xLabels` is recommended when using xLabelFormat */
|
||||
xLabels: 'day'
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
37
app/static/global/plugins/morris/examples/non-date.html
Normal file
37
app/static/global/plugins/morris/examples/non-date.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formatting Non-date Arbitrary X-axis</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
var day_data = [
|
||||
{"elapsed": "I", "value": 34},
|
||||
{"elapsed": "II", "value": 24},
|
||||
{"elapsed": "III", "value": 3},
|
||||
{"elapsed": "IV", "value": 12},
|
||||
{"elapsed": "V", "value": 13},
|
||||
{"elapsed": "VI", "value": 22},
|
||||
{"elapsed": "VII", "value": 5},
|
||||
{"elapsed": "VIII", "value": 26},
|
||||
{"elapsed": "IX", "value": 12},
|
||||
{"elapsed": "X", "value": 19}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: day_data,
|
||||
xkey: 'elapsed',
|
||||
ykeys: ['value'],
|
||||
labels: ['value'],
|
||||
parseTime: false
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
54
app/static/global/plugins/morris/examples/quarters.html
Normal file
54
app/static/global/plugins/morris/examples/quarters.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formatting Dates with Quarters</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_e_type */
|
||||
var quarter_data = [
|
||||
{"period": "2011 Q3", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2011 Q2", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2011 Q1", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2010 Q4", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2010 Q3", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2010 Q2", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2010 Q1", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2009 Q4", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2009 Q3", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2009 Q2", "licensed": 3215, "sorned": 622},
|
||||
{"period": "2009 Q1", "licensed": 3148, "sorned": 632},
|
||||
{"period": "2008 Q4", "licensed": 3155, "sorned": 681},
|
||||
{"period": "2008 Q3", "licensed": 3190, "sorned": 667},
|
||||
{"period": "2007 Q4", "licensed": 3226, "sorned": 620},
|
||||
{"period": "2006 Q4", "licensed": 3245, "sorned": null},
|
||||
{"period": "2005 Q4", "licensed": 3289, "sorned": null},
|
||||
{"period": "2004 Q4", "licensed": 3263, "sorned": null},
|
||||
{"period": "2003 Q4", "licensed": 3189, "sorned": null},
|
||||
{"period": "2002 Q4", "licensed": 3079, "sorned": null},
|
||||
{"period": "2001 Q4", "licensed": 3085, "sorned": null},
|
||||
{"period": "2000 Q4", "licensed": 3055, "sorned": null},
|
||||
{"period": "1999 Q4", "licensed": 3063, "sorned": null},
|
||||
{"period": "1998 Q4", "licensed": 2943, "sorned": null},
|
||||
{"period": "1997 Q4", "licensed": 2806, "sorned": null},
|
||||
{"period": "1996 Q4", "licensed": 2674, "sorned": null},
|
||||
{"period": "1995 Q4", "licensed": 1702, "sorned": null},
|
||||
{"period": "1994 Q4", "licensed": 1732, "sorned": null}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: quarter_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN']
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
42
app/static/global/plugins/morris/examples/resize.html
Normal file
42
app/static/global/plugins/morris/examples/resize.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
<style>
|
||||
body { width: 100%; }
|
||||
#graph { width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formatting Dates YYYY-MM-DD</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var day_data = [
|
||||
{"period": "2012-10-01", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2012-09-30", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2012-09-29", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2012-09-20", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2012-09-19", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2012-09-18", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2012-09-17", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2012-09-16", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2012-09-15", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2012-09-10", "licensed": 3215, "sorned": 622}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: day_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN'],
|
||||
resize: true
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
31
app/static/global/plugins/morris/examples/stacked_bars.html
Normal file
31
app/static/global/plugins/morris/examples/stacked_bars.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Stacked Bars chart</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
// Use Morris.Bar
|
||||
Morris.Bar({
|
||||
element: 'graph',
|
||||
data: [
|
||||
{x: '2011 Q1', y: 3, z: 2, a: 3},
|
||||
{x: '2011 Q2', y: 2, z: null, a: 1},
|
||||
{x: '2011 Q3', y: 0, z: 2, a: 4},
|
||||
{x: '2011 Q4', y: 2, z: 4, a: 3}
|
||||
],
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z', 'a'],
|
||||
labels: ['Y', 'Z', 'A'],
|
||||
stacked: true
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
38
app/static/global/plugins/morris/examples/timestamps.html
Normal file
38
app/static/global/plugins/morris/examples/timestamps.html
Normal file
@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Timestamps</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var timestamp_data = [
|
||||
{"period": 1349046000000, "licensed": 3407, "sorned": 660},
|
||||
{"period": 1313103600000, "licensed": 3351, "sorned": 629},
|
||||
{"period": 1299110400000, "licensed": 3269, "sorned": 618},
|
||||
{"period": 1281222000000, "licensed": 3246, "sorned": 661},
|
||||
{"period": 1273446000000, "licensed": 3257, "sorned": 667},
|
||||
{"period": 1268524800000, "licensed": 3248, "sorned": 627},
|
||||
{"period": 1263081600000, "licensed": 3171, "sorned": 660},
|
||||
{"period": 1260403200000, "licensed": 3171, "sorned": 676},
|
||||
{"period": 1254870000000, "licensed": 3201, "sorned": 656},
|
||||
{"period": 1253833200000, "licensed": 3215, "sorned": 622}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: timestamp_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN'],
|
||||
dateFormat: function (x) { return new Date(x).toDateString(); }
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
49
app/static/global/plugins/morris/examples/updating.html
Normal file
49
app/static/global/plugins/morris/examples/updating.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Updating data</h1>
|
||||
<div id="graph"></div>
|
||||
<div id="reloadStatus">
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
|
||||
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.sin(Math.PI * v / 180).toFixed(4),
|
||||
z: Math.cos(Math.PI * v / 180).toFixed(4)
|
||||
});
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
var graph = Morris.Line({
|
||||
element: 'graph',
|
||||
data: data(0),
|
||||
xkey: 'x',
|
||||
ykeys: ['y', 'z'],
|
||||
labels: ['sin()', 'cos()'],
|
||||
parseTime: false,
|
||||
ymin: -1.0,
|
||||
ymax: 1.0,
|
||||
hideHover: true
|
||||
});
|
||||
function update() {
|
||||
nReloads++;
|
||||
graph.setData(data(5 * nReloads));
|
||||
$('#reloadStatus').text(nReloads + ' reloads');
|
||||
}
|
||||
setInterval(update, 100);
|
||||
</pre>
|
||||
</body>
|
||||
53
app/static/global/plugins/morris/examples/weeks.html
Normal file
53
app/static/global/plugins/morris/examples/weeks.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formatting Dates With Weeks</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
var week_data = [
|
||||
{"period": "2011 W27", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2011 W26", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2011 W25", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2011 W24", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2011 W23", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2011 W22", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2011 W21", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2011 W20", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2011 W19", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2011 W18", "licensed": 3215, "sorned": 622},
|
||||
{"period": "2011 W17", "licensed": 3148, "sorned": 632},
|
||||
{"period": "2011 W16", "licensed": 3155, "sorned": 681},
|
||||
{"period": "2011 W15", "licensed": 3190, "sorned": 667},
|
||||
{"period": "2011 W14", "licensed": 3226, "sorned": 620},
|
||||
{"period": "2011 W13", "licensed": 3245, "sorned": null},
|
||||
{"period": "2011 W12", "licensed": 3289, "sorned": null},
|
||||
{"period": "2011 W11", "licensed": 3263, "sorned": null},
|
||||
{"period": "2011 W10", "licensed": 3189, "sorned": null},
|
||||
{"period": "2011 W09", "licensed": 3079, "sorned": null},
|
||||
{"period": "2011 W08", "licensed": 3085, "sorned": null},
|
||||
{"period": "2011 W07", "licensed": 3055, "sorned": null},
|
||||
{"period": "2011 W06", "licensed": 3063, "sorned": null},
|
||||
{"period": "2011 W05", "licensed": 2943, "sorned": null},
|
||||
{"period": "2011 W04", "licensed": 2806, "sorned": null},
|
||||
{"period": "2011 W03", "licensed": 2674, "sorned": null},
|
||||
{"period": "2011 W02", "licensed": 1702, "sorned": null},
|
||||
{"period": "2011 W01", "licensed": 1732, "sorned": null}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: week_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN']
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
37
app/static/global/plugins/morris/examples/years.html
Normal file
37
app/static/global/plugins/morris/examples/years.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
|
||||
<script src="../morris.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
|
||||
<script src="lib/example.js"></script>
|
||||
<link rel="stylesheet" href="lib/example.css">
|
||||
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
|
||||
<link rel="stylesheet" href="../morris.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formatting Dates YYYY</h1>
|
||||
<div id="graph"></div>
|
||||
<pre id="code" class="prettyprint linenums">
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var year_data = [
|
||||
{"period": "2012", "licensed": 3407, "sorned": 660},
|
||||
{"period": "2011", "licensed": 3351, "sorned": 629},
|
||||
{"period": "2010", "licensed": 3269, "sorned": 618},
|
||||
{"period": "2009", "licensed": 3246, "sorned": 661},
|
||||
{"period": "2008", "licensed": 3257, "sorned": 667},
|
||||
{"period": "2007", "licensed": 3248, "sorned": 627},
|
||||
{"period": "2006", "licensed": 3171, "sorned": 660},
|
||||
{"period": "2005", "licensed": 3171, "sorned": 676},
|
||||
{"period": "2004", "licensed": 3201, "sorned": 656},
|
||||
{"period": "2003", "licensed": 3215, "sorned": 622}
|
||||
];
|
||||
Morris.Line({
|
||||
element: 'graph',
|
||||
data: year_data,
|
||||
xkey: 'period',
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN']
|
||||
});
|
||||
</pre>
|
||||
</body>
|
||||
Reference in New Issue
Block a user