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

README.md

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

dashing-chartjs.js.coffee

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)"