Hello guys, Big thanks for the examples!
*Tamas Szuromi* Data Analyst <http://liligo.com> *Mobile:* +36 20 498 8425 *Skype:* tromika *E-mail: *tamas.szur...@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.partri...@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.fior...@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 >
