Skip to content

Instantly share code, notes, and snippets.

@pridemusvaire
Forked from tywhang/README.md
Created September 2, 2016 11:43
Show Gist options
  • Save pridemusvaire/453ff85ba5a8f450ef5a6923d184ce28 to your computer and use it in GitHub Desktop.
Save pridemusvaire/453ff85ba5a8f450ef5a6923d184ce28 to your computer and use it in GitHub Desktop.
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)"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment