Hi,
You should be able to do it without the libraries import (since nvd3 is
Zeppelin's default graph library)
console.log and debugger should be working in your javascript code also
On Wed, Jul 1, 2015 at 7:10 PM, tog <guillaume.all...@gmail.com> wrote:
> Ok let's go.
>
> I have data extracted like this in a paragraph:
>
> val gson = new com.google.gson.Gson()
> val bubbles = sqlContext.sql(s"""select * from events where time <
> 7219546""").map{r=>
> Map(
> "x" -> r(0).toString.toDouble,
> "y" -> r(1).toString.toDouble
> )
> }.collect.map(s=>scala.collection.JavaConversions.mapAsJavaMap(s))
> val eventsJson = gson.toJson(bubbles)
>
> That gives me this:
>
> bubbles: Array[java.util.Map[String,Double]] = Array({x=7219540.928686,
> y=-0.670128822}, {x=7219540.930636, y=-0.669900295}, {x=7219540.948771,
> y=-0.667774988}, {x=7219540.960438, y=-0.66640769}, {x=7219540.961898,
> y=-0.666236587}, {x=7219540.975556, y=-0.664635956}, {x=7219540.990234,
> y=-0.664635956}, {x=7219540.993141, y=-0.664635956}, {x=7219540.995483,
> y=-0.664635956}, {x=7219541.005653, y=-0.664635956}, {x=7219541.007307,
> y=-0.664635956}, {x=7219541.022434, y=-0.664635956}, {x=7219541.024394,
> y=-0.664865617}, {x=7219541.02539, y=-0.664982322}, {x=7219541.025648,
> y=-0.665012552}, {x=7219541.037708, y=-0.666425667}, {x=7219541.042499,
> y=-0.666987045}, {x=7219541.052734, y=-0.668186318}, {x=7219541.054186,
> y=-0.668356454}, {x=7219541.055646, y=-0.668527527}, {x=7219541.069312,
> y=-0.67...eventsJson: String =
> [{"x":7219540.928686,"y":-0.670128822},{"x":7219540.930636,"y":-0.669900295},{"x":7219540.948771,"y":-0.667774988},{"x":7219540.960438,"y":-0.66640769},{"x":7219540.961898,"y":-0.666236587},{"x":7219540.975556,"y":-0.664635956},{"x":7219540.990234,"y":-0.664635956},{"x":7219540.993141,"y":-0.664635956},{"x":7219540.995483,"y":-0.664635956},{"x":7219541.005653,"y":-0.664635956},{"x":7219541.007307,"y":-0.664635956},{"x":7219541.022434,"y":-0.664635956},{"x":7219541.024394,"y":-0.664865617},{"x":7219541.02539,"y":-0.664982322},{"x":7219541.025648,"y":-0.665012552},{"x":7219541.037708,"y":-0.666425667},{"x":7219541.042499,"y":-0.666987045},{"x":7219541.052734,"y":-0.668186318},{"x":7219541.054186,"y":-0.668356454},{"x":7219541.055646,"y":-0.668527527},{"x":7219541.0693...
>
> Then in an other paragraph I tried to
>
> println(s"""%html <!-- script src="//
> cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script --> <script
> src="http://nvd3.org/assets/lib/d3.v3.js";></script> <script src="
> http://nvd3.org/assets/js/nv.d3.js";></script> <link href="
> http://nvd3.org/assets/css/common.css"; rel="stylesheet"> <link href="
> http://nvd3.org/assets/css/nv.d3.css"; rel="stylesheet"> <div
> id='nvd3chart'> <svg style='height:500px'> </svg> </div> <script>
> nv.addGraph(function() { var chart = nv.models.lineChart() .margin({left:
> 100}) .showLegend(true) //Show the legend, allowing users to turn on/off
> line series. .showYAxis(true) //Show the y-axis .showXAxis(true); //Show
> the x-axis //var chip = '[ {color: '#2ca02c', values: ' + ${eventsJson} +
> ', key: 'plop'} ]'; //var chip = sinAndCos(); //var chip = '[ {color:
> '#2ca02c', values: ${eventsJson}, key: 'plip'} ]'; var chip = '[ {color:
> '#2ca02c', values: [ {"x":6.4, "y":-0.6}, {"x":6.8, "y":1.5}, {"x":7.2,
> "y":-3.2} ], key: 'plip'} ]' //console.log(chip); d3.select('#nvd3chart
> svg') .datum(data1()) .transition().duration(500) .call(chart);
> nv.utils.windowResize(chart.update); return chart; }); function data1() {
> return [ { values: ${eventsJson}, //values - represents the array of {x,y}
> data points key: 'Sine Wave', //key - the name of the series. color:
> '#ff7f0e' //color - optional: choose your own line color. }
>
> ];
> }
> </script>""")
>
> See the multiple lines commented to pass eventsJson to nvd3.
>
> Somehow the mistake might be obvious because I managed to have it working
> with Rickshaw (an other viz javascript library) but I cannot see what I am
> doing wrong at this stage.
>
> Cheers
>
>
>
> On 1 July 2015 at 11:02, DuyHai Doan <doanduy...@gmail.com> wrote:
>
>> What kind of bug ? Can you be more specific about the issue ?
>>
>> On Wed, Jul 1, 2015 at 11:58 AM, tog <guillaume.all...@gmail.com> wrote:
>>
>>> Hi
>>>
>>> I am using println(s"""%html ...""") to play with new visualisation
>>> stuff ... I am having bugs and would like to print javascript variables
>>> using console.log ... for example.
>>>
>>> Is that possible ? If yes I was not able to find anything in the logs
>>> ... may be there is an other way to do so.
>>>
>>> Cheers
>>> Guillaume
>>>
>>> --
>>> PGP KeyID: 2048R/EA31CFC9 subkeys.pgp.net
>>>
>>
>>
>
>
> --
> PGP KeyID: 2048R/EA31CFC9 subkeys.pgp.net
>
