Error trying to create Google Sparkline widget

[derwin12]

Looking for some help putting this widget together. No errors on the console the line doesn't render either. (lines added for console display debugging) This is based on the prior google charts widgets.

google_spark.coffee

class Dashing.GoogleSpark extends Dashing.Widget

  @accessor 'current', ->
    return @get('displayedValue') if @get('displayedValue')
    points = @get('points')
    if points
      points[points.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"))
    console.log "SPARKLINE Running"

    console.log "SPARKLINE Running DEBUG 2"
    @chart = new google.visualization.ImageSparkLine($(@node).find(".sparkline")[0])
    console.log "SPARKLINE Running DEBUG 3"
    @options =
      height: height
      width: width
      showAxisLines: @get('showaxislines') || false
      showValueLabels: @get('showValueLabels') || false

    console.log "SPARKLINE Options"
    console.log @options

    if @get('points')
      @data = google.visualization.arrayToDataTable @get('points')
    else
      @data = google.visualization.arrayToDataTable []

    console.log "Data"
    console.log @data

    console.log "SPARKLINE draw"
    @chart.draw @data, @options

  onData: (data) ->
    if @chart
      console.log "SPARKLINE onData"
      @data = google.visualization.arrayToDataTable data.points
      @chart.draw @data, @options

google_spark.html

<h1 class="title" data-bind="title"></h1>

<div class="sparkline"></div>

---

google_spark.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #fb96fb;

// ----------------------------------------------------------------------------
// Widget-GoogleGauge styles
// ----------------------------------------------------------------------------
.widget-google-spark {

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

  .title {
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0px;
  }

  .chart {
    position: absolute;
    left: 0px;
    top: 0px;
  }

}

[somehuman]

Did you ever find a solution to this?

[derwin12]

Nope .. could never figure it out.

[masha256]

Looks like maybe you didnt add the google visualizations library? I wrote a few google viz widgets. Here is my column chart one that you might be able to reference: https://gist.github.com/machadolab/e12f31bf7e6a602f3229