Pretty time-series line graphs

Overview

Morris.js - pretty time-series line graphs

Build Status

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 ([email protected])

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 (>= 1.7 recommended, but it'll probably work with older versions)
  • Raphael.js (>= 2.0)

Usage

See the website.

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. I recommend using nvm for installing node in development environments.

With node installed, install 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.

Additionally, bower is required for for retrieving additional test dependencies.
Install it with npm install -g bower and then bower install in the morris 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
  • Configurable vertical segments #297
  • Deprecate continuousLine option.

0.5.0 - 19th March 2014

  • Update grunt dependency #288
  • Donut segment color config in data objects #281
  • Customisable line widths and point drawing #272
  • Bugfix for @options.smooth #266
  • Option to disable axes individually #253
  • Range selection #252
  • Week format for x-labels #250
  • Update developer quickstart instructions #243
  • Experimenting with perceptual diffs.
  • Add original data row to hover callback #264
  • setData method for donut charts #211
  • Automatic resizing #111
  • Fix travis builds #298
  • Option for rounded corners on bar charts #305
  • Option to set padding for X axis labels #306
  • Use local javascript for examples.
  • Events on non-time series #314

0.4.3 - 12th May 2013

  • Fix flickering hover box #186
  • xLabelAngle option (diagonal labels!!) #239
  • Fix area chart fill bug #190
  • Make event handlers chainable
  • gridTextFamily and gridTextWeight options
  • Fix hovers with setData #213
  • Fix hideHover behaviour #236

0.4.2 - 14th April 2013

  • Fix DST handling #191
  • Parse data values from strings in Morris.Donut #189
  • Non-cumulative area charts #199
  • Round Y-axis labels to significant numbers #162
  • Customising default hover content #179

0.4.1 - 8th February 2013

  • Fix goal and event rendering. #181
  • Don't break when empty data is passed to setData #142
  • labelColor option for donuts #159

0.4.0 - 26th January 2013

  • Goals and events #103.
  • Bower package manager metadata.
  • More flexible formatters #107.
  • Color callbacks.
  • Decade intervals for time-axis labels.
  • Non-continous line tweaks #116.
  • Stacked bars #120.
  • HTML hover #134.
  • yLabelFormat #139.
  • Disable axes #114.

0.3.3 - 1st November 2012

0.3.2 - 28th October 2012

  • Area charts! #47.
  • Some major refactoring and test suite improvements.
  • Set smooth parameter per series #91.
  • Custom dateFormat for string x-values #90.

0.3.1 - 13th October 2012

  • Add formatter option for customising value labels in donuts #75.
  • Cycle lineColors on line charts to avoid running out of colours #78.
  • Add method to select donut segments. #79.
  • Don't go negative on yMin when all y values are zero. #80.
  • Don't sort data when parseTime is false #83.
  • Customise styling for points. #87.

0.3.0 - 15th September 2012

  • Donut charts!
  • Bugfix: ymin/ymax bug #71.
  • Bugfix: infinite loop when data indicates horizontal line #66.

0.2.10 - 26th June 2012

  • Support for decimal labels on y-axis #58.
  • Better axis label clipping #63.
  • Redraw graphs with updated data using setData method #64.
  • Bugfix: series with zero or one non-null values #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.

Comments
  • Random browser hang/crash using Area chart (on Chrome)

    Random browser hang/crash using Area chart (on Chrome)

    I am experiencing random (intermittent) freezes and crashing when rendering an area chart in my app. Sometimes it is on the initial creation - other times I "empty" the div then create a new area chart.

    One time I did get evidence of an infinite loop in raphael - Error parsing d H1810 << my best memory of the repeating error.

    Unfortunately I'm not getting the error msg anymore in console - chrome is just hanging.

    Here is my code to create the area chart:

    var chart = this.line =  Morris.Area({
                        padding: padding,       // eg 10
                        element: $el,              // a div
                        data: data,                  //   [] length = 72 - see sample below
                        xkey: 'tm',
                        ykeys: ['wk','av','rst','ex'],
                        labels: ["Working","Available","Rest","Exception"],
                        lineColors: ["blue","gray","red","green"],
                        // lineWidth: null,
                        // pointSize: null,
                        pointFillColors: ["blue","gray","red","green"],
                        // pointStrokeColors: null,
                        ymax: "auto "+(sdc.ymax+2),        // eg 20
                        ymin: 0,
                        smooth: false,
                        hideHover: true,
                        //parseTime: null,
                        //postUnits,
                        //preUnits,
                        dateFormat: function(t) {
                            return util.dts(t);
                        },
                        //xLabels:
                        xLabelFormat: function(t) {
                            return "";
                        },
                        xLabelMargin: 0
    
                    });
    
    example data element:
    
    av: 2
    ex: 0
    nc: 1
    nm: 2
    rst: 0
    tm: 1362551400000
    wk: 0
    
    

    My div is styled like this:

    <div class="wall-chart" style="left: -26px; width: 1828px;">
    

    and is also position: absolute and height: 100% inside another div:

    <div style="height: 78px">
    

    That parent div has padding.

    Any ideas? Most of the time (8/10 times) the chart renders properly.

    opened by kidplug 24
  • Add horizontal barchart option

    Add horizontal barchart option

    You can use a horizontal barchart by using the option horizontal = true. This fixes #110. Quite a lot of code had to be added to make this work. Please let me know if you think something should be handled differently. This also includes the fix I supplied in #447, since it was really small. So it fixes #382 as well.

    feature feedback requested 
    opened by JelteF 23
  • Define multiple line graphs in one JS file

    Define multiple line graphs in one JS file

    I'm having trouble defining 2 line graphs in one JS file. The graphs are not shown on the same html pages.

    I've tried:

    Morris.Line({
          element: 'graph_by_hour',
          data: $('#graph_by_hour').data('alerts'),
          xkey: 'hour',
          ykeys: ['alerts'],
          labels: ['Alerts']
        }, {
          element: 'graph_by_priority',
          data: $('#graph_by_priority').data('alerts'),
          xkey: 'created_at',
          ykeys: ['high', 'med', 'low'],
          labels: ['High', 'Medium', 'Low'],
          lineColors: ['#E00B0B', '#1B94E0', '#69CF89']
        });
    

    and

    Morris.Line({
          element: 'graph_by_hour',
          data: $('#graph_by_hour').data('alerts'),
          xkey: 'hour',
          ykeys: ['alerts'],
          labels: ['Alerts']
        });
        Morris.Line({
          element: 'graph_by_priority',
          data: $('#graph_by_priority').data('alerts'),
          xkey: 'created_at',
          ykeys: ['high', 'med', 'low'],
          labels: ['High', 'Medium', 'Low'],
          lineColors: ['#E00B0B', '#1B94E0', '#69CF89']
        });
    

    but whichever graph is defined second does not work.

    The data looks like this for graph_by_hour and similar for graph_by_priority:

    [{"hour":0,"alerts":3},{"hour":1,"alerts":5},{"hour":2,"alerts":12},{"hour":3,"alerts":4},{"hour":4,"alerts":4},{"hour":5,"alerts":4},{"hour":6,"alerts":4},{"hour":7,"alerts":9},{"hour":8,"alerts":2},{"hour":9,"alerts":3},{"hour":10,"alerts":5},{"hour":11,"alerts":5},{"hour":12,"alerts":4},{"hour":13,"alerts":4},{"hour":14,"alerts":7},{"hour":15,"alerts":3},{"hour":16,"alerts":2},{"hour":17,"alerts":3},{"hour":18,"alerts":3},{"hour":19,"alerts":5},{"hour":20,"alerts":0},{"hour":21,"alerts":3},{"hour":22,"alerts":2},{"hour":23,"alerts":3}]
    

    and the whole graphs.js file:

    (function() {
    
      jQuery(function() {
        Morris.Line({
          element: 'graph_by_hour',
          data: $('#graph_by_hour').data('alerts'),
          xkey: 'hour',
          ykeys: ['alerts'],
          labels: ['Alerts']
        });
        Morris.Line({
          element: 'graph_by_priority',
          data: $('#graph_by_priority').data('alerts'),
          xkey: 'created_at',
          ykeys: ['high', 'med', 'low'],
          labels: ['High', 'Medium', 'Low'],
          lineColors: ['#E00B0B', '#1B94E0', '#69CF89']
        });
      });
    
    }).call(this);
    
    opened by james-ai 18
  • Round Y-Axis numbers to a Nicer Format

    Round Y-Axis numbers to a Nicer Format

    Hi,

    So my area chart looks like this:

    Screen Shot 2013-01-17 at 07 29 57

    But the axis numbers are not round and nice numbers people like to see, like 250 and 500. We can tweak this behaviour.

    opened by Radagaisus 17
  • Rails morris.js charts not working (Direct javascript)

    Rails morris.js charts not working (Direct javascript)

    Im trying to make the charts work in my HRM app using morris.js & javascript ...coffescript technique does not work for me according to the railcasts charts episode as it breaks my entire app ...so cant use it ... :( ...

    Well this is my ERB file (gist) ... https://gist.github.com/SkyKOG/5261972

    And this is how the chart would appear http://i.imgur.com/jXgmBas.png ...do notice that the JSON is appearing correctly but for now im stupidly just hard-coding the json data in the morris script tag (please see the gist) ... instead of using $('#genders_chart').data('emp_spec_views') as shown in the episode (which dosent display anything for me)...

    So i needed to know how to get the data in the script correctly so that the graph is rendered correctly ...

    opened by SkyKOG 14
  • Morris.Bar revisited + necessary Morris.Grid changes

    Morris.Bar revisited + necessary Morris.Grid changes

    Morris.Bar for refactored version - I am a such impatient programmer, forgive me please :-)

    Features:

    • Multiple series (as much as the paper can hold),
    • 2-color vertical gradient with @ymax as the reference for "top",
    • 3-color vertical gradient (only: 0%-50%-100%), reference as above,
    • opacity decrease on x-axis category hover,

    Because I needed to move first and last x-axis category to not make any bar exceed the paper geometry, I had updated Morris.Grid to allow padding per side (css-like syntax), extract Grid left/right padding, and add additional callback @overridePadding() if @overridePadding which allowed me to change all these values to get the chart working.

    Example included with the library: Morris.Bar

    This PR successfully closes #98 :-)

    opened by tiraeth 14
  • Wrong height and width ?

    Wrong height and width ?

    Hi, When I create a Bar or and Line Graph fram a div that is

    for example, the SAV is not 250px but 215px... So I have a little space and top and bottom and left and right, like if there was a default padding on the SVG created.

    Is there a way to disable that ?

    Thanks

    opened by Mushr0000m 12
  • How to update the graph with incoming data?

    How to update the graph with incoming data?

    Let's presume graph is initialised with just one JSON item for graph data on page load. Using web sockets I'm trying to push into it every time there is new event.

    How can I re-draw/update graph?

    opened by bondarewicz 11
  • lineColors don't apply, all lines are blue

    lineColors don't apply, all lines are blue

    Hi, when we implement the line chart, the lines are all blue

    We tried an array of colors but it still doesn't apply

    The Labels in the white box change colors, but not the lines

    https://gist.github.com/3845563

    Let me know if I need to clarify anything else

    opened by joemsak 11
  • setData option for the Donut Chart

    setData option for the Donut Chart

    Would be great for the donut chart to also have the setData method.

    In it's absence, what is the best way to destroy the donut chart and clean up event handlers?

    opened by andrewharry 10
  • Multiple values for each bar

    Multiple values for each bar

    I modified the bars chart to accept multiple values for each bar.

    Why: I need a graph to tell me the percentage of success and fails for each method per day.

    opened by dynaum 10
  • Is it possible to group in bar chart?

    Is it possible to group in bar chart?

    (BTW, it's currently not possible to view any of the samples on JS Bin. The message "This bin needs a pro account" is displayed.)

    But we have the need to group bar charts. Specifically, I want two show two related bars next to each other. Is this supported?

    opened by SoftCircuits 4
  • How to reload chart without whole page?

    How to reload chart without whole page?

    Hi. May i get some help? why it still doesn't work? thanks for help.

    my code: