Skip to content

Instantly share code, notes, and snippets.

@swilcox
Last active October 6, 2017 21:08
Show Gist options
  • Save swilcox/6695849 to your computer and use it in GitHub Desktop.
Save swilcox/6695849 to your computer and use it in GitHub Desktop.
Multi-graph example widget for Shopify's Dashing dashboard

Multi-graph widget for Dashing

Description

Multi-graph widget for Shopify's dashing to display a comparison style graph (or stacked with a minor modification). Obviously, this is an example that is built heavily on the existing graph widget that is provided with dashing. This widget provides a more clear framework for expanding the graph for multiple series (or nodes) of data. After seeing the example code, it should be fairly easy to expand to 3 or more overlaid graphs (although colors might get tricky). And really, this is just a slightly greater use of the cool rickshaw graphs.

To use this widget:

  • copy mgraph.coffee, mgraph.html and mgraph.scss into a new /widgets/mgraph folder
  • copy multitest.rb into your /jobs folder

Then include the widget in a dashboard, by adding the following snippet to your dashboard layout file:

  • For a nice 2 tile-wide widget:
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">

      <div data-id="multitest" data-view="Mgraph" data-title="Multi Convergence" style="background-color:#ff9618"></div>
      
    </li>
class Dashing.Mgraph extends Dashing.Widget
@accessor 'current', ->
return @get('displayedValue') if @get('displayedValue')
points = @get('points')
if points
points[0][points[0].length - 1].y + ' / ' + points[1][points[1].length - 1].y
ready: ->
container = $(@node).parent()
# Gross hacks. Let's fix this.
width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
@graph = new Rickshaw.Graph(
element: @node
width: width
height: height
renderer: 'area'
stroke: false
series: [
{
color: "#fff",
data: [{x:0, y:0}]
},
{
color: "#222",
data: [{x:0, y:0}]
}
]
)
@graph.series[0].data = @get('points') if @get('points')
x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph)
y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
@graph.renderer.unstack = true
@graph.render()
onData: (data) ->
if @graph
@graph.series[0].data = data.points[0]
@graph.series[1].data = data.points[1]
@graph.render()
<h1 class="title" data-bind="title"></h1>
<h3 class="value" data-bind="current"></h2>
<p class="more-info" data-bind="moreinfo"></p>
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #dc5945;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.3);
$tick-color: rgba(0, 0, 0, 0.4);
// ----------------------------------------------------------------------------
// Widget-graph styles
// ----------------------------------------------------------------------------
.widget-mgraph {
background-color: $background-color;
position: relative;
svg {
position: absolute;
opacity: 0.4;
fill-opacity: 0.4;
left: 0px;
top: 0px;
}
.title, .value {
position: relative;
z-index: 99;
}
.title {
color: $title-color;
}
.more-info {
color: $moreinfo-color;
font-weight: 600;
font-size: 20px;
margin-top: 0;
}
.x_tick {
position: absolute;
bottom: 0;
.title {
font-size: 20px;
color: $tick-color;
opacity: 0.5;
padding-bottom: 3px;
}
}
.y_ticks {
font-size: 20px;
fill: $tick-color;
fill-opacity: 1;
}
.domain {
display: none;
}
}
# this is just the dummy sample using random data to illustrate
# replace the random data with your real data... wherever you get it from
# Populate the multi-graph with some initial points
points1 = []
points2 = []
(1..10).each do |i|
points1 << { x: i, y: rand(50) } # graph 1 initialization
points2 << { x: i, y: rand(50) } # graph 2 initialization
end
last_x = points1.last[:x]
SCHEDULER.every '2s' do
points1.shift
points2.shift
last_x += 1
points1 << { x: last_x, y: rand(50) } # this is where you'd add a data element for graph 1
points2 << { x: last_x, y: rand(50) } # this is where you'd add a data element for graph 2
send_event('multitest', points: [points1, points2])
end
@garycwallen
Copy link

Figured out the fill option. Do anyone know how to have the "points" have dots, or indicators of where the data is? Also, possible to add lines in the back.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment