Share
In questa serie di tutorial, ti insegnerò come creare un'applicazione di quotazione azionaria con Raphael JS, Titanium Mobile e il servizio web YQL di Yahoo. I grafici di Raphael JS saranno utilizzati per presentare graficamente le informazioni di quotazione di borsa, Titanium Mobile verrà utilizzato per compilare a croce un'app nativa per iOS e le tabelle di dati YQL recupereranno effettivamente le informazioni di borsa.
L'ultimo tutorial di questa serie ha introdotto YQL e Raphael JS come componenti di un'applicazione Titanium Mobile e ha dimostrato i passaggi necessari per creare la nostra interfaccia dell'app Stock Quote e cercare quotazioni azionarie utilizzando YQL. In questo tutorial, completeremo la nostra app di quotazione azionaria aggiungendo nei grafici di Raphael JS che tracciano i dati storici ottenuti utilizzando YQL.
Prima di iniziare a implementare un grafico nell'app Stocks, dobbiamo prima scaricare le librerie di Raphael, inclusi i file JavaScript grafici di cui abbiamo bisogno per creare il nostro grafico a barre. Per effettuare questa operazione, attenersi alla seguente procedura:
Ora esegui nuovamente la tua app, potresti ricevere alcuni avvisi di convalida nella Console di titanio dal codice Raphael, ma tutto dovrebbe funzionare e funzionare come al punto 4.
Utilizzeremo una WebView per presentare il nostro grafico sullo schermo. Aggiungiamo ora una WebView e la indirizziamo a un file HTML che creeremo nel passaggio successivo. Aggiungeremo anche un'etichetta per descrivere la WebView. Questo codice dovrebbe andare prima della linea scrollArea.add (quoteChartBox);, che sarà vicino alla fine del tuo file di codice:
// Aggiungi l'etichetta del grafico e la webview, dobbiamo mostrare il nostro grafico raphael var lblChartName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, color: '# 003366', font: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', testo: '12 Week Historical Chart '); quoteChartBox.add (lblChartName); var webview = Titanium.UI.createWebView (width: 280, height: 240, left: 10, top: 40, url: 'chart.html'); quoteChartBox.add (webview); var twelveWeekStartLabel = Titanium.UI.createLabel (width: 100, left: 10, top: 285, height: 10, textAlign: 'left', font: fontSize: 9, fontFamily: 'Helvetica', colore: '# 000 '); quoteChartBox.add (twelveWeekStartLabel); var twelveWeekEndLabel = Titanium.UI.createLabel (width: 100, right: 10, top: 285, height: 10, textAlign: 'right', font: fontSize: 9, fontFamily: 'Helvetica', colore: '# 000 '); quoteChartBox.add (twelveWeekEndLabel);
Esegui la tua app nell'emulatore e ora dovresti vedere una WebView vuota e un'etichetta nella terza casella. Dovrai scorrere fino alla fine dello schermo per vedere la terza casella nella sua interezza.
Ora stiamo andando a creare un file HTML che include tutte le librerie di Raphael necessarie e contiene un vuoto
RaphaelJS Chart
Salva il tuo chart.html file nella directory "Risorse" se non lo hai già fatto. Quello che sta facendo questo codice è la creazione di un modello HTML di base, incluse le librerie raphael che hai scaricato in precedenza e la creazione di un div chiamato chartDiv, che è ciò in cui Raffaello renderà la nostra carta. Con i tag script sotto questo div, stiamo creando un listener di eventi Titanium standard, che verrà eseguito ogni volta che viene chiamato un evento renderChart viene sparato da qualche parte all'interno di Titanium. Questa funzione prenderà qualsiasi dato passato e lo inserirà in Raffaello per il rendering. Il r.g.barchart () funzione prende il seguente elenco di parametri per creare il grafico (in ordine):
Sinistra, In alto, Larghezza, Altezza, Dati (una matrice di matrici a valore singolo), Attributi di stile. La funzione al passaggio del mouse al termine di questo metodo dice a Raffaello di eseguire il rendering di un valore di dissolvenza in apertura, in chiusura e di visualizzazione quando viene toccata una linea di barre.
Ora è il momento per il passaggio finale del nostro tutorial: rendere il grafico! Vai nel tuo searchYQL funzione, e dopo il codice precedente per ottenere i dati di magazzino, digitare quanto segue:
Accentsconagua
// Ottieni la data odierna e suddividila in valori di mese, giorno e anno var currentTime = new Date (); var month = currentTime.getMonth () + 1; var day = currentTime.getDate (); var year = currentTime.getFullYear (); // ora creiamo le due date formattate nel formato aaaa-mm-gg per la query YQL var today = year + '-' + month + '-' + day; // oggi // ricevi la data 12 settimane fa? 1000 millisecondi * secondi in minuto * minuti in ora * 2016 ore (12 settimane, 12 * 7 giorni) var currentTimeMinus12Weeks = new Date ((new Date ()). GetTime () - (1000 * 60 * 60 * 2016); var month2 = currentTimeMinus12Weeks.getMonth () + 1; var day2 = currentTimeMinus12Weeks.getDate (); var year2 = currentTimeMinus12Weeks.getFullYear (); var todayMinus12Weeks = year2 + '-' + month2 + '-' + day2; // oggi - 12 settimane // esegue una query storica per il codice azionario per il nostro grafico var query2 = 'seleziona * da yahoo.finance.historicaldata dove symbol = "' + txtStockCode.value + '" e startDate = "' + todayMinus12Weeks + '"e endDate ="' + today + '"'; // esegue la query e ottiene i risultati Titanium.Yahoo.yql (query2, funzione (e) var data = e.data; var chartData = []; // esegue il loop dei dati json restituiti per le ultime 12 settimane per (var i = (data.quote.length -1); i> = 0; i--) // spinge questo timeframes close value nel nostro array chartData chartData.push (parseFloat (data.quote [i] .Close)); if (i == (data.quote.length - 1)) twelveWeekStartLabel.text = data.quote [i] .Close; if (i == 0) twelveWeekEndLabel.text = data.quote [i] .Chiudi ; // raphael si aspetta un array di array, quindi lascia che var formattedChartData = [chartData]; // licenzi un evento che passerà i dati del grafico attraverso il file chart.html // dove verrà reso dal Raphael Motore grafico JS Ti.App.fireEvent ('renderChart', data: formattedChartData, startDate: todayMinus12Weeks, endDate: today);); L'ultimo blocco di codice sta eseguendo un'altra chiamata YQL, ma questa volta la chiamata è alla tabella dei dati del servizio chiamata yahoo.finance.historicaldata che restituirà a noi una matrice JSON di valori di dati storici. Nel nostro caso, stiamo cercando le ultime dodici settimane di dati per il codice stock selezionato. Una volta che abbiamo questi dati, è semplicemente un caso di iterarlo indietro (l'elemento più vecchio è l'ultimo nell'array JSON), e spingendo il Vicino valore di proprietà nel nostro nuovo array chiamato ChartData. Raphael utilizzerà i valori float per rendere i valori sul grafico a barre. Finalmente, usiamo Ti.App.fireEvent per attivare l'evento renderChart che abbiamo creato nel passaggio precedente, passando i nostri valori fino a chart.html file come facciamo noi!
Esegui l'applicazione nel tuo simulatore ora e dovresti finire con un grafico presentato nella nostra terza scatola!
Bene, come dice Porky, è tutto gente! Abbiamo coperto molto in questo tutorial, incluso l'interrogazione e l'utilizzo dei dati di Yahoo YQL, l'implementazione di una libreria di terze parti in Raphael JS Charts e la creazione di un'app utile e ben progettata con Titanium Mobile mentre eravamo lì. Spero ti sia piaciuto seguirlo e mi piacerebbe vedere cos'altro fai con Appcelerator Titanium. È davvero una grande piattaforma mobile. Divertiti con la programmazione!
