(no subject)

classic Classic list List threaded Threaded
6 messages Options
tog
Reply | Threaded
Open this post in threaded view
|

(no subject)

tog
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
Reply | Threaded
Open this post in threaded view
|

Re:

DuyHai Doan
What kind of bug ? Can you be more specific about the issue ?

On Wed, Jul 1, 2015 at 11:58 AM, tog <[hidden email]> 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

tog
Reply | Threaded
Open this post in threaded view
|

Re:

tog
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 <[hidden email]> wrote:
What kind of bug ? Can you be more specific about the issue ?

On Wed, Jul 1, 2015 at 11:58 AM, tog <[hidden email]> 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
Reply | Threaded
Open this post in threaded view
|

Re:

Corneau Damien-2
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 <[hidden email]> 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 <[hidden email]> wrote:
What kind of bug ? Can you be more specific about the issue ?

On Wed, Jul 1, 2015 at 11:58 AM, tog <[hidden email]> 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

tog
Reply | Threaded
Open this post in threaded view
|

Re:

tog

Well spotted for the imports. Where shall I look for the output of the console? I have not seen anything in the logs directory?

On 1 Jul 2015 11:24 am, "Corneau Damien" <[hidden email]> wrote:
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 <[hidden email]> 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 <[hidden email]> wrote:
What kind of bug ? Can you be more specific about the issue ?

On Wed, Jul 1, 2015 at 11:58 AM, tog <[hidden email]> 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

Reply | Threaded
Open this post in threaded view
|

Re:

Corneau Damien-2
Javascript's console.log are printing in your web browser developer tools (in a tab named: 'console')


On Wed, Jul 1, 2015 at 7:28 PM, tog <[hidden email]> wrote:

Well spotted for the imports. Where shall I look for the output of the console? I have not seen anything in the logs directory?

On 1 Jul 2015 11:24 am, "Corneau Damien" <[hidden email]> wrote:
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 <[hidden email]> 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 <[hidden email]> wrote:
What kind of bug ? Can you be more specific about the issue ?

On Wed, Jul 1, 2015 at 11:58 AM, tog <[hidden email]> 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