bmiles · August 29, 2015 14:13
diff --git a/README.md b/README.md
diff --git a/charts.coffee b/charts.coffee
 class Dashing.Charts extends Dashing.Widget

  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"))
    chartType = @node.dataset.chartType
    data=@get('data')
    options= {
      width: width,
      height: height
      }
    console.log($(@node).children("div.ct-chart")[0])
    switch chartType
      when "Bar"
        @chart = new Chartist.Bar($(@node).children("div.ct-chart")[0], data, options)
      when "Line"
        @chart = new Chartist.Line($(@node).children("div.ct-chart")[0], data, options)
      when "Pie"
        @chart = new Chartist.Pie($(@node).children("div.ct-chart")[0], data, options)
      else
        @chart = new Chartist.Line($(@node).children("div.ct-chart")[0], data, options)

  onData: (data) ->
    if @chart
      @chart.update(data.data)
diff --git a/charts.html b/charts.html
 <h1 class="title" data-bind="title"></h1>

 <div class="ct-chart"></div>

 <p class="more-info" data-bind="moreinfo"></p>
diff --git a/charts.rb b/charts.rb
 # Populate the graph with some random points
 points = []
 (1..5).each do |i|
  points << rand(50)
 end
 last_points = points.last

 ## Job sends data object.
 # Format of data object is.

 # data: {
 #   labels: ["foo","bar", "baz", "bat", "nyan"],
 #   series: [
 #     [1,2,3,4,5],
 #     points.collect { |n| n * 2 }
 #   ]
 # }

 SCHEDULER.every '2s' do
  points.shift
  last_points += 1
  points << rand(50)
  poinst2 = points * 2
  send_event('chart', {
    data: {
      labels: ["foo","bar", "baz", "bat", "nyan"],
      series: [
        [1,2,3,4,5],
        points.collect { |n| n * 2 }
      ]
    }    
  })
 end
diff --git a/charts.scss b/charts.scss
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
 $background-color:  #EADBC4;

 $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-charts {

  background-color: $background-color;
  position: relative;

  svg {
    position: absolute;
    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;
  }
 }
diff --git a/dashing-chartist-screengrab.png b/dashing-chartist-screengrab.png
diff --git a/LICENSE.md b/LICENSE.md
	class Dashing.Charts extends Dashing.Widget

	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"))
	chartType = @node.dataset.chartType
	data=@get('data')
	options= {
	width: width,
	height: height
	}
	console.log($(@node).children("div.ct-chart")[0])
	switch chartType
	when "Bar"
	@chart = new Chartist.Bar($(@node).children("div.ct-chart")[0], data, options)
	when "Line"
	@chart = new Chartist.Line($(@node).children("div.ct-chart")[0], data, options)
	when "Pie"
	@chart = new Chartist.Pie($(@node).children("div.ct-chart")[0], data, options)
	else
	@chart = new Chartist.Line($(@node).children("div.ct-chart")[0], data, options)

	onData: (data) ->
	if @chart
	@chart.update(data.data)
	<h1 class="title" data-bind="title"></h1>

	<div class="ct-chart"></div>

	<p class="more-info" data-bind="moreinfo"></p>
	# Populate the graph with some random points
	points = []
	(1..5).each do \|i\|
	points << rand(50)
	end
	last_points = points.last

	## Job sends data object.
	# Format of data object is.

	# data: {
	# labels: ["foo","bar", "baz", "bat", "nyan"],
	# series: [
	# [1,2,3,4,5],
	# points.collect { \|n\| n * 2 }
	# ]
	# }

	SCHEDULER.every '2s' do
	points.shift
	last_points += 1
	points << rand(50)
	poinst2 = points * 2
	send_event('chart', {
	data: {
	labels: ["foo","bar", "baz", "bat", "nyan"],
	series: [
	[1,2,3,4,5],
	points.collect { \|n\| n * 2 }
	]
	}
	})
	end
	// ----------------------------------------------------------------------------
	// Sass declarations
	// ----------------------------------------------------------------------------
	$background-color: #EADBC4;

	$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-charts {

	background-color: $background-color;
	position: relative;

	svg {
	position: absolute;
	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;
	}
	}