Reactive Angular charts sample

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

Reactive Angular charts sample

Silvio Fiorito
Hi everyone,

I’ve seen a few questions posted about how to effectively use the Angular interpreter for creating custom UIs or charts beyond what’s available out of the box.

For a meetup talk I gave recently, I used Leaflet to map a query based on latitude and longitude. I know there’s a PR for adding an official map to Zeppelin but this was a quick fix until it’s in the master branch.

One thing I did was to dynamically bind an Angular watch to the notebook paragraph, the other is to keep a reference of the watch so it can be unregistered when the paragraph is executed again. Otherwise it just keeps adding additional watchers.

There may be other ways to get this done, but this seemed to be the simplest for me. I’ve also used this with Streaming to get reactive charts as each batch executes.


Might it be helpful to have a section of Zeppelin “recipes” on GitHub? If so, I’d be happy to submit a PR for the docs for this and a few other examples.

Thanks,
Silvio
Reply | Threaded
Open this post in threaded view
|

Re: Reactive Angular charts sample

IT CTO
I think you should open a JIRA for -
"One thing I did was to dynamically bind an Angular watch to the notebook paragraph, the other is to keep a reference of the watch so it can be unregistered when the paragraph is executed again. Otherwise it just keeps adding additional watchers."


On Tue, Oct 6, 2015 at 6:20 AM Silvio Fiorito <[hidden email]> wrote:
Hi everyone,

I’ve seen a few questions posted about how to effectively use the Angular interpreter for creating custom UIs or charts beyond what’s available out of the box.

For a meetup talk I gave recently, I used Leaflet to map a query based on latitude and longitude. I know there’s a PR for adding an official map to Zeppelin but this was a quick fix until it’s in the master branch.

One thing I did was to dynamically bind an Angular watch to the notebook paragraph, the other is to keep a reference of the watch so it can be unregistered when the paragraph is executed again. Otherwise it just keeps adding additional watchers.

There may be other ways to get this done, but this seemed to be the simplest for me. I’ve also used this with Streaming to get reactive charts as each batch executes.


Might it be helpful to have a section of Zeppelin “recipes” on GitHub? If so, I’d be happy to submit a PR for the docs for this and a few other examples.

Thanks,
Silvio
--
Eran | "You don't need eyes to see, you need vision" (Faithless)
Reply | Threaded
Open this post in threaded view
|

RE: Reactive Angular charts sample

Partridge, Lucas (GE Aviation)
In reply to this post by Silvio Fiorito

@Silvio: You are my saviour!  Thank you so much for sharing your code.  I’ve been struggling for days now trying to plot Highcharts inside notebook paragraphs, and your example showed me the trick was not to load the (in this case) Highcharts libraries more than once.

 

FYI Here’s an example that works for me when pasted into a Zeppelin paragraph:

 

%angular

<div id="chart-013" style="height: 400px; width: 80%"></div>

 

<script type="text/javascript">

 

function plotChart() {

    $('#chart-013').highcharts(

        {"series":[{"data":[{"x":0,"y":10},{"x":1,"y":20},{"x":2,"y":3},{"x":3,"y":4},{"x":4,"y":5}],"type":"pie"}],"exporting":{"filename":"chart"},"yAxis":[{"title":{"text":""}}],"plotOptions":{},"credits":{"href":"","text":""},"chart":{"zoomType":"xy"},"title":{"text":""},"xAxis":[{"title":{"text":""}}]}

    );

}

 

function loadLib(url) {

    console.log('Loading library at: ' + url);

    var script = document.createElement('script');

    script.type = 'text/javascript';

    script.src = url;

    script.onload = function() { console.log('Loaded library at: ' + url); }

    script.onerror = function(err) { alert(err); }

    document.getElementsByTagName('head')[0].appendChild(script);

}

 

// Load each script only once!

if (!window.jQuery) {

    loadLib("http://code.jquery.com/jquery-1.8.2.min.js");

}

if (!window.Highcharts) {

    loadLib("http://code.highcharts.com/4.0.4/highcharts.js");

    loadLib("http://code.highcharts.com/4.0.4/modules/exporting.js");

    loadLib("http://code.highcharts.com/4.0.4/highcharts-more.js");

}

plotChart();

</script>

 

 

 

From: Silvio Fiorito [mailto:[hidden email]]
Sent: 06 October 2015 04:20
To: [hidden email]
Subject: Reactive Angular charts sample

 

Hi everyone,

 

I’ve seen a few questions posted about how to effectively use the Angular interpreter for creating custom UIs or charts beyond what’s available out of the box.

 

For a meetup talk I gave recently, I used Leaflet to map a query based on latitude and longitude. I know there’s a PR for adding an official map to Zeppelin but this was a quick fix until it’s in the master branch.

 

One thing I did was to dynamically bind an Angular watch to the notebook paragraph, the other is to keep a reference of the watch so it can be unregistered when the paragraph is executed again. Otherwise it just keeps adding additional watchers.

 

There may be other ways to get this done, but this seemed to be the simplest for me. I’ve also used this with Streaming to get reactive charts as each batch executes.

 

 

Might it be helpful to have a section of Zeppelin “recipes” on GitHub? If so, I’d be happy to submit a PR for the docs for this and a few other examples.

 

Thanks,

Silvio

Reply | Threaded
Open this post in threaded view
|

Re: Reactive Angular charts sample

Tamas Szuromi
Hello guys,

Big thanks for the examples!

Tamas Szuromi
Data Analyst


Mobile: +36 20 498 8425
Skype: tromika
E-mail: [hidden email]

www.liligo.com
ODIGEO Hungary Kft.
1066 Budapest
Weiner Leó u. 16.




On 6 October 2015 at 16:14, Partridge, Lucas (GE Aviation) <[hidden email]> wrote:

@Silvio: You are my saviour!  Thank you so much for sharing your code.  I’ve been struggling for days now trying to plot Highcharts inside notebook paragraphs, and your example showed me the trick was not to load the (in this case) Highcharts libraries more than once.

 

FYI Here’s an example that works for me when pasted into a Zeppelin paragraph:

 

%angular

<div id="chart-013" style="height: 400px; width: 80%"></div>

 

<script type="text/javascript">

 

function plotChart() {

    $('#chart-013').highcharts(

        {"series":[{"data":[{"x":0,"y":10},{"x":1,"y":20},{"x":2,"y":3},{"x":3,"y":4},{"x":4,"y":5}],"type":"pie"}],"exporting":{"filename":"chart"},"yAxis":[{"title":{"text":""}}],"plotOptions":{},"credits":{"href":"","text":""},"chart":{"zoomType":"xy"},"title":{"text":""},"xAxis":[{"title":{"text":""}}]}

    );

}

 

function loadLib(url) {

    console.log('Loading library at: ' + url);

    var script = document.createElement('script');

    script.type = 'text/javascript';

    script.src = url;

    script.onload = function() { console.log('Loaded library at: ' + url); }

    script.onerror = function(err) { alert(err); }

    document.getElementsByTagName('head')[0].appendChild(script);

}

 

// Load each script only once!

if (!window.jQuery) {

    loadLib("http://code.jquery.com/jquery-1.8.2.min.js");

}

if (!window.Highcharts) {

    loadLib("http://code.highcharts.com/4.0.4/highcharts.js");

    loadLib("http://code.highcharts.com/4.0.4/modules/exporting.js");

    loadLib("http://code.highcharts.com/4.0.4/highcharts-more.js");

}

plotChart();

</script>

 

 

 

From: Silvio Fiorito [mailto:[hidden email]]
Sent: 06 October 2015 04:20
To: [hidden email]
Subject: Reactive Angular charts sample

 

Hi everyone,

 

I’ve seen a few questions posted about how to effectively use the Angular interpreter for creating custom UIs or charts beyond what’s available out of the box.

 

For a meetup talk I gave recently, I used Leaflet to map a query based on latitude and longitude. I know there’s a PR for adding an official map to Zeppelin but this was a quick fix until it’s in the master branch.

 

One thing I did was to dynamically bind an Angular watch to the notebook paragraph, the other is to keep a reference of the watch so it can be unregistered when the paragraph is executed again. Otherwise it just keeps adding additional watchers.

 

There may be other ways to get this done, but this seemed to be the simplest for me. I’ve also used this with Streaming to get reactive charts as each batch executes.

 

 

Might it be helpful to have a section of Zeppelin “recipes” on GitHub? If so, I’d be happy to submit a PR for the docs for this and a few other examples.

 

Thanks,

Silvio


Reply | Threaded
Open this post in threaded view
|

Re: Reactive Angular charts sample

Silvio Fiorito
Hey everyone,

Great I’m glad this was helpful! It definitely opens up a lot of possibilities to extend the power of Zeppelin UI.

I’m also working on a few things to make Streaming a bit nicer, like a button to start/stop the streaming context and displaying realtime stats of the streaming job in the UI as well.

I’ll keep the list updated and post more examples as I get them.

Thanks,
Silvio
Reply | Threaded
Open this post in threaded view
|

Re: Reactive Angular charts sample

Chad Roberts
Silvio, thanks for the examples. 

I'm a bit [totally] new when it comes to working with angular.  I'm running your map example and I get the map to display just fine, but how would I add markers to the map from a separate paragraph?

Thanks,
Chad

On Tue, Oct 6, 2015 at 10:48 AM, Silvio Fiorito <[hidden email]> wrote:
Hey everyone,

Great I’m glad this was helpful! It definitely opens up a lot of possibilities to extend the power of Zeppelin UI.

I’m also working on a few things to make Streaming a bit nicer, like a button to start/stop the streaming context and displaying realtime stats of the streaming job in the UI as well.

I’ll keep the list updated and post more examples as I get them.

Thanks,
Silvio

Reply | Threaded
Open this post in threaded view
|

Re: Reactive Angular charts sample

Silvio Fiorito
Hi Chad,

So with that Angular code I posted you can then create an Angular variable called “locations” and set it from a separate Scala paragraph, like so:

case class Loc(desc: String, lat: Double, lon: Double)
val locations = Array(Loc(“Test”, 24.4, 49.8))
z.angularBind(“locations”, locations)

The locations value would be an array of a case class. In my example, I’m expecting the fields “desc”, “lat”, and “lon” (see lines 23-24) but you can use whatever you want. Obviously you would set that based on some Spark or other query.

Let me know if that works or not!

Thanks,
Silvio

From: Chad Roberts
Reply-To: "[hidden email]"
Date: Thursday, October 15, 2015 at 4:31 PM
To: "[hidden email]"
Subject: Re: Reactive Angular charts sample

Silvio, thanks for the examples. 

I'm a bit [totally] new when it comes to working with angular.  I'm running your map example and I get the map to display just fine, but how would I add markers to the map from a separate paragraph?

Thanks,
Chad

On Tue, Oct 6, 2015 at 10:48 AM, Silvio Fiorito <[hidden email]> wrote:
Hey everyone,

Great I’m glad this was helpful! It definitely opens up a lot of possibilities to extend the power of Zeppelin UI.

I’m also working on a few things to make Streaming a bit nicer, like a button to start/stop the streaming context and displaying realtime stats of the streaming job in the UI as well.

I’ll keep the list updated and post more examples as I get them.

Thanks,
Silvio

Reply | Threaded
Open this post in threaded view
|

Re: Reactive Angular charts sample

Chad Roberts
Thanks so much for the clarification.  Perfectly clear now!

On Thu, Oct 15, 2015 at 4:41 PM, Silvio Fiorito <[hidden email]> wrote:
Hi Chad,

So with that Angular code I posted you can then create an Angular variable called “locations” and set it from a separate Scala paragraph, like so:

case class Loc(desc: String, lat: Double, lon: Double)
val locations = Array(Loc(“Test”, 24.4, 49.8))
z.angularBind(“locations”, locations)

The locations value would be an array of a case class. In my example, I’m expecting the fields “desc”, “lat”, and “lon” (see lines 23-24) but you can use whatever you want. Obviously you would set that based on some Spark or other query.

Let me know if that works or not!

Thanks,
Silvio

From: Chad Roberts
Reply-To: "[hidden email]"
Date: Thursday, October 15, 2015 at 4:31 PM
To: "[hidden email]"
Subject: Re: Reactive Angular charts sample

Silvio, thanks for the examples. 

I'm a bit [totally] new when it comes to working with angular.  I'm running your map example and I get the map to display just fine, but how would I add markers to the map from a separate paragraph?

Thanks,
Chad

On Tue, Oct 6, 2015 at 10:48 AM, Silvio Fiorito <[hidden email]> wrote:
Hey everyone,

Great I’m glad this was helpful! It definitely opens up a lot of possibilities to extend the power of Zeppelin UI.

I’m also working on a few things to make Streaming a bit nicer, like a button to start/stop the streaming context and displaying realtime stats of the streaming job in the UI as well.

I’ll keep the list updated and post more examples as I get them.

Thanks,
Silvio