morrisjs/morris.js

Pretty time-series line graphs

morris.js's Issues

YYYY-MM-DD date support

We can currently render data with dates expressed as YYYY, YYYY QQ and YYYY-MM.

It'd be great to get YYYY-MM-DD support too.

Area charts

Would love to see some basic area charts not too dissimilar from Highcharts (http://www.highcharts.com/demo/area-basic) This is only acceptable provided it doesn't muddy the simplistic nature of the Morris api (as if I wanted something complicated, I'd be using Highcharts anyways :) )

Improve x-axis labelling

Currently, Morris only labels the axis at year boundaries.

Needs smarter labelling for graphs that don't span multiple years.

Negative values

Hi, your work is fantastic and I'd really like to use it but need the negative value issue solved. I've seen the other 2 cases asking for this as well, I'd really appreciate if you could tell me when do you expect you could add this.

Thanks a million,

Jazz

Ability to add note(s) to data point(s) as option.note

I'm really enjoying getting my head around using this to look at machine tool diagnostic readings but would love to be able to include a note on wildly varying data points to be included in the hover text to explain 'outliers'

Issue with null data

I'm trying to create a chart with multiple series which may or may not have data on the different x axis values.
If I have a null value in the last Y series in the first position I get an 'Cannot read property 'y' of undefined.
If I have a null value in the last Y series in the last position I get the above error and 'Cannot read property 'length of undefined'.

Sample data used:
[{"period":"2012-03-15","y1":null,"y2":6250.0,"y3":7010.0},{"period":"2012-04-05","y1":234.60000000000002,"y2":null,"y3":null},{"period":"2012-04-10","y1":null,"y2":8596.0,"y3":null},{"period":"2012-04-18","y1":13459.6,"y2":null,"y3":null},{"period":"2012-04-19","y1":null,"y2":10546.0,"y3":null}]

Make graph zoomable as an option

I've got a graph with many points (like a million points in a month). Show some high-low points when not zoomed in and increase the number of shown point while zooming into a certain part of the graph. When zoomed in the graph should be scrollable left-to-right.

sraka1

Works with 3 data points but breaks on 2

This works:

var DATA = [
        {y: '2011-04', a: 75, b: 50},
        {y: '2011-03', a: 75, b: 50},
        {y: '2011-02', a: 100, b: 75}];

$(function() {

// quarterly data, custom colors, skinny lines
Morris.Line({
  element: 'container',
  data: DATA,
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: CATEGORIES,
  //lineColors: ['#167f39','#044c29'],
  lineWidth: 2
});

This draws equally but when I hover over the graph I get an error::

var DATA = [
        // NOTICE how there's only 2 data points this time.
        {y: '2011-03', a: 75, b: 50},
        {y: '2011-02', a: 100, b: 75}];

$(function() {

// quarterly data, custom colors, skinny lines
Morris.Line({
  element: 'container',
  data: DATA,
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: CATEGORIES,
  //lineColors: ['#167f39','#044c29'],
  lineWidth: 2
});

The error is: z[b][a] is undefined

I'm going to try to find out what the error is in the not-compressed version.

Label Onmouse over Jquery is not working

hi sir , i am a student ........... for my project i am using the charts but my data is in the form of year-mm-dd , count

by using that i get a graph ...........in previous your examples when ever mouse moving in the poing it shows some label and count...........that is not working properly to me for the last point and first point label is working

please give me the reply

Hourly plotting support

Any reason not supporting YYYY-MM-DD HH[:MM[:SS[.SSS]]]?

Add option to turn off curve smoothing

Add option to hide hover on mouse-out

I prefer having the hover being permanently visible on howmanyleft.co.uk, but others will disagree :)

Cannot Set the Width and Height of Graph

Trying to fit a Morris graph within a predefined area and although the documentation says that the graph area must have width and height styled, I found this not to be true. I've tried setting the width and height of the graph in CSS just like the examples but it still displays the Morris graph as if the width had been set to 100%.

Tidy tidy tidy

The code looks hacky. Sort it.

Allow display of zero values

I have a series of stats data that I want to graph over time. If I use JSON like this

[{"period":"2010-12-27","screenings":0},
 {"period":"2011-01-03","screenings":10},
 {"period":"2011-01-10","screenings":0}]

I get a horizontal line rather than a line that goes from zero to ten and then back down to zero. In the text display I get "n/a" as the values for these zero points.

If I change the zero values to 0.0001 the graph draws as expected.

Perhaps a setting for "ignore zeros"?

Donut chart rendered incorrectly when using double quotes

I have this JSON

[{"label":"Auxilio de NF-e","value":"1"},{"label":"Manuten\u00e7\u00e3o de ativos","value":"9"},{"label":"Auxilio de CT-e","value":"1"},{"label":"Ajuda a cliente interno","value":"2"}]

When I try to use it on donut chart, like this

<script>
Morris.Donut({
  element: 'donut',
  data: <%= @result_donut.to_json.to_s.html_safe %>
});
</script>

the output is rendered like this picture
Imgur

if I remove the double quotes on value, it works, but this data comes from a sql which I convert to JSON

Error on printing with dates 29.02.2012 and 1.03.2012

Datas with date 29.02.2012 and 1.03.2012 are printed on the same xkey (x-axis)

Create a way to format the values in donuts

I came across this thing: I'm saving the values in seconds, but I need to show them in hours:minutes...
Would be nice if Morris had a formatter to show values on Donuts charts (and other as well)

charts by month

Is there to create charts by months on x-axis? So I have the date in format of 2010-02 or 02-2010.

IE8 Modal issue

Hello,

I implemented this plugin successfully but i came up with an issue when using it in a modal window.
When used in a modal popup (i use ZURB Reveal Modal plugin - https://github.com/zurb/reveal) the graph does not appear in IE 8.

In Firefox it shows correctly. This issue happens in IE8 (i presume that in lower versions of IE too).

Does anyone have an answer to this ?

Thanks,
pcout

Is there a trick to getting ymax to work?

Even in the examples (on firefox here but chrome is the same), ymax in the updating.html file shows this: http://www.evernote.com/shard/s2/sh/a0219fe9-5160-4bd3-949f-4fa0a776ea9e/a879824711e30dc856dfcbf25104c0cd

In my own graphs, the result is very similar as soon as I used something like:

ymax:10,

Option to disable rounding of label values

Now Morris drows a chart like http://cl.ly/0s0p0u283Z2f3j0J0A3Z for the code like

Morris.Line({
            element: 'u_price_quotes',
            data: [                
                    {date: '2010-11-02', value: 10.83},
                    {date: '2010-11-03', value: 10.45},
                    {date: '2010-11-04', value: 10.60},
                    {date: '2010-11-05', value: 10.70}
                    ],
            xkey: 'date',
            ykeys: ['value'],
            labels: ['Series A']
        });

So, the value is rounded when is displayed in the label. Is there any option to disable the rounding?

Improve timestamp resolution

Should be able to deal with timestamps with (at least) second accuracy.

Related: #9

Accept a DOM element in options.el

x-axis date format

I customized date format with:

dateFormat: function (timestamp) {
    var date = new Date(timestamp);
    return date.getDate() + '. ' + date.getMonth() + '. ' + date.getFullYear() + '.';
}

I expected it to take effect on x-axis dates, but it did not. Here is the result.

Is this a bug or there is some hidden option?

Is there a way to stop automatic date parsing?

What if I don't want to group dates together and want it to just respect my set of x values in a linear fashion. Is there a way to do it?

Point does not get highlighted when moving over them

When using date strings like '2011-07-10' as y-axis, points on the graph will not get highlighted when moving over them, except for the first and last one. Here is an jsfiddle example for the issue: http://jsfiddle.net/zellux/W7tPx/

dynamic data with jquery ajax dont work

hello community, i try to append data dynamically to morris using jquery $.get() $.load() ,with and without json encode but that dont work itried also a hidden iput alwaus give same probleme the browser block :( but using php it work perfectly there is any way how to do it ??

Format date

I have chosen xLabels: 'month'.

But how do I get names like Januar, Februar, Marts, April etc.. :)

Ability to set a ymin value

Hello - Quite impressed by your work and was wondering whether the following is in the works: The ability to explicitly and/or automatically set a minimum value for y. This would allow display of data is below zero, or display of data that is contained within a small y range that is much greater than zero.

Thanks - Rick

Is it possible to add the creation of pie charts

It's a very interesting script. But it's really needs to have pie charts improvement. Using two libraries for drawing of different charts types isn't very good.

Days in xkey with date in Y-m-d format

Hi Olly,
pleas can you help me with this problem...
I get data with Google Analytics API Class and transform to this format..

data = [{"ga:date":"2012-01-01","ga:pageviews":"121","ga:visits":"21"},{"ga:date":"2012-01-02"... ... {"ga:date":"2012-01-31","ga:pageviews":"121","ga:visits":"221"}]

Morris Chart call

Morris.Line({
element: 'chart',
data: data,
xkey: 'ga:date',
ykeys: ['ga:pageviews','ga:visits']})

And in xkey ax is only year... i need show 31 days...
Pleas how do that?

Thank you!

Graph wont draw if all values are 0 or null

If I attempt to draw a graph where all values are 0 morris.js dies. If I put a value of 1 in any of the values the graph is drawn so it is clearly related to all zero values.

To reproduce the error:

Morris.Line({
      element: 'averageGraph',
      parseTime: false,
      data: [{"y":"06:00","a":0},
      {"y":"07:00","a":0},
      {"y":"08:00","a":0},
      {"y":"09:00","a":0},
      {"y":"10:00","a":0}],
      xkey: 'y',
      ykeys: ["a"],
      labels: ["Test"]
    });

Issues with Periods for Graph

I'm trying to make a line graph of two variables, a truancy rate and the number of absences for that month. Right now, it's being displayed as this:

tax_data = [
               {"period": "2011-09", "trate": 46, "absent": 11},
               {"period": "2011-12", "trate": 50, "absent": 1},
               {"period": "2012-01", "trate": 20, "absent": 1},
               {"period": "2012-02", "trate": 33, "absent": 1},

    ];

The way you have the period being parsed is with parse_year(). I tried to modify the parse year to return almost the same as what you did for the "2011 Q3" periods:

function parse_year(year)
{
     var e = year.split('-');
          return parseInt(e[0], 10) + (parseInt(e[1], 19) * 11 - 1) / 12;
}

But it doesn't come out so well:

How would you approach this one? This is the way I have my old graph:

But it doesn't look or feel as nice as the one from morris.js.

It always eats last symbol when using 'xLabels: day'.

http://i46.tinypic.com/353ct54.jpg
Or only me has this problem?

link to refresh/reload the graph data

Is there a way to define a button or a link to refresh/reload the graph data ?

thanks,
pcout

Memory leak when redrawing graphs

When I call Morris.Line(...) many times within a web page, the browser leaks memory.

I noticed the problem when designing a web page that uses a 1 second timeout to load new data points (via ajax), then I plot the new points using Morris.Line(). Thus the webpage has the appearance of a rolling graph, which looks great. But the browser leaks memory like crazy (1MB/second or more in my project).

Ajax might contribute to the leaks, so I created a simple example with no ajax (html below). My browser leaks around 5MB/minute while viewing the sample. I measure the leaks using Windows Task Manager. I'm running Windows 7 Professional. I see similar leakage rates in Chrome 17.0.963.79 m and Firefox 12.0 .

<title>Real time data</title> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/raphael-2.0.2-min.js"></script> <script src="js/morris.min.js"></script> Graph 0

<script> var nReloads = 0; function draw() { Morris.Line({ element: 'graph0', data: [ {'date': '2012-06-01 15:06:57', 'Apples': 672, 'Bananas': 644, 'Oranges': 185, 'Peaches': 218, 'Pears': 0}, {'date': '2012-06-01 15:06:58', 'Apples': 380, 'Bananas': 259, 'Oranges': 65, 'Peaches': 115, 'Pears': 0}, {'date': '2012-06-01 15:06:59', 'Apples': 305, 'Bananas': 258, 'Oranges': 60, 'Peaches': 132, 'Pears': 0}, {'date': '2012-06-01 15:07:00', 'Apples': 568, 'Bananas': 481, 'Oranges': 137, 'Peaches': 215, 'Pears': 0}, {'date': '2012-06-01 15:07:01', 'Apples': 654, 'Bananas': 538, 'Oranges': 162, 'Peaches': 265, 'Pears': 0}, ], xkey: 'date', ykeys: ['Apples', 'Bananas', 'Oranges', 'Peaches', 'Pears'], labels: ['Apples', 'Bananas', 'Oranges', 'Peaches', 'Pears'], parseTime: false, hideHover: true, ymin: 0, ymax: 'auto 100' }); nReloads++; $('#reloadStatus').text(nReloads + ' reloads'); setTimeout(function() { draw(); }, 1000); } draw(); </script>

Infinite loop when data indicates horizontal line

for data looks like this

var day_data = [
{"period": "2012-10-01", "licensed": 0, "sorned": 0},
{"period": "2012-09-30", "licensed": 0, "sorned": 0},
{"period": "2012-09-29", "licensed": 0, "sorned": 0},
{"period": "2012-09-20", "licensed": 0, "sorned": 0},
{"period": "2012-09-19", "licensed": 0, "sorned": 0},
{"period": "2012-09-18", "licensed": 0, "sorned": 0},
{"period": "2012-09-17", "licensed": 0, "sorned": 0},
{"period": "2012-09-16", "licensed": 0, "sorned": 0},
{"period": "2012-09-15", "licensed": 0, "sorned": 0},
{"period": "2012-09-10", "licensed": 0, "sorned": 0}
];

this.yInterval = 0

drawGrid mehtod will run into a infinite loop.

Full screen support?

Is there a way to tell morris to resize the graph when entering/eaving full screen mode?

I thought I'd try something like this:

<div style="width:200px; height:150px;">
    <div style="width:100%; height: 100%; background: #fff" id="graph"></div>
</div>

Then I have a button to take the graph full screen:

<button onclick="$('#graph').fullScreen(true)">Show fullscreen</button>

When I run it, it goes to full screen the but graph doesn't resize.

Here is a url of it in action, but please note that the page may disappear at any time..

https://astrobiology-alpha.arc.nasa.gov/articles/

Ability to display intervals below x-axis, "units of" and legend

First of all: Thanks for a great piece of work!

I am currently writing a thesis, and have found morris.js very useful to visualize data along a time axis. However, there are few features that I really miss:

I'd like to display periodic intervals with a text label. Example: I want to visualize the effect that changing licensing schemes have on community size (number of active community members). Say license A was used for 3 years, license B for 4 years and so on. One alternative would be to display events (i.e. introduction of new license) as a bullet below the x-axis, another to (supplementary) to visualize the intervals somehow (e.g. with borders), and a third to extend the bullets below the x-axis with vertical lines that cross the x-axis and graphs.

Another nice feature would be if one could display large numbers along small ones (e.g. by displaying the large ones in thousands or millions). Of course, one can manipulate the data before putting them into a js / json format. But then the data becomes harder to use for other purposes, and labels only show values in thousands / millions.

An optional legend that explains which colored graphs correspond to which types of values (similar to tooltip, but which is displayed regardless of mouse position). This would extend the possible utility to publishing.

Graph very unhappy if values are all 0

If it happens that the input data is all 0s (it can happen!), the graph really doesn't look good. For example:

Morris.Line({
element: 'annual',
data: [
    { y: '2012', a: 0},
    { y: '2011', a: 0},
    { y: '2010', a: 0},
],
xkey: 'y',
ykeys: ['a'],
labels: ['Series A']
});

I'm not sure how best to fix this - perhaps add a default ymax that's ignored if it's exceeded, so that the y axis always has a height of some kind?

"undefined" x-axis text when there is only one point in graph

When there is only one point in the graph (which is rather possible when plot is generated via some server-script) the x-point is signed as "undefined" no matter what value you've passed to Morris() in options.data . In my case it was
options.data = [{y: "23.03", a: 5}] and point (circle) was signed on x-axis as "undefined".
I've fixed this that way:
this.xmin = Math.min.apply(null, this.xvals);
this.xmax = Math.max.apply(null, this.xvals);
if (this.xmin === this.xmax) {
this.xmin = 0; //that is the line I've changed (original was this.xmin -= 1;)
this.xmax += 1;
}
Now it seems that all is working fine, but i can't be 100% sure

By the way, huge thanks for that very convenient library

Percentage Y values

Hi is it possible to have a percentage as Y values, so that the '%' character is actually written on y axis as well as on the little hover popup?

Thanks

Decimal values in morris.js

It's possible that morris.js doesn't render decimal values?

add ability to show minus values

currently it cant show something like

{date: "2009" , money: -500},

properly

i cant even do something like this for weeks instead of year

{date: "2" , money: 400},
{date: "3" , money: 700},
{date: "4" , money: 900},

it makes an unusual graph

Refactor redraw()

Needs splitting up a bit. It's just too fugly right now.

document 'ymax' option on web page

I found the 'ymax' in a commit. Would be nice to have it mentioned on the web page.

--Thx
AC

add ability to show all tooltips by default

I have integrated morris.js into an iPhone app. Touch event related to webView is not correctly fired so I need to display all tooltips by default to show point data without the user need to tap on them.
I'm trying to do this editing morris.coffee but since now I've not found a real solution.
I've tried to edit hilight: and updateHover:

Anyone can help me? Thank you, Stefano

Sort input data

Usage documentation

Need something a bit more explanatory than an example.html!

Maybe a bit of docco?