Questions tagged [morris.js]

A charting library with dependencies on jQuery and Raphael

A charting library with dependencies on jQuery and Raphael.

Example

Add a <div> tag in the <body> that will contain your chart:

<div id="myfirstchart" style="height: 250px;"></div>

Add a <script> tag with the following code:

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    {year: '2008', value: 20},
    {year: '2009', value: 10},
    {year: '2010', value: 5},
    {year: '2011', value: 5},
    {year: '2012', value: 20}
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value']
});

The result:

Example morris.js chart

Supported Chart Types

  • Line and area charts
  • Bar charts
  • Donut charts

Latest stable version

  • 0.5.1 / 15 June 2014

License

  • Simplified BSD License

Visit the morris.js website for examples on how to get started or Github to see the source code.

587 questions
34
votes
6 answers

morris.js Graph container element not found

Why am I getting an exception Uncaught Error: Graph container element not found when using morris.js?
Gene Bo
  • 11,284
  • 8
  • 90
  • 137
21
votes
4 answers

Using string for xkey in morrise charts

I am trying to use morrise charts to build a line chart that will display vehicles' numbers according to days among the week. The problem is when I use String in the xKey the results appears like this: but if I replaced them with numbers, it works…
hasan.alkhatib
  • 1,509
  • 3
  • 14
  • 28
12
votes
2 answers

Morris.js chart not working inside of a bootstrap tab

I have a situation where I am trying to use MorrisJS charts inside two different bootstrap tabs. The chart loads fine in the first (default) tab but when I click into the second tab the chart doesn't load properly at all. It is very odd as I am…
zgirod
  • 4,189
  • 3
  • 28
  • 36
11
votes
4 answers

Varying bar colors with morris.js bar chart?

I'm a JavaScript beginner using morris.js to create a bar chart where I need each bar containing a y value to be a different color. The code below shows what I've done so far Morris.Bar({ element: 'calls-made', data: [ { y: 'Person A', a: 10 }, { y:…
pooja-bangar
  • 131
  • 1
  • 1
  • 4
10
votes
2 answers

Line Chart with Int as x axis, not Date

I would like to display a chart which shows integers on the x axis instead of dates. Here is a fiddle of the example: http://jsfiddle.net/cs3vigny/srmqcfjh/ new Morris.Line({ element: 'film-compare-chart', data: [ { week: 0, a: 2, b:…
Camille Sévigny
  • 5,104
  • 4
  • 38
  • 61
10
votes
3 answers

Morris js Display values in percentage format

I am drawing some charts for a school project pulling data from a mysql database. Here is what I've done so far: DONUT CHARTS JS CODE: Morris.Donut({ element: 'donut-quanti', data: [ {label: "USE FACEBOOK", value:
Aaron Ullal
  • 4,855
  • 8
  • 35
  • 63
10
votes
7 answers

How to place a text on morris.js bar graph

I have a morris.js bar graph. I want to place count on top of this graph. I looked into morris.js bar doc, could not find any. On hover it should display value but on top of bar it should display count. Is there a way to do that? something like…
AabinGunz
  • 12,109
  • 54
  • 146
  • 218
10
votes
2 answers

Morris graphs. Have custom tooltip when hover

I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me…
Varun Jain
  • 1,901
  • 7
  • 33
  • 66
9
votes
1 answer

chart.redraw() not working after setting event-line

I'm using the morris.js chart along with the bootstrap slider. What I want to do: If the slider is moved, I want to insert an event-line into the chart at the position of the sliders value. Nothing special. The problem: The chart isn't redrawing…
C4d
  • 3,183
  • 4
  • 29
  • 50
9
votes
1 answer

Chart line morris.js format date in X axis

I'm using morris.js line chart in order to display different series values. I would like to format my X axis so instead of the year I can place a 3 chacarter day of week. Example: 2016-05-10 should be THU-05-10 This is my actual…
VAAA
  • 14,531
  • 28
  • 130
  • 253
9
votes
1 answer

morris.js issue with hours on x-axis

I am trying to create something like the google analytics Audience Overview graph. I am trying to put Hours starting from 12:00am midnight to 11:00pm on the x-axis This is what I am currently using: Morris.Line({ element: 'chart_div_compare', …
user1050544
  • 437
  • 5
  • 24
9
votes
1 answer

Backbone collection into morris.js d="M,0,0" error

Hello I'm studying backbone and I have created a php api to work with backbone and now I'm trying to draw a collection retrieved from a get request with morris. Here is my data retrieved from php…
0x_Anakin
  • 3,229
  • 5
  • 47
  • 86
8
votes
2 answers

How to destroy Morris chart data before updating new data in controller using angularjs?

Am loading graph based on selected item using angularjs. If i select the first item i am getting the details in my controller function am displaying it.when i select the next item,graph loading but first selected item details not destroying.if i…
divya
  • 193
  • 3
  • 15
8
votes
0 answers

Morris Donut - Throws a Matrix NaN error when choosing other tab and resizing

I've been encountered in an issue that was very illusive. I have two tabs: "Dashboard", "Edit App". In "Dashboard" I have a Morris Donut chart. In "Edit App" there's no Morris charts at all. The issue is that when I choose "Edit App" and resize the…
Eli Van Rock
  • 157
  • 1
  • 1
  • 15
8
votes
1 answer

can't use strings instead of integers in area charts in morris charts library

Bar Chart Example Morris.Bar({ element: 'bar-example', data: [ { y: 'dddd', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y:…
underscore
  • 6,495
  • 6
  • 39
  • 78
1
2 3
39 40