Create a gist now

Instantly share code, notes, and snippets.

@tywhang /
Last active Sep 15, 2017

What would you like to do?
Easily add Charts into Dashing with Chartjs (Line, Bar, Radar, Polar Area, Pie, Doughnut)


An easy interface to use all of's charts.

Inspired by my own pain and suffering of trying to add a simple chart to dashing

Make awesome charts like these:

## Installation ##### 1. Import Chartjs library In `dashboards/layout.erb`, add this script tag:

<script type="text/javascript" src="//"></script>

before this script tag:

<script type="text/javascript" src="/assets/application.js"></script>

2. Import Dashing.Chartjs Widget

Copy and paste the contents of this file into: assets/javascripts/

Then in assets/javascripts/, add #= require dashing-chartjs right after #= require dashing.js so it looks like this:

# dashing.js is located in the dashing framework
# It includes jquery & batman for you.
#= require dashing.js
#= require dashing-chartjs
3. Create a your widget!

Simply inherit from Dashing.Chartjs (instead of Dashing.Widget)

class Dashing.MyCharts extends Dashing.Chartjs

Now you have access to all the functions!!!


Let's create a simple line chart!

1. Add your html

<canvas id="myChart" width="400" height="300"></canvas>

2. Call the lineChart function and pass in parameters
class Dashing.Example extends Dashing.Chartjs
  ready: ->
    @lineChart 'myChart', # The ID of your html element
      ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5"], # Horizontal labels
        label: 'Number of pushups' # Text displayed when hovered
        colorName: 'blue' # Color of data
        data: [10, 39, 20, 49, 87] # Vertical points
3. Awe at your beautiful chart

Displaying multiple data in one chart is a breeze too!

@lineChart 'myChart', # Horizontal labels
  ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5"],
      # First data points
      label: 'Number of pushups'
      colorName: 'blue'
      data: [10, 39, 20, 49, 87]
    }, {
      # Second data points
      label: 'Number of pullups'
      colorName: 'red'
      data: [3, 2, 10, 12, 20]


Line Chart

@lineChart(elementId, horizontalLabels, dataSets)

class Dashing.Line extends Dashing.Chartjs
  ready: ->
    @lineChart 'myChart',
      ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5"],
        label: 'Number of pushups'
        colorName: 'blue'
        data: [10, 39, 20, 49, 87]

Bar Charts

@barChart(elementId, horizontalLabels, dataSets)

class Dashing.Bar extends Dashing.Chartjs
  ready: ->
    @lineChart 'myChart',
      ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"],
        label: 'Customer count'
        colorName: 'blue'
        data: [210, 339, 220, 494, 109]

Radar Charts

@radarChart(elementId, horizontalLabels, dataSets)

class Dashing.Radar extends Dashing.Chartjs
  ready: ->
    @radarChart 'myChart',
      ["Crossfit", "Yoga", "Weight Lifting", "Running", "Swimming", "Watching TV"],
        label: 'Favorite Workout'
        colorName: 'yellow'
        data: [210, 339, 220, 234, 311, 494]

Polar Area Charts

@polarAreaChart(elementId, dataSets)

class Dashing.Polar extends Dashing.Chartjs
  ready: ->
        value: 300
        colorName: 'red'
        label: "Red"
      }, {
        value: 50
        colorName: 'green'
        label: "Green"
      }, {
        value: 88
        colorName: 'yellow'
        label: "Yellow"

Pie Charts

@pieChart(elementId, dataSets)

class Dashing.Pie extends Dashing.Chartjs
  ready: ->
        value: 13
        colorName: 'red'
        label: "Pumpkim"
      }, {
        value: 32
        colorName: 'green'
        label: "Apple"
      }, {
        value: 40
        colorName: 'yellow'
        label: "Pizza"
      }, {
        value: 20
        colorName: 'gray'
        label: "Rhubarb"

Doughnut Charts

@doughnutChart(elementId, dataSets)

class Dashing.Doughnut extends Dashing.Chartjs
  ready: ->
        value: 20
        colorName: 'green'
        label: "Apple Fritter"
      }, {
        value: 13
        colorName: 'blue'
        label: "Chocolate"
      }, {
        value: 12
        colorName: 'darkgray'
        label: "Maple"


Currently available colors

blue | cyan | darkgray | gray | green | lightgray | magenta | red | yellow

class Dashing.Chartjs extends Dashing.Widget
polarAreaChart: (id, datasets) ->
data = (d) => @merge(this.circleColor(d.colorName), label: d.label, value: d.value)
new Chart(document.getElementById(id).getContext("2d")).PolarArea(data)
pieChart: (id, datasets) ->
data = (d) => @merge(this.circleColor(d.colorName), label: d.label, value: d.value)
new Chart(document.getElementById(id).getContext("2d")).Pie(data)
doughnutChart: (id, datasets) ->
data = (d) => @merge(this.circleColor(d.colorName), label: d.label, value: d.value)
new Chart(document.getElementById(id).getContext("2d")).Doughnut(data)
lineChart: (id, labels, datasets) ->
data = @merge labels: labels,
datasets: (d) => @merge(this.color(d.colorName), label: d.label, data:
new Chart(document.getElementById(id).getContext("2d")).Line(data)
barChart: (id, labels, datasets) ->
data = @merge labels: labels,
datasets: (d) => @merge(this.color(d.colorName), label: d.label, data:
new Chart(document.getElementById(id).getContext("2d")).Bar(data)
radarChart: (id, labels, datasets) ->
data = @merge labels: labels,
datasets: (d) => @merge(this.color(d.colorName), label: d.label, data:
new Chart(document.getElementById(id).getContext("2d")).Radar(data)
merge: (xs...) =>
if xs?.length > 0
@tap {}, (m) -> m[k] = v for k, v of x for x in xs
tap: (o, fn) -> fn(o); o
colorCode: ->
blue: "151, 187, 205"
cyan: "0, 255, 255"
darkgray: "77, 83, 96"
gray: "148, 159, 177"
green: "70, 191, 189"
lightgray: "220, 220, 220"
magenta: "255, 0, 255"
red: "247, 70, 74"
yellow: "253, 180, 92"
color: (colorName) ->
fillColor: "rgba(#{ @colorCode()[colorName] }, 0.2)"
strokeColor: "rgba(#{ @colorCode()[colorName] }, 1)"
pointColor: "rgba(#{ @colorCode()[colorName] }, 1)"
pointStrokeColor: "#fff"
pointHighlightFill: "#fff"
pointHighlightStroke: "rgba(#{ @colorCode()['blue'] },0.8)"
circleColor: (colorName) ->
color: "rgba(#{ @colorCode()[colorName] }, 1)"
highlight: "rgba(#{ @colorCode()[colorName] }, 0.8)"

YES!! Been looking for this, Dashing makes it so complicated for simple line charts.

I'm having the issues getting the multi-line chart working, it is only generating blank pages. Any advice?

Hello, how can I use this while using the jobs? For example using our memcache or API in the job, and then feeding into the example view? Or, can it be done view the on its own? I have tried a few different ways to get rand(n), and other various values as I still want the "scheduler" aspect of dashing to be useable. Thanks!

enriquemt commented Apr 23, 2016

I have been trying to update the example chart using curl and I couldn't. Could anyone help me? The only one I can update it right now it is changing its coffee file. Thanks in advance.

Unfortunately I can't get this to work as desired with the jobs feeding to the coffee :( This is by far the best visualization for Dashing, but having no luck getting my hash to properly import into the multi-line. I'm stuck with the funky/ugly Rickshaw multi-line render.

If anyone has advice, please let me know!!

jbrass commented Jun 1, 2016

Any examples on how to send data to the charts with jobs?

noahdev commented Jun 10, 2016


eyalzek commented Jun 20, 2016

Does dashing not support chartjs > v2? Having troubles passing options using v2.1.6, they don't have any effect.

Rudja971 commented Jul 4, 2016

Hi everyone. Sorry I am a novice, but I need a way to change the color of label. Someone to help me with this?

RolphH commented Sep 28, 2016

@eyalzek did you manage to have the options working? I'm facing the same issue. Somehow it looks like the options are not passed to the chart.js

hi. no jobs example?

@tywhang: Can you attach your complete line chart files?

  • widget.html
  • widget.scss
  • sample.erb
  • job file


Is it possible to link chartjs data to display with an Excel file ? So Excel table could be displayed as a chart dynamically

odedgol commented Apr 12, 2017

example full one ? is anyone own?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment