CODEWITHSUNDEEP
ruby-on-railscoffeescriptraphaelmorris.js
tom_servo
tom_servo

Reputation: 308

Morris.js issue in Rails

I am following Railscast #223 to try to get some simple line graphs into my Rails 3.2.9 site using Morris.js and Raphael. I've downloaded the raphael and morris javascript files and added them to the vendor/assets/javascripts folder, then added the relevant lines to the application.js:

//= require raphael
//= require morris

I then created a simple HTML div for the chart:

<div id="annual"></div>

And added the relevant CoffeeScript to the associated javascript file (tenants.js.coffee):

jQuery ->
    Morris.Line
        element: 'annual'
        data: [
            {y: '2012', a: 100}
            {y: '2011', a: 75}
            {y: '2010', a: 50}
            {y: '2009', a: 75}
            {y: '2008', a: 50}
            {y: '2007', a: 75}
            {y: '2006', a: 100}
        ]
        xkey: 'y'
        ykeys: ['a']
        labels: ['Series A']

The page loads fine but without producing the graph. I'm new to CoffeeScript so I'm not sure how to debug this. I'm sure it's something simple I'm missing.

Thanks!

Upvotes: 1

Views: 1279

Answers (4)

Ayan Saha
Ayan Saha

Reputation: 1

Nothing just delete //= require turbolinks .This solved by issue

Upvotes: 0

Yuri Malov
Yuri Malov

Reputation: 1257

If were are using simple js file, example annual.js, there are use code:

jQuery(function() {
  return Morris.Line({
    element: 'annual',
    data: [
      {y: '2012', a: 100},
      {y: '2011', a: 80},
      {y: '2010', a: 75},
      {y: '2009', a: 70},
      {y: '2008', a: 65},
      {y: '2007', a: 60},
      {y: '2006', a: 55}
      ],
    xkey: 'y',
    ykeys: ['a'],
    labels: ['Series A']
  });
});

For converting js to coffee = http://js2coffee.org/

Upvotes: 1

Justin
Justin

Reputation: 4940

Make sure your CoffeeScript is indented (spacing) properly.

Upvotes: 0

cintrzyk
cintrzyk

Reputation: 447

Try this solution in CoffeeScript:

Morris.Line({
  element: 'annual'
  data: [
    {y: '2012', a: 100}
    {y: '2011', a: 75}
    {y: '2010', a: 50}
    {y: '2009', a: 75}
    {y: '2008', a: 50}
    {y: '2007', a: 75}
    {y: '2006', a: 100}
  ]
  xkey: 'y'
  ykeys: ['a']
  labels: ['Series A']
})

Upvotes: 1

Related Questions