Accentsconagua

Gör en aktiekursapp Visar diagram med Raphael JS

Koda
Share

I den här tutorialserien ska jag lära dig hur man bygger en aktiekursapplikation med Raphael JS, Titanium Mobile och Yahoos YQL webbtjänst. Raphael JS-diagrammen kommer att användas för att grafiskt presentera aktiekursinformationen, Titanium Mobile kommer att användas för att korsa kompilera en inbyggd iOS-app och YQL datatabeller kommer faktiskt att hämta aktieinformationen.

Var vi lämnade?

Den sista handledningen i denna serie introducerade YQL och Raphael JS som komponenter i en Titanium Mobile-applikation och visade de steg som krävs för att skapa vårt app Quote-appgränssnitt och söka efter börskurser genom att använda YQL. I den här handledningen avslutar vi vår aktienoteringsapp genom att lägga till i Raphael JS-diagram som visar historisk data som erhållits med YQL.

Steg 5: Konfigurera Raphael JS Charting Library

Innan vi kan börja implementera ett diagram i vår Stocks-app måste vi först ladda ner Raphael-biblioteken, inklusive kartläggning av JavaScript-filer som vi behöver för att skapa vår stapeldiagram. Gör så här genom att följa dessa steg:

  1. Hämta huvud RaphaelJS-biblioteket från http://raphaeljs.com
    (Direktlänk: http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js).
  2. Ladda ner det huvudsakliga kartläggningsbiblioteket från http://g.raphaeljs.com
    (Direktlänk: http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true) och alla andra kartbibliotek du vill använda. För det här exemplet ska vi bara implementera bardiagrammet, vilket är här: http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.bar-min.js?raw=true
  3. Lägg dina nedladdade filer i din "Resurser" -katalog. Du kan lägga dem i en undermapp om du vill, men tänk på att du måste se till att dina referenser i följande steg är korrekta.
  4. Nästa steg är att byta namn på din raphael-min.js fil till något liknande raphael-min.lib. Huvudskälet här är att om din fil är en känd JavaScript-fil (som den slutar med ".js"), försöker JSLint-validatorn i Titanium att validera Raphael JS-biblioteket och misslyckas, vilket gör att Titanium låser upp - vilket betyder att du kommer inte kunna köra din app!

Nu kör din app igen, det kan hända att du får några valideringsvarningar i Titanium Console från Raphael-koden, men allt ska fortfarande fungera och fungera som det var i steg 4.

Steg 6: Implementera en WebView för Raphael JS-diagrammet

Vi ska använda en WebView för att presentera vårt diagram på skärmen. Låt oss lägga till en WebView nu och peka den på en HTML-fil som vi kommer att skapa i nästa steg. Vi lägger också till en etikett för att beskriva WebView. Denna kod ska gå före linjen scrollArea.add (quoteChartBox);, som kommer att ligga nära slutet av din kodfil:

 // Lägg till tabellen etikett och webbvy vi behöver visa vårt raphael chart var lblChartName = Titanium.UI.createLabel (bredd: 280, höjd: 30, vänster: 10, topp: 10, färg: '# 003366', typsnitt: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', text: '12 Week Historical Chart '); quoteChartBox.add (lblChartName); var webview = Titanium.UI.createWebView (bredd: 280, höjd: 240, vänster: 10, topp: 40, url: 'chart.html'); quoteChartBox.add (WebView); var twelveWeekStartLabel = Titanium.UI.createLabel (bredd: 100, vänster: 10, topp: 285, höjd: 10, textAlign: 'vänster', typsnitt: fontSize: 9, fontFamily: 'Helvetica', färg: '# 000 '); quoteChartBox.add (twelveWeekStartLabel); var twelveWeekEndLabel = Titanium.UI.createLabel (bredd: 100, höger: 10, topp: 285, höjd: 10, textAlign: 'right', font: fontSize: 9, fontFamily:' Helvetica ', färg:' # 000 '); quoteChartBox.add (twelveWeekEndLabel);

Kör din app i emulatorn och du ska nu se en tom WebView och en etikett i den tredje rutan. Du måste bläddra till slutet av skärmen för att se den tredje rutan i dess helhet.

Steg 7: Skapa Raphael Chart HTML & Event Listener

Nu ska vi skapa en HTML-fil som innehåller alla nödvändiga Raphael-bibliotek, och innehåller en tom

tagg där vårt diagram ska göras till. Skapa en ny, tom HTML-fil som heter chart.html och skriv in följande kod:

   RaphaelJS Diagram

Spara din chart.html filen i din "Resources" -katalog om du inte redan har gjort det. Vad den här koden gör är att skapa en grundläggande HTML-mall, inklusive raphael-biblioteken du hämtade tidigare, och skapa en div som heter chartDiv, vilket är vad Raphael gör till vårt diagram. Med skriptet taggar under denna div skapar vi en standard Titanium event lyssnare, som kommer att utföras när en händelse kallas renderChart avfyras från någonstans inom Titan. Den här funktionen tar alla överförda data och drar det till Raphael för återgivning. De r.g.barchart () funktionen tar följande lista med parametrar för att skapa diagrammet (i ordning):
Vänster, Överst, Bredd, Höjd, Data (en rad enskilda värden), Stilsattribut. Huverfunktionen i slutet av den här metoden berättar att Raphael ska göra en fade-in, fade-out och visa kolumnvärden när en strecklinje tappas.

Steg 8: Skaffa YQL Historical Data och skicka den till chart.html

Det är dags för sista steget i vår handledning: återgivning av diagrammet! Gå in i din searchYQL funktionen och efter din tidigare kod för att erhålla lagerdata, skriv in följande:

 // Hämta dagens datum och bryt upp det i månad, dag och år värden var currentTime = nytt datum (); var månad = currentTime.getMonth () + 1; var dag = currentTime.getDate (); var år = currentTime.getFullYear (); // skapa nu de två datumen formaterade i yyyy-mm-dd-format för YQL-frågan var idag = år + '-' + månad + '-' + dag; // idag // hämta datumet 12 veckor sedan? 1000 millisekunder * sekunder i minut * minuter i timmen * 2016 timmar (12 veckor, 12 * 7 dagar) var currentTimeMinus12Weeks = nytt datum ((nytt datum ()). GetTime () - (1000 * 60 * 60 * 2016)); var month2 = currentTimeMinus12Weeks.getMonth () + 1; var day2 = currentTimeMinus12Weeks.getDate (); var year2 = currentTimeMinus12Weeks.getFullYear (); var todayMinus12Weeks = year2 + '-' + month2 + '-' + day2; // idag - 12 veckor // utför en historisk fråga för aktiekoden för vårt diagram var query2 = 'välj * från yahoo.finance.historicaldata där symbol = "' + txtStockCode.value + '" och startDate = "' + todayMinus12Weeks + '"och endDate ="' + idag + '"'; // exekvera frågan och få resultaten Titanium.Yahoo.yql (fråga2, funktion (e) var data = e.data; var chartData = []; // loop vår returnerade json data för de senaste 12 veckorna för (var i = (data.quote.length -1); i> = 0; i--) // tryck dessa tidsramar stänga värdet i vårt diagramData array chartData.push (parseFloat (data.quote [i] .Close)); om (i == (data.quote.length - 1)) twelveWeekStartLabel.text = data.quote [i] .Close; om (i == 0) twelveWeekEndLabel.text = data.quote [i] .Close ; // raphael förväntar sig en rad arrayer så kan vi göra det var formattedChartData = [chartData]; // avfyra en händelse som överför diagramdata till chart.html filen // där den kommer att göras av Raphael JS-diagrammotor Ti.App.fireEvent ('renderChart', data: formattedChartData, startDate: todayMinus12Weeks, endDate: today););

Det sista kvarteret gör ett annat YQL-samtal, men den här gången är samtalet till tjänstedatatabellen som heter yahoo.finance.historicaldata som kommer att återkomma till oss en JSON-uppsättning historiska datavärden. I vårt fall söker vi efter de senaste tolv veckors uppgifterna för den valda aktiekoden. När vi har denna data, är det helt enkelt ett fall av iterering genom det bakåt (det äldsta objektet är sist i JSON-arrayen) och trycker på Stänga egendom värde i vår nya array kallas chartData. Raphael använder floatvärdena för att göra värdena på stapeldiagrammet. Slutligen använder vi Ti.App.fireEvent att avfyra renderChart-händelsen som vi skapade i föregående steg, genom att överföra våra värden till och med chart.html fil som vi gör det!

Kör ansökan i din simulator nu och du borde sluta med ett diagram som presenteras i vår tredje låda!

Slutsats

Tja, som Porky säger, det är alla folk! Vi har omfattat en hel del i denna handledning, bland annat att fråga och använda data från Yahoo YQL, implementera ett tredje part-bibliotek i Raphael JS Charts och bygga en användbar, snyggt designad app med Titanium Mobile medan vi var där. Jag hoppas att du har haft det med att följa med och jag skulle gärna se vad du gör med Appcelerator Titanium. Det är verkligen en bra mobil plattform. Ha kul kodning!

Koda
×