Run Job at startup about dashing

[chrisspang]

Also just stumbled across this thread - the issue for me seems to be that 'onData' is fired before 'ready'. I'm currently using a work-around that:

1. First call to onData() (with the old data) does create the (d3) svg successfully, but this gets lost (DOM not ready or something - I'm new to this stuff)

2. First call to ready() just calls onData()

3. onData() uses the stored values (@get("value")) to build the visualiation

   Untested rough example below:

  ready: ->
    @onData({ value: 0 })

  onData: (dataFull) ->
    data = dataFull.value    
    if (!data)
      data = @get("value")

    if (!data)
      return

[pushmatrix]

When someone loads the dashboard in their browser, all widgets will automatically receive the last values that the job server fetched -- you shouldn't need to tell the job to re-run. Your widget should receive the daily value.

Is this behaviour not showing for you?

[aaldrich]

I think the problem is that the object data needs to be created on the client side which means on the initial load I have to create a new object Highcharts.Chart. However I don't have the data to feed it at that point because that is populated by the job which also creates a new Highcharts.Chart with the values.

I'm not sure how to store and get the latest Highcharts.Chart object so that it is available in the ready: event.

[pushmatrix]

It won't be available in the ready event. However, if the job has already run, then the onData callback inside your widget will be called as soon as the page loads (but only after the ready event is triggered). Can you initialize the chart within ready, but update its data within onData? Perhaps I'm not fully understanding the issue.

[aaldrich]

Let me try to better explain it:

In my widget ready event I initialize a blank chart.
In my widget onData event I take the data passed from the job and recreate that chart with the values

Here are the steps I'm performing

1. I start the server
2. I go to my page http://localhost:3030/sample and my chart is empty (I Would have expected the chart to have data at this point but there isn't any)
3. I stop the server
4. I start the server and my chart receives the data (I'm assuming it is because the job is run when the server starts and the page is listening for it properly)
5. I refresh the page and the chart is blank again

So basically I want to make step 4 work whenever the page is loaded so it loads the chart with data. I hope this helps. If I need to I can record a video of the events. Thank you so much for your help.

[aaldrich]

I dug into it some more and it might be a bug in the highcharts.js that is causing this. I have a function that ensures the container exists in the dom before building the chart however I still get an error 13 which means the chart can't attach to the container. I see it executing in the ready event and then I see the onData event firing after that so I think Dashing is doing what is supposed to.

[pushmatrix]

There was mention to an error 13 happening over here: #42

We were able to get highcharts running in there.

[dieterdemeyer]

@aaldrich would you be willing to share your highcharts widget implementation code ? With that I mean the widget.coffee, widget.html and widget.scss and possibly a sample erb ?
Thanks in advance..

[aaldrich]

Absolutely I have it mostly just showing line charts but here is what I have right now:

highchartline.coffee

class Dashing.Highchartline extends Dashing.Widget

  createChart: (series,x_axis,y_axis) ->
    container = $(@node).find('.highchart-container')
    if $(container)[0]
      @chart = new Highcharts.Chart
        chart:
          renderTo: $(container)[0]
          type: "line"
        series: series
        xAxis: {
          categories: x_axis
        }
        yAxis: {
          title: {
            text: y_axis
          }
        }
        plotOptions: {
          line: {
            dataLabels: {
              enabled: true
            }
          }
        }

  onData: (data) ->
    @createChart(data.series,data.x_axis,data.y_axis)

highchartline.html

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

<div class="highchart-container" style="width: 100%; height: 400px"></div>

highchartline.scss

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

// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-highchartline { 

  background-color: $background-color;  

  &.large h3 {
    font-size: 65px;
  }
}

erb snippet

<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
      <div data-id="csat_history" data-view="Highchartline" data-title="CSAT History" style="background-color:#efad1b;">></div>
</li>

job to feed data. scaled down to hide private data

SCHEDULER.every '5s', :first_in => 0 do |job|
  updated_at = Time.now.strftime('%m/%d/%Y')

  points = [{name: "Blah", data: blah_csat_points},
            {name:"CE", data: ce_csat_points},
            {name:"Ops", data: ops_csat_points},
            {name:"Acct", data: acct_csat_points}
           ]

  x_axis = ["Q4 2010","Q2 2011","Q4 2011","Q2 2012","Q4 2012"]
  y_axis_text = "Score"

  send_event('csat_history', {series: points, x_axis: x_axis, y_axis: y_axis_text, updated_at: updated_at})
end

[dieterdemeyer]

@aaldrich Thanks for sharing.... I'm trying to create a highchart pie chart but i'm having some issues with this..
My javascript knowledge is somewhat limited..

[dieterdemeyer]

@aaldrich I'm making some progress... Currently, I can display a pie chart but i'm having some problems adding a formatter to the plotoptions. This seems to break my widget...

This is what I have so far:

plotOptions: {
          pie: {
            dataLabels: {
              enabled: true,
              formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.point.y; }
            }
          }
        }

It seems the formatter is causing problems.
Do you happen to know a solution to my problem ?
It would help me a lot..

Thanks in advance.

[mikechau]

Are you still having issues?

This seemed to get pie charts to render correctly for me:

class Dashing.Piechart extends Dashing.Widget

  ready: ->
    @chart = new Highcharts.Chart
      chart:
        renderTo: "HCcontainer"
        plotBackgroundColor: null
        plotBorderWidth: null
        plotShadow: false

      title:
        text: "Daily Indicators"

      tooltip: 
        pointFormat: "{series.name}: <b>{point.percentage}%></b>"
        percentageDecimals: 1

      plotOptions:
        pie:
          allowPointSelect: true
          cursor: "pointer"
          showInLegend: true
          dataLabels:
            enabled: false
            color: "#000000"
            connectorColor: "#000000"
            formatter: ->
              "<b>" + @point.name + "</b>: " + @percentage + " %"

      series: [
        type: "pie"
        name: "Indicators"
        data: [["REG", 1], ["CANC", 2], ["OSEQ", 3], ["CNCL", 4], ["LATE", 5], ["ISOI", 6]]
      ]

[dieterdemeyer]

Just tried it but it doesn't seem to work for me....

[mikechau]

I had dataLabels set to false, did you change it true?

[dieterdemeyer]

@mikechau It was true, but I changed it to false...
Also tried some other variations of your formatter example but without any luck..

This is what I have now:

class Dashing.Highchartpie extends Dashing.Widget

  createChart: (chart_title,series) ->
    container = $(@node).find('.highchartpie-container')
    if $(container)[0]
      @chart = new Highcharts.Chart
        chart:
          renderTo: $(container)[0]
          type: "pie"
        series: series
        title:
          text: chart_title
        tooltip:
          pointFormat: '<b>{point.y}</b>'
        plotOptions: {
          pie: {
            dataLabels: {
              enabled: false
              formatter: "<b>" + @point.name + "</b>: "
            }
          }
        }

  onData: (data) ->
    @createChart(data.chart_title,data.series)

[mikechau]

Oh I mean you should leave it true if you want labels. I think your formatting is off since its coffeescript, perhaps try this:

class Dashing.Highchartpie extends Dashing.Widget

  createChart: (chart_title,series) ->
    container = $(@node).find('.highchartpie-container')
    if $(container)[0]
      @chart = new Highcharts.Chart(
        chart:
          renderTo: $(container)[0]

        series: series

        title:
          text: chart_title

        tooltip:
          pointFormat: '<b>{point.y}</b>'

        plotOptions:
          pie:
            dataLabels:
              enabled: true
              formatter: ->
                "<b>" + @point.name + "</b>"
      )

  onData: (data) ->
    @createChart(data.chart_title,data.series)

[dieterdemeyer]

@mikechau
Your formatting seems to work (don't really understand why..)
I really suck at coffeescript 😄

Thanks a lot for your help !

[mikechau]

@dieterdemeyer
Hooray! 💥

Yeah, I am just starting to learn coffeescript myself, formatting seems to be very important.

I found http://js2coffee.org/ pretty helpful to convert my js to coffeescript so I could get a better idea of how it should look in coffeescript.

[dieterdemeyer]

@mikechau Thanks! I'll check it out...

[mikechau]

@dieterdemeyer How are you posting data to the piechart? Can I see your job rb file?

Thanks!

[dieterdemeyer]

@mikechau This is what I'm using as a backend job:

SCHEDULER.every '1m', :first_in => 0 do
    updated_at = Time.now.strftime('%m/%d/%Y')

    title = 'Insert title here'

    uri = URI.parse(BACKEND_URL)
    http = Net::HTTP.new(uri.host, uri.port)
    request = Net::HTTP::Get.new("/dashboard?format=json")
    response = http.request(request)
    dashboard_info = JSON.parse(response.body)

    dashboard_info_new = Hash.new
    DASHBOARD_LABELS.each { |key, value|
      dashboard_info_new.store(value, dashboard_info[key])
    }

    data = []
    dashboard_info_new.each { |key, value|
      data << [key, value.to_i]
      puts "#{key}: #{value}\n"
    }

    series = [{
                type: 'pie',
                name: 'Activity Overview',
                data: data
          }]

    send_event('dashboard', {chart_title: title, series: series, updated_at: updated_at})
end

[nccmike]

@aaldrich, did you finally get everything working? I have implemented two highcart widgets on my dashboard using the sample in this post. Everything displays correctly, however, my jobs are only running every 10 minutes. Most times, the widget will load but the graph won't display until the job is run the next time.

Suggestions?

[aaldrich]

I did but I can't remember what I did. I eventually abandoned it and went
to geckoboard. I was getting too frustrated with all the random workarounds
and wasting too much time so I cheated and went the paid route :) sorry I
can't be of more help.

Sent from my iPhone

On Aug 2, 2013, at 9:17 PM, nccmike [email protected] wrote:

@aaldrich https://github.com/aaldrich, did you finally get everything
working? I have implemented two highcart widgets on my dashboard using the
sample in this post. Everything displays correctly, however, my jobs are
only running every 10 minutes. Most times, the widget will load but the
graph won't display until the job is run the next time.

Suggestions?

—
Reply to this email directly or view it on
GitHubhttps://github.com//issues/50#issuecomment-22046772
.

[nccmike]

@aaldrich, no worries. My widgets load fine but my charts don't load with data until the job runs. I am currently loading blank charts gut I will check into updating them with the staff from the job that has aleardy run.

[CmdrCody]

I'm reviving this old thread, as I recently found myself implementing dashing for a project using highcharts and have been unable to turn anything up in the interwebs about this chicken-or-the-egg issue with initializing the charts. My highcharts charts work great once they're loaded with data, but if users happen to hit the page before a send_event hits their client from the ruby job, they could be waiting until the next interval before they see anything.

In my case, my data lives in Oracle, and I have my RB jobs are using OCI8 to retrieve the data and then building the various series objects for the different charts. I'm now facing the same problem as the OP, where my highcharts initialize as blank, since the series data comes from the server in the subsequentsend_event.

I cannot figure out how to initialize the chart with some valid data from the first fetch. I've seen other posts around where people talk about "emiting" the series data in the DOM and then consuming it in the chart from the DOM on load; however, I can't figure out how to dynamically update the DOM from the Ruby Job.

Has anyone figured a workaround for this? As it stands my charts are blank until the next 15-minute Send_Event. Obviously this won't work for my users, so I gotta figure something out.

[oaknguyen]

thanks for the work around @chrisspang. Worked nicely.