Accentsconagua

Lag et aksjekursapp Viser diagrammer med Raphael JS

Kode
Share

I denne opplæringsserien vil jeg lære deg hvordan du lager et aksjekursapplikasjon med Raphael JS, Titanium Mobile og YAHOOs webservice. Raphael JS-diagrammer vil bli brukt til å presentere aksjekursinformasjonen grafisk, Titanium Mobile vil bli brukt til å krysse kompilere en innfødt iOS-app, og YQL datatabeller vil faktisk hente lagerinformasjonen.

Hvor vi forlot?

Den siste opplæringen i denne serien introduserte YQL og Raphael JS som komponenter i en Titanium Mobile-applikasjon og demonstrerte trinnene som er nødvendige for å lage vårt Stock Quote-appgrensesnitt og søke etter aksjekurser ved hjelp av YQL. I denne opplæringen avslutter vi vår aksjekvitteringsapp ved å legge til i Raphael JS-diagrammer som plottar historiske data oppnådd ved hjelp av YQL.

Trinn 5: Konfigurere Raphael JS Charting Library

Før vi kan begynne å implementere et diagram i vår Stocks-app, må vi først laste ned Raphael-biblioteker, inkludert kartlegging av JavaScript-filer som vi trenger for å lage vår bargrafikk. For å gjøre dette, følg disse trinnene:

  1. Last ned de viktigste RaphaelJS-bibliotekene fra http://raphaeljs.com
    (Direkte link: http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js).
  2. Last ned hovedskjemaet fra http://g.raphaeljs.com
    (Direkte link: http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true) og andre kartbiblioteker du ønsker å bruke. For dette eksempelet vil vi bare implementere Bar-diagrammet, som er her: http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.bar-min.js?raw=true
  3. Sett de nedlastede filene dine i "Ressurser" -katalogen. Du kan sette dem inn i en undermappe hvis du ønsker det, men husk at du må sørge for at referansene dine i de følgende trinnene er korrekte.
  4. Det neste trinnet er å gi nytt navn til din Raphaël-min.js fil til noe som helst raphael-min.lib. Hovedårsaken er at hvis filen din er en kjent JavaScript-fil (som den ender i '.js'), vil JSLint-validatoren i Titanium forsøke å validere Raphael JS-biblioteket og mislykkes, og forårsaker at Titanium låses opp - noe som betyr at du vil ikke kunne kjøre appen din!

Kjør appen din igjen, du kan få noen valideringsvarsler som vises i Titanium-konsollen fra Raphael-koden, men alt skal fortsatt kjøre og fungere som det var i trinn 4.

Trinn 6: Implementere en WebView for Raphael JS Chart

Vi skal bruke en WebView for å presentere vårt diagram til skjermen. La oss legge til en WebView nå, og pek den til en HTML-fil som vi vil opprette i neste trinn. Vi legger også til en etikett for å beskrive WebView. Denne koden skal gå før linjen scrollArea.add (quoteChartBox);, som vil være nær slutten av kodefilen din:

 // Legg til diagrammetiketten og webvisningen vi trenger for å vise vårt raphael chart var lblChartName = Titanium.UI.createLabel (bredde: 280, høyde: 30, venstre: 10, topp: 10, farge: '# 003366', skrift: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', tekst: '12 Week Historical Chart '); quoteChartBox.add (lblChartName); var webview = Titanium.UI.createWebView (bredde: 280, høyde: 240, venstre: 10, topp: 40, url: 'chart.html'); quoteChartBox.add (nettvisning); var twelveWeekStartLabel = Titanium.UI.createLabel (bredde: 100, venstre: 10, topp: 285, høyde: 10, tekstLette: 'venstre', skrift: fontSize: 9, fontFamily: 'Helvetica', farge: '# 000 '); quoteChartBox.add (twelveWeekStartLabel); var twelveWeekEndLabel = Titanium.UI.createLabel (bredde: 100, høyre: 10, topp: 285, høyde: 10, tekstAlign: 'høyre', skrift: fontSize: 9, fontFamily: 'Helvetica', farge: '# 000 '); quoteChartBox.add (twelveWeekEndLabel);

Kjør appen din i emulatoren, og du bør nå se en tom WebView og en etikett i den tredje boksen. Du må rulle til slutten av skjermen for å se den tredje boksen i sin helhet.

Trinn 7: Opprette Raphael Chart HTML og Event Listener

Nå skal vi lage en HTML-fil som inneholder alle nødvendige Raphael-biblioteker, og inneholder en tom

tag der diagrammet vårt blir gjengitt til. Opprett en ny, tom HTML-fil kalt chart.html og skriv inn følgende kode:

   RaphaelJS Diagram

Lagre din chart.html fil i katalogen "Ressurser" hvis du ikke allerede har gjort det. Hva denne koden gjør er å lage en grunnleggende HTML-mal, inkludert raphael-biblioteker du lastet ned tidligere, og opprette en div som heter chartDiv, som er hva Raphael vil gjøre vårt diagram i. Med skriptetikettene under denne diven oppretter vi en standard Titanium-eventelytter, som skal utføres når en hendelse kalles renderChart blir sparken fra et sted innenfor Titanium. Denne funksjonen vil ta alle bestått data og trekke det inn i Raphael for gjengivelse. De r.g.barchart () funksjonen tar følgende liste over parametere for å opprette diagrammet (i rekkefølge):
Venstre, Topp, Bredde, Høyde, Data (en rekke enkeltverdier), Stilattributter. Hover-funksjonen på slutten av denne metoden forteller Raphael å gjengi en fade-in, fade-out og vise kolonneverdier når en strekklinje er tappet.

Trinn 8: Skaffe YQL historiske data og sende det til chart.html

Det er nå tid for det siste trinnet i vår veiledning: gjengivelse av diagrammet! Gå inn i din searchYQL funksjon, og etter din forrige kode for å skaffe akseldataene, skriv inn følgende:

 // Få dagens dato og bryte det opp i måned, dag og år verdier var currentTime = new Date (); var måned = currentTime.getMonth () + 1; var dag = currentTime.getDate (); var år = currentTime.getFullYear (); // nå lage de to datoene formatert i yyyy-mm-dd format for YQL spørring var i dag = år + '-' + måned + '-' + dag; // i dag // få datoen for 12 uker siden? 1000 millisekunder * sekunder i minuttet * minutter i timen * 2016 timer (12 uker, 12 * 7 dager) var currentTimeMinus12Weeks = ny Dato ((ny dato)). GetTime () - (1000 * 60 * 60 * 2016)); var month2 = currentTimeMinus12Weeks.getMonth () + 1; var day2 = currentTimeMinus12Weeks.getDate (); var year2 = currentTimeMinus12Weeks.getFullYear (); var todayMinus12Weeks = year2 + '-' + month2 + '-' + day2; // i dag - 12 uker // Utfør et historisk spørsmål for aksjekoden for vårt diagram var query2 = 'velg * fra yahoo.finance.historicaldata hvor symbol = "' + txtStockCode.value + '" og startDate = "' + todayMinus12Weeks + '"og endDate ="' + i dag + '"'; // utfør spørringen og få resultatene Titanium.Yahoo.yql (spørring2, funksjon (e) var data = e.data; var chartData = []; // loop returnerte json data for de siste 12 ukene for (var i = (data.quote.length -1); i> = 0; i--) // skyv denne tidsrammen lukk verdien i vår chartData array chartData.push (parseFloat (data.quote [i] .Close)); hvis (i == (data.quote.length - 1)) twelveWeekStartLabel.text = data.quote [i] .Close; hvis (i == 0) twelveWeekEndLabel.text = data.quote [i] .Close ; // raphael forventer en rekke arrays slik at vi kan gjøre det var formattedChartData = [chartData]; // brann en hendelse som vil passere diagramdataene over til diagrammet.html filen // hvor det vil bli gjengitt av Raphael JS diagrammotor Ti.App.fireEvent ('renderChart', data: formattedChartData, startDate: todayMinus12Weeks, endDate: today););

Den endelige koden av kode gjør et annet YQL-anrop, men denne gangen er anropet til tjenesten datatabellen kalt yahoo.finance.historicaldata som kommer til å returnere til oss et JSON-utvalg av historiske dataverdier. I vårt tilfelle søker vi de siste tolv ukers data for den valgte lagerkoden. Når vi har disse dataene, er det bare et tilfelle av iterering gjennom det bakover (det eldste elementet er sist i JSON-arrayet), og trykker på Lukk eiendomsverdi i vårt nye utvalg kalles chartData. Raphael vil bruke floatverdiene til å gjengi verdiene på stolpediagrammet. Til slutt bruker vi Ti.App.fireEvent å brenne renderChart-hendelsen som vi opprettet i forrige trinn, og passerer våre verdier gjennom til chart.html filen som vi gjør det!

Kjør programmet i simulatoren din nå, og du skal ende opp med et diagram som presenteres i vår tredje boks!

Konklusjon

Vel, som Porky sier, det er alt folkens! Vi har dekket mye i denne opplæringen, blant annet spørring og bruk av data fra Yahoo YQL, implementering av et tredjepartsbibliotek i Raphael JS Charts, og å bygge en nyttig, pent designet app med Titanium Mobile mens vi var på den. Jeg håper du har likt å følge med, og jeg vil gjerne se hva annet du gjør med Appcelerator Titanium. Det er virkelig en flott mobil plattform. Ha det gøy å koding!

Kode
×