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
## 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>
Run in terminal in project directory
smashing install b4a67180da816eb0695f
<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>
<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>
<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>
<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>
@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>
@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>
blue | cyan | darkgray | gray | green | lightgray | magenta | red | yellow
And as some of you ask in comments above how to use it with jobs - you pass args just like in every other job:
send_event('dashboard_name', {labels: ['Some', 'Labels', 'Of', 'Your', 'Chosing'], datasets: [12, 23, 34, 21, 32, 12], colors: ['green, yellow, magenta'] })
@tywhang: Thanks for your work :)