Create a gist now

Instantly share code, notes, and snippets.

@tywhang /README.md
Last active Feb 20, 2017

Easily add Charts into Dashing with Chartjs (Line, Bar, Radar, Polar Area, Pie, Doughnut)

dashing-chartjs

An easy interface to use all of chartjs.org'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="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></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/dashing-chartjs.coffee

Then in assets/javascripts/application.coffee, 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!!!

Example

Let's create a simple line chart!

1. Add your html
widgets/example/example.html

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

2. Call the lineChart function and pass in parameters
widgets/example/example.coffee
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]
    }
  ]

Usage

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: ->
    @polarAreaChart("otherChart",
      [{
        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: ->
    @pieChart("otherChart",
      [{
        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: ->
    @doughnutChart("otherChart",
      [{
        value: 20
        colorName: 'green'
        label: "Apple Fritter"
      }, {
        value: 13
        colorName: 'blue'
        label: "Chocolate"
      }, {
        value: 12
        colorName: 'darkgray'
        label: "Maple"
      }])

Colors

Currently available colors

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

class Dashing.Chartjs extends Dashing.Widget
polarAreaChart: (id, datasets) ->
data = datasets.map (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 = datasets.map (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 = datasets.map (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: datasets.map (d) => @merge(this.color(d.colorName), label: d.label, data: d.data)
new Chart(document.getElementById(id).getContext("2d")).Line(data)
barChart: (id, labels, datasets) ->
data = @merge labels: labels,
datasets: datasets.map (d) => @merge(this.color(d.colorName), label: d.label, data: d.data)
new Chart(document.getElementById(id).getContext("2d")).Bar(data)
radarChart: (id, labels, datasets) ->
data = @merge labels: labels,
datasets: datasets.map (d) => @merge(this.color(d.colorName), label: d.label, data: d.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)"
@Spartacus38

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

@Spartacus38

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

@Spartacus38

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 example.coffee 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
enriquemt commented Apr 23, 2016 edited

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.

@Spartacus38

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
jbrass commented Jun 1, 2016

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

@noahdev
noahdev commented Jun 10, 2016

Jobs?

@eyalzek
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
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
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

@vlasvlasvlas

hi. no jobs example?

@Brianm0440

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

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

Thanks

@poalcospe

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

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