Simple widget to render bubble charts on Dashing
CoffeeScript CSS Ruby HTML
Latest commit 64bd365 Sep 30, 2016 Jorge Morgado Initial release
Permalink
Failed to load latest commit information.
LICENSE.md Initial release Sep 30, 2016
README.md Initial release Sep 30, 2016
bubble_chart.coffee Initial release Sep 30, 2016
bubble_chart.html Initial release Sep 30, 2016
bubble_chart.scss Initial release Sep 30, 2016
my_bubblechart_job.rb Initial release Sep 30, 2016

README.md

dashing-bubblechart

Preview

BubbleChart

Description

Simple Dashing widget (and associated job) to render bubble charts. Uses Chart.js library.

Dependencies

Download the latest v2.x.x release of Chart.bundle.min.js from https://github.com/chartjs/Chart.js/releases and copy it into assets/javascripts. Make sure to remove any older versions of Chart.js from the assets/javascripts folder.

Usage

Create the directory widgets/bubble_chart and copy this widget's files into that folder.

Add the following code on the desired dashboard:

<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
  <div data-id="bubblechart" data-view ="BubbleChart" data-title="Bubble Chart" data-moreinfo=""></div>
</li>

Create your bubble chart job my_bubblechart_job.rb:

# Note: change this to obtain your chart data from some external source
data = [
  {
    label: 'First dataset',
    data: [
      { x: rand(30), y: rand(30), r: rand(5..15), },
      { x: rand(30), y: rand(30), r: rand(5..15), },
      { x: rand(30), y: rand(30), r: rand(5..15), },
      { x: rand(30), y: rand(30), r: rand(5..15), },
      { x: rand(30), y: rand(30), r: rand(5..15), },
    ],
    backgroundColor: '#F7464A',
    hoverBackgroundColor: '#FF6384',
  },
  {
    label: 'Second dataset',
    data: [
      { x: rand(30), y: rand(30), r: rand(5..15), },
      { x: rand(30), y: rand(30), r: rand(5..15), },
      { x: rand(30), y: rand(30), r: rand(5..15), },
      { x: rand(30), y: rand(30), r: rand(5..15), },
      { x: rand(30), y: rand(30), r: rand(5..15), },
    ],
    backgroundColor: '#46BFBD',
    hoverBackgroundColor: '#36A2EB',
  },
]
options = { }

send_event('bubblechart', { datasets: data, options: options })

Title Position

By default the title will be displayed in the center of the widget. If you prefer to move it to the top, change the $title-position variable on the SCSS file. Example:

$title-position:    top;

Margins

You can also adjust the chart's margins: top, left, right and bottom. By default they are all 0 (pixels) to use the whole available space. But if needed you can change their value using the data- attributes. Example:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="bubblechart" data-view ="BubbleChart" data-left-margin="5" data-top-margin="10"></div>
</li>

If not set, both right and bottom margins will be equal to left and top margins respectively. This is likely what you want to keep the chart centered within the widget. If not, set their values also using the data- attributes:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="bubblechart" data-view ="BubbleChart" data-right-margin="10" data-bottom-margin="5"></div>
</li>

Contributors

License

This widget is released under the MIT License.

Other Chart.js Widgets