copy dari repo om Irfan
This commit is contained in:
Vendored
+234
@@ -0,0 +1,234 @@
|
||||
# Morris.js - pretty time-series line graphs
|
||||
|
||||
[](http://travis-ci.org/morrisjs/morris.js)
|
||||
|
||||
Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/.
|
||||
It's a very simple API for drawing line, bar, area and donut charts.
|
||||
|
||||
Cheers!
|
||||
|
||||
\- Olly (olly@oesmith.co.uk)
|
||||
|
||||
## Contributors wanted
|
||||
|
||||
I'm unfortunately not able to actively support Morris.js any more. I keep an eye
|
||||
on the issues, but I rarely have the time to fix bugs or review pull requests.
|
||||
|
||||
If you're interested in actively contributing to Morris.js, please contact me on
|
||||
the email address above.
|
||||
|
||||
## Requirements
|
||||
|
||||
- [jQuery](http://jquery.com/) (>= 1.7 recommended, but it'll probably work with
|
||||
older versions)
|
||||
- [Raphael.js](http://raphaeljs.com/) (>= 2.0)
|
||||
|
||||
## Usage
|
||||
|
||||
See [the website](http://morrisjs.github.com/morris.js/).
|
||||
|
||||
## Development
|
||||
|
||||
Very daring.
|
||||
|
||||
Fork, hack, possibly even add some tests, then send a pull request :)
|
||||
|
||||
Remember that Morris.js is a coffeescript project. Please make your changes in
|
||||
the `.coffee` files, not in the compiled javascript files in the root directory
|
||||
of the project.
|
||||
|
||||
### Developer quick-start
|
||||
|
||||
You'll need [node.js](https://nodejs.org). I recommend using
|
||||
[nvm](https://github.com/creationix/nvm) for installing node in
|
||||
development environments.
|
||||
|
||||
With node installed, install [grunt](https://github.com/cowboy/grunt) using
|
||||
`npm install -g grunt-cli`, and then the rest of the test/build dependencies
|
||||
with `npm install` in the morris.js project folder.
|
||||
|
||||
Once you're all set up, you can compile, minify and run the tests using `grunt`.
|
||||
|
||||
Note: I'm experimenting with using perceptual diffs to catch rendering
|
||||
regressions. Due to font rendering differences between platforms, the pdiff
|
||||
tests currently *only* pass on OS X.
|
||||
|
||||
## Changelog
|
||||
|
||||
### 0.5.1 - 15th June 2014
|
||||
|
||||
- Fix touch event handling.
|
||||
- Fix stacked=false in bar chart [#275](https://github.com/morrisjs/morris.js/issues/275)
|
||||
- Configurable vertical segments [#297](https://github.com/morrisjs/morris.js/issues/297)
|
||||
- Deprecate continuousLine option.
|
||||
|
||||
### 0.5.0 - 19th March 2014
|
||||
|
||||
- Update grunt dependency [#288](https://github.com/morrisjs/morris.js/issues/228)
|
||||
- Donut segment color config in data objects [#281](https://github.com/morrisjs/morris.js/issues/281)
|
||||
- Customisable line widths and point drawing [#272](https://github.com/morrisjs/morris.js/issues/272)
|
||||
- Bugfix for @options.smooth [#266](https://github.com/morrisjs/morris.js/issues/266)
|
||||
- Option to disable axes individually [#253](https://github.com/morrisjs/morris.js/issues/253)
|
||||
- Range selection [#252](https://github.com/morrisjs/morris.js/issues/252)
|
||||
- Week format for x-labels [#250](https://github.com/morrisjs/morris.js/issues/250)
|
||||
- Update developer quickstart instructions [#243](https://github.com/morrisjs/morris.js/issues/243)
|
||||
- Experimenting with perceptual diffs.
|
||||
- Add original data row to hover callback [#264](https://github.com/morrisjs/morris.js/issues/264)
|
||||
- setData method for donut charts [#211](https://github.com/morrisjs/morris.js/issues/211)
|
||||
- Automatic resizing [#111](https://github.com/morrisjs/morris.js/issues/111)
|
||||
- Fix travis builds [#298](https://github.com/morrisjs/morris.js/issues/298)
|
||||
- Option for rounded corners on bar charts [#305](https://github.com/morrisjs/morris.js/issues/305)
|
||||
- Option to set padding for X axis labels [#306](https://github.com/morrisjs/morris.js/issues/306)
|
||||
- Use local javascript for examples.
|
||||
- Events on non-time series [#314](https://github.com/morrisjs/morris.js/issues/314)
|
||||
|
||||
### 0.4.3 - 12th May 2013
|
||||
|
||||
- Fix flickering hover box [#186](https://github.com/morrisjs/morris.js/issues/186)
|
||||
- xLabelAngle option (diagonal labels!!) [#239](https://github.com/morrisjs/morris.js/issues/239)
|
||||
- Fix area chart fill bug [#190](https://github.com/morrisjs/morris.js/issues/190)
|
||||
- Make event handlers chainable
|
||||
- gridTextFamily and gridTextWeight options
|
||||
- Fix hovers with setData [#213](https://github.com/morrisjs/morris.js/issues/213)
|
||||
- Fix hideHover behaviour [#236](https://github.com/morrisjs/morris.js/issues/236)
|
||||
|
||||
### 0.4.2 - 14th April 2013
|
||||
|
||||
- Fix DST handling [#191](https://github.com/morrisjs/morris.js/issues/191)
|
||||
- Parse data values from strings in Morris.Donut [#189](https://github.com/morrisjs/morris.js/issues/189)
|
||||
- Non-cumulative area charts [#199](https://github.com/morrisjs/morris.js/issues/199)
|
||||
- Round Y-axis labels to significant numbers [#162](https://github.com/morrisjs/morris.js/162)
|
||||
- Customising default hover content [#179](https://github.com/morrisjs/morris.js/179)
|
||||
|
||||
### 0.4.1 - 8th February 2013
|
||||
|
||||
- Fix goal and event rendering. [#181](https://github.com/morrisjs/morris.js/issues/181)
|
||||
- Don't break when empty data is passed to setData [#142](https://github.com/morrisjs/morris.js/issues/142)
|
||||
- labelColor option for donuts [#159](https://github.com/morrisjs/morris.js/issues/159)
|
||||
|
||||
### 0.4.0 - 26th January 2013
|
||||
|
||||
- Goals and events [#103](https://github.com/morrisjs/morris.js/issues/103).
|
||||
- Bower package manager metadata.
|
||||
- More flexible formatters [#107](https://github.com/morrisjs/morris.js/issues/107).
|
||||
- Color callbacks.
|
||||
- Decade intervals for time-axis labels.
|
||||
- Non-continous line tweaks [#116](https://github.com/morrisjs/morris.js/issues/116).
|
||||
- Stacked bars [#120](https://github.com/morrisjs/morris.js/issues/120).
|
||||
- HTML hover [#134](https://github.com/morrisjs/morris.js/issues/134).
|
||||
- yLabelFormat [#139](https://github.com/morrisjs/morris.js/issues/139).
|
||||
- Disable axes [#114](https://github.com/morrisjs/morris.js/issues/114).
|
||||
|
||||
### 0.3.3 - 1st November 2012
|
||||
|
||||
- **Bar charts!** [#101](https://github.com/morrisjs/morris.js/issues/101).
|
||||
|
||||
### 0.3.2 - 28th October 2012
|
||||
|
||||
- **Area charts!** [#47](https://github.com/morrisjs/morris.js/issues/47).
|
||||
- Some major refactoring and test suite improvements.
|
||||
- Set smooth parameter per series [#91](https://github.com/morrisjs/morris.js/issues/91).
|
||||
- Custom dateFormat for string x-values [#90](https://github.com/morrisjs/morris.js/issues/90).
|
||||
|
||||
### 0.3.1 - 13th October 2012
|
||||
|
||||
- Add `formatter` option for customising value labels in donuts [#75](https://github.com/morrisjs/morris.js/issues/75).
|
||||
- Cycle `lineColors` on line charts to avoid running out of colours [#78](https://github.com/morrisjs/morris.js/issues/78).
|
||||
- Add method to select donut segments. [#79](https://github.com/morrisjs/morris.js/issues/79).
|
||||
- Don't go negative on yMin when all y values are zero. [#80](https://github.com/morrisjs/morris.js/issues/80).
|
||||
- Don't sort data when parseTime is false [#83](https://github.com/morrisjs/morris.js/issues/83).
|
||||
- Customise styling for points. [#87](https://github.com/morrisjs/morris.js/issues/87).
|
||||
|
||||
### 0.3.0 - 15th September 2012
|
||||
|
||||
- Donut charts!
|
||||
- Bugfix: ymin/ymax bug [#71](https://github.com/morrisjs/morris.js/issues/71).
|
||||
- Bugfix: infinite loop when data indicates horizontal line [#66](https://github.com/morrisjs/morris.js/issues/66).
|
||||
|
||||
### 0.2.10 - 26th June 2012
|
||||
|
||||
- Support for decimal labels on y-axis [#58](https://github.com/morrisjs/morris.js/issues/58).
|
||||
- Better axis label clipping [#63](https://github.com/morrisjs/morris.js/issues/63).
|
||||
- Redraw graphs with updated data using `setData` method [#64](https://github.com/morrisjs/morris.js/issues/64).
|
||||
- Bugfix: series with zero or one non-null values [#65](https://github.com/morrisjs/morris.js/issues/65).
|
||||
|
||||
### 0.2.9 - 15th May 2012
|
||||
|
||||
- Bugfix: Fix zero-value regression
|
||||
- Bugfix: Don't modify user-supplied data
|
||||
|
||||
### 0.2.8 - 10th May 2012
|
||||
|
||||
- Customising x-axis labels with `xLabelFormat` option
|
||||
- Only use timezones when timezone info is specified
|
||||
- Fix old IE bugs (mostly in examples!)
|
||||
- Added `preunits` and `postunits` options
|
||||
- Better non-continuous series data support
|
||||
|
||||
### 0.2.7 - 2nd April 2012
|
||||
|
||||
- Added `xLabels` option
|
||||
- Refactored x-axis labelling
|
||||
- Better ISO date support
|
||||
- Fix bug with single value in non time-series graphs
|
||||
|
||||
### 0.2.6 - 18th March 2012
|
||||
|
||||
- Partial series support (see `null` y-values in `examples/quarters.html`)
|
||||
- `parseTime` option bugfix for non-time-series data
|
||||
|
||||
### 0.2.5 - 15th March 2012
|
||||
|
||||
- Raw millisecond timestamp support (with `dateFormat` option)
|
||||
- YYYY-MM-DD HH:MM[:SS[.SSS]] date support
|
||||
- Decimal number labels
|
||||
|
||||
### 0.2.4 - 8th March 2012
|
||||
|
||||
- Negative y-values support
|
||||
- `ymin` option
|
||||
- `units` options
|
||||
|
||||
### 0.2.3 - 6th Mar 2012
|
||||
|
||||
- jQuery no-conflict compatibility
|
||||
- Support ISO week-number dates
|
||||
- Optionally hide hover on mouseout (`hideHover`)
|
||||
- Optionally skip parsing dates, treating X values as an equally-spaced series (`parseTime`)
|
||||
|
||||
### 0.2.2 - 29th Feb 2012
|
||||
|
||||
- Bugfix: mouseover error when options.data.length == 2
|
||||
- Automatically sort options.data
|
||||
|
||||
### 0.2.1 - 28th Feb 2012
|
||||
|
||||
- Accept a DOM element *or* an ID in `options.element`
|
||||
- Add `smooth` option
|
||||
- Bugfix: clone `@default`
|
||||
- Add `ymax` option
|
||||
|
||||
## License
|
||||
|
||||
Copyright (c) 2012-2014, Olly Smith
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
1. Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
2. Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
|
||||
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
+18
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
|
||||
}
|
||||
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
.morris-hover{position:absolute;z-index:1000}.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255,255,255,0.8);border:solid 2px rgba(230,230,230,0.8);font-family:sans-serif;font-size:12px;text-align:center}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0}
|
||||
.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0}
|
||||
Vendored
+1892
File diff suppressed because it is too large
Load Diff
Vendored
+7
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user