1

Trying to create a dashing.io widget for wordcloud using wordcloud2.js library https://github.com/timdream/wordcloud2.js

I am not able to pass the data to the dashboard using coffee script.

Download the javascript file from below location and put that in assets folder https://github.com/timdream/wordcloud2.js/tree/master/src Here is the code base for the wordcloud.rb:-

 companybuzzwords = "{ list : [['Paradigm shift',10], ['Leverage',8], ['Pivoting',4], ['Turn-key',4], ['Streamlininess',4], ['Exit strategy',4], ['Synergy',4], ['Enterprise',4], ['Web 2.0',4]] }"

SCHEDULER.every '2s' do
  puts "$$$$$$$ TOP LEVEL SUMMARY:-- #{companybuzzwords}"
  send_event('companiescloud', { words: companybuzzwords })
end

Code for wordcloud.coffee:-

  class Dashing.Wordcloud extends Dashing.Widget

  ready: ->
    @container1 = $(@node).find(".mycanvas")[0]
    console.log @container1
    @data = @get('words')
    console.log @data
    @WordCloud = WordCloud @container1, @data

  onData: (data) ->
    if @WordCloud
      @container1 = $(@node).find(".mycanvas")[0]
      @data = @get('words')
      @WordCloud = WordCloud @container1, @data

Code for wordcloud.html:-

<h1 class="title" data-bind="title"></h1>    
<div id="mycanvas" class="mycanvas"></div>

Code for wordcloud.scss:-

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
//$background-color:  #fb9618;
$background-color:  #e7e7e7;

// ----------------------------------------------------------------------------
// Widget-WordCloud styles
// ----------------------------------------------------------------------------
.widget-wordcloud {

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

  .title {
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0px;
    color: #000000;
    font-weight: bold;
  }

  .mycanvas {
    display: block;
    position: relative;
    overflow: hidden;
  }


}

in your dashboard add javascript library downloaded from github and run the dashboard

<script type="text/javascript" src="/assets/wordcloud2.js"></script>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
  <div data-id="companiescloud" data-view="Wordcloud" data-title="Hello"></div>
</li>

Any help greatly appreciated.

Paritosh Sharma
  • 11
  • 1

1 Answers1

0

I see one problem, the path to the .js. If you look at the console.log it should complain about the path to the .js

Instead of this

<script type="text/javascript" src="/assets/wordcloud2.js"></script>

Put the script in "public/wordcloud2.js" and reference it from that path as dashing runs off of that

<script type="text/javascript" src="wordcloud2.js"></script>

Try this and see if it makes any difference

sam
  • 1,280
  • 2
  • 11
  • 20
  • I tried this but no change in results instead I get the error now in console "Refused to execute script from 'http://localhost:3030/wordcloud2.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled." with `` – Paritosh Sharma Jan 13 '16 at 22:43