You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@zeppelin.apache.org by Silvio Fiorito <si...@granturing.com> on 2015/10/06 05:20:00 UTC
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.
https://gist.github.com/granturing/a09aed4a302a7367be92
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
Re: Reactive Angular charts sample
Posted by Chad Roberts <cr...@redhat.com>.
Thanks so much for the clarification. Perfectly clear now!
On Thu, Oct 15, 2015 at 4:41 PM, Silvio Fiorito <
silvio.fiorito@granturing.com> 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: "users@zeppelin.incubator.apache.org"
> Date: Thursday, October 15, 2015 at 4:31 PM
> To: "users@zeppelin.incubator.apache.org"
> 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 <
> silvio.fiorito@granturing.com> 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
>>
>
>
Re: Reactive Angular charts sample
Posted by Silvio Fiorito <si...@granturing.com>.
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: "users@zeppelin.incubator.apache.org<ma...@zeppelin.incubator.apache.org>"
Date: Thursday, October 15, 2015 at 4:31 PM
To: "users@zeppelin.incubator.apache.org<ma...@zeppelin.incubator.apache.org>"
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 <si...@granturing.com>> 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
Re: Reactive Angular charts sample
Posted by Chad Roberts <cr...@redhat.com>.
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 <
silvio.fiorito@granturing.com> 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
>
Re: Reactive Angular charts sample
Posted by Silvio Fiorito <si...@granturing.com>.
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
Re: Reactive Angular charts sample
Posted by Tamas Szuromi <ta...@odigeo.com>.
Hello guys,
Big thanks for the examples!
*Tamas Szuromi*
Data Analyst
<http://liligo.com>
*Mobile:* +36 20 498 8425
*Skype:* tromika
*E-mail: *tamas.szuromi@odigeo.com
*www.liligo.com <http://www.liligo.com/>*
ODIGEO Hungary Kft.
1066 Budapest
Weiner Leó u. 16.
On 6 October 2015 at 16:14, Partridge, Lucas (GE Aviation) <
Lucas.Partridge@ge.com> 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:silvio.fiorito@granturing.com]
> *Sent:* 06 October 2015 04:20
> *To:* users@zeppelin.incubator.apache.org
> *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.
>
>
>
> https://gist.github.com/granturing/a09aed4a302a7367be92
> <https://urldefense.proofpoint.com/v2/url?u=https-3A__gist.github.com_granturing_a09aed4a302a7367be92&d=BQMGaQ&c=IV_clAzoPDE253xZdHuilRgztyh_RiV3wUrLrDQYWSI&r=c1CCNND4PG-Q_V2AJWDWrugZAXQ8Y3EE_f_mAHcpXcs&m=fkusX6kA-USIskJuXohDPr4gQgwpSiv4KIpd46qDjyc&s=uAP3-zomVRtezKjC30q68ByWP96W6xCEOSjdz2q7w-Q&e=>
>
>
>
> 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
>
RE: Reactive Angular charts sample
Posted by "Partridge, Lucas (GE Aviation)" <Lu...@ge.com>.
@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:silvio.fiorito@granturing.com]
Sent: 06 October 2015 04:20
To: users@zeppelin.incubator.apache.org
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.
https://gist.github.com/granturing/a09aed4a302a7367be92<https://urldefense.proofpoint.com/v2/url?u=https-3A__gist.github.com_granturing_a09aed4a302a7367be92&d=BQMGaQ&c=IV_clAzoPDE253xZdHuilRgztyh_RiV3wUrLrDQYWSI&r=c1CCNND4PG-Q_V2AJWDWrugZAXQ8Y3EE_f_mAHcpXcs&m=fkusX6kA-USIskJuXohDPr4gQgwpSiv4KIpd46qDjyc&s=uAP3-zomVRtezKjC30q68ByWP96W6xCEOSjdz2q7w-Q&e=>
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
Re: Reactive Angular charts sample
Posted by IT CTO <go...@gmail.com>.
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 <si...@granturing.com>
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.
>
> https://gist.github.com/granturing/a09aed4a302a7367be92
>
> 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)