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

README.md

smashing-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 smashing

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/2.7.2/Chart.min.js"></script>

before this script tag:

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

2. Install smashing-chartjs

Run in terminal in project directory

smashing install b4a67180da816eb0695f

Example

Let's create a simple line chart!

Usage

Line Chart

<div
  data-id="line-chart"
  data-view="Chartjs"
  data-type="line"
  data-labels="Week 1,Week 2,Week 3,Week 4,Week 5"
  data-colornames="blue,blue,blue,blue,blue"
  data-datasets="10,39,20,49,87"
  data-height="400"
  data-width="400"
></div>

Bar Charts

<div
  data-id="bar-chart"
  data-view="Chartjs"
  data-type="bar"
  data-labels="Day 1,Day 2,Day 3,Day 4,Day 5"
  data-colornames="yellow,yellow,yellow,yellow,yellow"
  data-datasets="210,339,220,494,109"
  data-height="400"
  data-width="400"
></div>

Radar Charts

<div
  data-id="radar-chart"
  data-view="Chartjs"
  data-type="radar"
  data-labels="Crossfit,Yoga,Weight Lifting,Running,Swimming,Watching TV"
  data-colornames="yellow,yellow,yellow,yellow,yellow,yellow"
  data-datasets="210,339,220,234,311,494"
  data-height="400"
  data-width="400"
></div>

Polar Area Charts

<div
  data-id="chart-polarArea"
  data-view="Chartjs"
  data-type="polarArea"
  data-labels="Week 1,Week 2,Week 3,Week 4,Week 5"
  data-colornames="blue,yellow,green,cyan,gray"
  data-datasets="10,39,20,49,87"
  data-height="400"
  data-width="400"
></div>

Pie Charts

@pieChart(elementId, dataSets)

<div
  data-id="chart-pie"
  data-view="Chartjs"
  data-type="pie"
  data-labels="Pumpkin,Apple,Pizza,Rhubarb"
  data-colornames="red,green,yellow,gray"
  data-datasets="13,32,40,20"
  data-height="400"
  data-width="400"
></div>

Doughnut Charts

@doughnutChart(elementId, dataSets)

<div
  data-id="doughnut-pie"
  data-view="Chartjs"
  data-type="doughnut"
  data-labels="Apple Fritter,Chocolate,Maple"
  data-colornames="green,blue,darkgray"
  data-datasets="20,13,12"
  data-height="400"
  data-width="400"
></div>

Colors

Currently available colors

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

chartjs.coffee

class Dashing.Chartjs extends Dashing.Widget

  constructor: ->
    super
    @id = @get("id")
    @type = @get("type")
    @labels = @get("labels") && @get("labels").split(",")
    @datasets = @get("datasets") && @get("datasets").split(",")
    @colorNames = @get("colornames") && @get("colornames").split(",")

  ready: ->
    switch @type
      when 'pie', 'doughnut', 'polarArea'
        @circularChart @id, type: @type, labels: @labels, colors: @colorNames, datasets: @datasets
      when 'line', 'bar', 'radar'
        @linearChart @id, type: @type, labels: @labels, colors: @colorNames, datasets: @datasets
      else
        return

  circularChart: (id, { type, labels, colors, datasets, options={} }) ->
    data = @merge labels: labels, datasets: [@merge data: datasets, @colors(colors)]
    new Chart(document.getElementById(id), { type: type, data: data }, options)

  linearChart: (id, { type, labels, colors, datasets, options={} }) ->
    data = @merge labels: labels, datasets: [@merge(@colors(colors), data: datasets)]
    new Chart(document.getElementById(id), { type: type, data: data }, options)

  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"

  colors: (colorNames) ->
    backgroundColor: colorNames.map (colorName) => @backgroundColor(colorName)
    borderColor: colorNames.map (colorName) => @borderColor(colorName)
    borderWidth: colorNames.map (colorName) -> 1
    pointBackgroundColor: colorNames.map (colorName) => @pointBackgroundColor(colorName)
    pointBorderColor: colorNames.map (colorName) => @pointBorderColor(colorName)
    pointHoverBackgroundColor: colorNames.map (colorName) => @pointHoverBackgroundColor(colorName)
    pointHoverBorderColor: colorNames.map (colorName) => @pointHoverBorderColor(colorName)

  color: (colorName) ->
    backgroundColor: @backgroundColor(colorName)
    borderColor: @borderColor(colorName)
    borderWidth: 1
    pointBackgroundColor: @pointBackgroundColor(colorName)
    pointBorderColor: @pointBorderColor(colorName)
    pointHoverBackgroundColor: @pointHoverBackgroundColor()
    pointHoverBorderColor: @pointBackgroundColor(colorName)

  backgroundColor: (colorName) -> "rgba(#{ @colorCode()[colorName] }, 0.2)"
  borderColor: (colorName) -> "rgba(#{ @colorCode()[colorName] }, 1)"
  pointBackgroundColor: (colorName) -> "rgba(#{ @colorCode()[colorName] }, 1)"
  pointBorderColor: (colorName) -> "rgba(#{ @colorCode()[colorName] }, 1)"
  pointHoverBackgroundColor: -> "fff"
  pointHoverBorderColor: (colorName) -> "rgba(#{ @colorCode()[colorName] }, 0.8)"

  circleColor: (colorName) ->
    backgroundColor: "rgba(#{ @colorCode()[colorName] }, 0.2)"
    borderColor: "rgba(#{ @colorCode()[colorName] }, 1)"
    borderWidth: 1
    hoverBackgroundColor: "#fff"
    hoverBorderColor: "rgba(#{ @colorCode()['blue'] },0.8)"

chartjs.html

<canvas data-bind-id="id" data-bind-data-height="height | default 200" data-bind-data-width="width | default 200"></canvas>

jobs_example.rb

SCHEDULER.every "2s" do |job|
  send_event("chart", {
  	type: "bar",
  	header: "Calories Burned",
  	labels: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"],
  	colorNames: ["yellow", "yellow", "yellow", "yellow", "yellow"],
  	datasets: [210, 339, 220, 494, 109]
  })
end

@grubbychicken Getting those options passed correctly is definitely on my TO-DO list. I haven't worked on this project in a while. It could take some time for me to get to it.

You are welcome to make a Pull Request! :D

Hi @tywhang
Thanks for the solution.
Could you please explain what options now available to pass and how to do this. I tried everything from above. It didn't work

Hi,
I am having trouble setting up a pie chart with an additional layer. Havent been able to correclty pass a second dataset. Does anyone have a quick example/tip of how to do it? Thx!

@tywhang I am seeing this error when I run smashing install b4a67180da816eb0695f

.rbenv/versions/3.0.1/lib/ruby/gems/3.0.0/gems/smashing-1.3.4/lib/dashing/downloader.rb:14:in `initialize': No such file or directory @ rb_sysopen - https://api.github.com/gists/b4a67180da816eb0695f (Errno::ENOENT)