Share
Dans cette série de didacticiels, je vais vous apprendre à créer une application de cotation boursière avec Raphael JS, Titanium Mobile et le service Web YQL de Yahoo. Des graphiques Raphael JS seront utilisés pour présenter graphiquement les informations de cotation, Titanium Mobile sera utilisé pour compiler de manière croisée une application iOS native et les tableaux de données YQL récupéreront les informations boursières..
Le dernier tutoriel de cette série a présenté YQL et Raphael JS en tant que composants d’une application Titanium Mobile et a présenté les étapes nécessaires à la création de l’interface de l’application Stock Quote et à la recherche de valeurs boursières à l’aide de YQL. Dans ce didacticiel, nous allons terminer notre application de cotation en ajoutant à Raphael JS des graphiques représentant les données historiques obtenues à l'aide de YQL..
Avant de pouvoir implémenter un graphique dans notre application Stocks, nous devons d'abord télécharger les bibliothèques Raphael, y compris les fichiers JavaScript de cartographie dont nous aurons besoin pour créer notre graphique à barres. Pour le faire, suivez ces étapes:
Exécutez à nouveau votre application. Il se peut que quelques avertissements de validation apparaissent dans la console Titanium à partir du code Raphael, mais tout doit toujours fonctionner et fonctionner comme à l'étape 4..
Nous allons utiliser une vue Web pour présenter notre graphique à l'écran. Ajoutons maintenant une WebView et pointons-la vers un fichier HTML que nous allons créer à l'étape suivante. Nous allons également ajouter une étiquette pour décrire la vue Web. Ce code devrait aller avant la ligne scrollArea.add (quoteChartBox);, qui sera vers la fin de votre fichier de code:
// Ajouter l'étiquette du graphique et la vue Web dont nous avons besoin pour afficher notre graphique raphael var lblChartName = Titanium.UI.createLabel (largeur: 280, hauteur: 30, gauche: 10, haut: 10, couleur: '# 003366', police: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', texte: 'Graphique historique sur 12 semaines'); quoteChartBox.add (lblChartName); var webview = Titanium.UI.createWebView (largeur: 280, hauteur: 240, gauche: 10, haut: 40, url: 'chart.html'); quoteChartBox.add (vue Web); var sevenWeekStartLabel = Titanium.UI.createLabel (width: 100, left: 10, top: 285, height: 10, textAlign: 'left', police: fontSize: 9, fontFamily: 'Helvetica', couleur: '# 000 '); quoteChartBox.add (eightWeekStartLabel); var sevenWeekEndLabel = Titanium.UI.createLabel (width: 100, right: 10, top: 285, height: 10, textAlign: 'right', police: fontSize: 9, fontFamily: 'Helvetica', couleur: '# 000 '); quoteChartBox.add (sevenWeekEndLabel);
Exécutez votre application dans l'émulateur et vous devriez maintenant voir une vue Web vide et une étiquette dans la troisième zone. Vous devrez faire défiler jusqu'à la fin de l'écran pour voir la troisième case dans son intégralité.
Nous allons maintenant créer un fichier HTML contenant toutes les bibliothèques Raphael nécessaires et contenant un fichier vide.
RaphaelJS Chart
Sauvez votre chart.html fichier dans votre répertoire "Ressources" si vous ne l'avez pas déjà fait. Ce code crée un modèle HTML de base, y compris les bibliothèques raphael que vous avez téléchargées précédemment, et crée un div appelé chartDiv, qui est ce que Raphael rendra notre graphique en. Avec les balises de script sous cette div, nous créons un écouteur d’événement Titanium standard, qui sera exécuté chaque fois qu’un événement appelé renderChart est tiré quelque part dans Titanium. Cette fonction prendra toutes les données passées et les extraira dans Raphael pour le rendu. le r.g.barchart () function prend la liste de paramètres suivante pour créer le graphique (dans l'ordre):
Gauche, Haut, Largeur, Hauteur, Données (un tableau de tableaux à valeur unique), Attributs de style. La fonction de survol à la fin de cette méthode indique à Raphael de rendre un fondu en entrée, un fondu en sortie et d'afficher les valeurs de colonne lorsqu'une barre de mesure est utilisée.
Il est maintenant temps de passer à la dernière étape de notre tutoriel: le rendu du graphique! Allez dans votre searchYQL fonction, et après votre code précédent pour obtenir les données de stock, tapez ce qui suit:
Accentsconagua
// Récupère la date du jour et la scinde en valeurs de mois, jour et année var var currentTime = new Date (); var month = currentTime.getMonth () + 1; var jour = heure courante.getDate (); var année = currentTime.getFullYear (); // crée maintenant les deux dates au format aaaa-mm-jj pour la requête YQL var aujourd'hui = année + '-' + mois + '-' + jour; // aujourd'hui // tu as la date il y a 12 semaines? 1000 millisecondes * secondes en minutes * minutes en heure * 2016 heures (12 semaines, 12 * 7 jours) var currentTimeMinus12Weeks = nouvelle date ((nouvelle date ()). GetTime () - (1000 * 60 * 60 * 2016)); var month2 = currentTimeMinus12Weeks.getMonth () + 1; var jour2 = currentTimeMinus12Weeks.getDate (); var year2 = currentTimeMimeus12Weeks.getFullYear (); var todayMinus12Weeks = year2 + '-' + month2 + '-' + day2; // aujourd'hui - 12 semaines // effectuer une recherche historique sur le code de stock de notre graphique var query2 = 'select * from yahoo.finance.historicaldata où symbol = "' + txtStockCode.value +" "et startDate =" 'todayMinus12Weeks + '"et endDate ="' + aujourd'hui + '"'; // exécute la requête et obtient les résultats Titanium.Yahoo.yql (query2, function (e) var data = e.data; var chartData = []; // boucle les données JSON renvoyées pour les 12 dernières semaines pour (var i = (data.quote.length -1); i> = 0; i--) // insérer la valeur proche de cette période dans notre tableau chartData chartData.push (parseFloat (data.quote [i] .Close)); if (i == (data.quote.length - 1)) douze-semaine-début-étiqueter.text = data.quote [i] .Fermer; if (i == 0) douze-semaineEndLabel.text = data.quote [i] .Fermer ; // raphael attend un tableau de tableaux, nous allons donc le faire var var formatedChartData = [chartData]; // déclenche un événement qui transmettra les données du graphique au fichier chart.html // où elles seront rendues par Raphael Moteur de graphique JS Ti.App.fireEvent ('renderChart', data: formatedChartData, startDate: todayMinus12Weeks, endDate: today);); Le dernier bloc de code effectue un autre appel YQL, mais cette fois, l’appel est dirigé vers la table de données de service appelée yahoo.finance.historicaldata qui va nous retourner un tableau JSON de valeurs de données historiques. Dans notre cas, nous recherchons des données sur les douze dernières semaines pour le code de stock sélectionné. Une fois que nous avons ces données, il s’agit simplement d’itérer une itération inverse (l’élément le plus ancien est le dernier du tableau JSON) et de Fermer valeur de la propriété dans notre nouveau tableau appelé chartData. Raphael utilisera les valeurs float pour rendre les valeurs sur l'histogramme. Enfin, nous utilisons Ti.App.fireEvent pour déclencher l'événement renderChart que nous avons créé à l'étape précédente, en transmettant nos valeurs au chart.html déposer comme nous le faisons!
Exécutez l'application dans votre simulateur maintenant et vous devriez vous retrouver avec un graphique présenté dans notre troisième boîte.!
Eh bien, comme dit Porky, ce sont tous des gens! Nous avons beaucoup couvert ce didacticiel, notamment interroger et utiliser les données de Yahoo YQL, implémenter une bibliothèque tierce dans Raphael JS Charts et créer une application utile et bien conçue avec Titanium Mobile pendant que nous y travaillions. J'espère que vous avez aimé suivre et j'aimerais voir ce que vous ferez d'autre avec Appcelerator Titanium. C'est vraiment une excellente plateforme mobile. Amusez-vous à coder!
