CODEWITHSUNDEEP
javascriptruby-on-rails
Lorenz
Lorenz

Reputation: 775

Generating a Chartjs chart on the backend with Ruby on Rails

I'm using Chartjs to make some beautiful charts in my rails application. Everything works great, except I want to be able to email an image of those charts to people. I realize I'm using a javascript library to produce the images. Is there any way to have rails run this library on the backend, save the chart image, and make it available as an email attachment?

Upvotes: 1

Views: 2354

Answers (3)

ty.
ty.

Reputation: 11132

In order to email a Chart.js chart, you'll have to render it as an image. This usually means setting up a backend that has a Javascript runtime, which is a pretty heavyweight solution for just putting a chart in an email.

I had this problem as well and built QuickChart, which is an open source web service that renders a Chart.js config as an image.

For example, suppose this is your Chart.js configuration that you're currently using in your application:

{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Data',
      data: [ 50, 60, 70, 180, 190 ]
    }]
  }
}

Pack this configuration into a URL and pass it to the https://quickchart.io/chart?c= endpoint, like so:

https://quickchart.io/chart?bkg=white&c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Data',data:[50,60,70,180,190]}]}}

It's best practice to URL encode your config. Your browser does this automatically when you click the link, but you'll do it yourself in your Ruby application:

require 'uri'
config = """{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Data',
      data: [ 50, 60, 70, 180, 190 ]
    }]
  }
}
"""
encoded = URI::encode(config.strip)

# Output a URL to my image
puts "https://quickchart.io/chart?c=#{encoded}"

In this example, the output is a URL to your rendered Chart.js chart. This chart image is embeddable directly in email because it does not require Javascript:

Rendered chart image

Upvotes: 6

Idle Man
Idle Man

Reputation: 86

Actually im using a new service called wannacharts.com There's no need of Js or Jquery... you only need to post a json to the url of wannacharts and the api returns an base64 image in json or a url to a png image with the chart inside. Is very easy and clean.

  • Create your account,
  • login
  • get the api-key,
  • and use the chart designer inside to set the general parameters of your chart.

the json as shown in their site must have this format:

{
    "provider_id":1,
    "chart_id": 2,
    "api_key":"m075881c4a169784dd05bdaf33",
    "data": [{
      "color":"#f1c454",
      "xValue": "Jan",
      "yValue": 21.5
  },{
      "color":"#79b599",
      "xValue": "Feb", 
      "yValue": 25
  },{
      "color":"#d97e78",
      "xValue": "Mar", 
      "yValue": 14.4
  }]
  }

the faq of the site is here http://wannacharts.com/faq.php

Upvotes: -1

rwold
rwold

Reputation: 2476

If you want to use a JavaScript library server-side, you need a Javascript runtime on the server- i.e. Node.js. This is a dependency of the asset pipeline anyway, so you likely already have it installed. Then perhaps you could give this library a try, although I've never used it myself. npm will be your friend if it turns out to be a dud.

The question then is how you would invoke it from Rails. A quick Google suggests there's a gem for exactly that, but again I'm afraid I haven't used it, and some people on here seem to find it frustrating to use.

Your other option would be to run a server to provide this functionality as a microservice that responds to HTTP requests, which you can easily send from the backend using something like rest-client. It's actually very easy to set something like this up using Express.js.

EDIT: Having answered your question as directly as I can, you might like to investigate Chartkick, which has a ruby API but I believe has Chart.js as a dependency, so you might be able to use it to reproduce your charts.

Upvotes: 0

Related Questions