Share
En esta serie de tutoriales, te enseñaré cómo crear una aplicación de cotización de acciones con Raphael JS, Titanium Mobile y el servicio web de Yahoo YQL. Los gráficos de Raphael JS se utilizarán para presentar gráficamente la información de cotización de acciones, se usará Titanium Mobile para compilar de forma cruzada una aplicación iOS nativa, y las tablas de datos YQL realmente recuperarán la información de existencias.
El último tutorial de esta serie presentó a YQL y Raphael JS como componentes de una aplicación Titanium Mobile y demostró los pasos necesarios para crear nuestra interfaz de aplicación de cotización de acciones y buscar cotizaciones de acciones con YQL. En este tutorial, terminaremos nuestra aplicación de cotización de acciones agregando los gráficos de Raphael JS que trazan los datos históricos obtenidos usando YQL.
Antes de que podamos comenzar a implementar un gráfico en nuestra aplicación Stocks, primero debemos descargar las bibliotecas de Raphael, incluidos los archivos JavaScript de gráficos que necesitaremos para crear nuestro gráfico de barras. Para hacer esto, siga estos pasos:
Ahora ejecute la aplicación nuevamente, es posible que aparezcan algunas advertencias de validación en la consola Titanium desde el código de Raphael, pero todo debería seguir funcionando y funcionando como estaba en el Paso 4..
Vamos a utilizar un WebView para presentar nuestro gráfico en la pantalla. Agreguemos un WebView ahora y apúntelo a un archivo HTML que crearemos en el siguiente paso. También agregaremos una etiqueta para describir la vista web. Este código debe ir antes de la línea. scrollArea.add (quoteChartBox);, que estará cerca del final de su archivo de código:
// Agregue la etiqueta del gráfico y la vista web que necesitamos para mostrar nuestro gráfico de Raphael var lblChartName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, color: '# 003366', font: fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', texto: '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', fuente: fontSize: 9, fontFamily: 'Helvetica', color: '# 000 '); quoteChartBox.add (twelveWeekStartLabel); var twelveWeekEndLabel = Titanium.UI.createLabel (width: 100, right: 10, top: 285, height: 10, textAlign: 'right', fuente: fontSize: 9, fontFamily: 'Helvetica', color: '# 000 '); quoteChartBox.add (twelveWeekEndLabel);
Ejecute su aplicación en el emulador y ahora debería ver un WebView vacío y una etiqueta en el tercer cuadro. Deberá desplazarse hasta el final de la pantalla para ver el tercer cuadro en su totalidad..
Ahora vamos a crear un archivo HTML que incluye todas las bibliotecas de Raphael necesarias y que contiene un
RaphaelJS gráfico
Guarda tu chart.html archivo en su directorio de "Recursos" si aún no lo ha hecho. Lo que este código está haciendo es crear una plantilla HTML básica, incluidas las bibliotecas de Raphael que descargaste anteriormente, y crear un div llamado chartDiv, que es en lo que Rafael convertirá nuestra carta en. Con las etiquetas de script debajo de esta div, estamos creando un detector de eventos Titanium estándar, que se ejecutará cada vez que se produzca un evento llamado renderChart Se dispara desde algún lugar dentro del titanio. Esta función tomará cualquier dato pasado y lo pondrá en Raphael para renderizar. los r.g.barchart () La función toma la siguiente lista de parámetros para crear el gráfico (en orden):
Izquierda, Superior, Anchura, Altura, Datos (una matriz de matrices de un solo valor), Atributos de estilo. La función de desplazamiento al final de este método le dice a Raphael que genere una aparición gradual, una desaparición gradual y mostrar los valores de las columnas cuando se toca una barra..
Ahora es el momento para el paso final en nuestro tutorial: ¡renderizar el gráfico! Entra en tu searchYQL función, y después de su código anterior para obtener los datos de stock, escriba lo siguiente:
Accentsconagua
// Obtenga la fecha de hoy y divídala en valores de mes, día y año var currentTime = new Date (); var month = currentTime.getMonth () + 1; var day = currentTime.getDate (); var año = currentTime.getFullYear (); // ahora cree las dos fechas formateadas en formato aaaa-mm-dd para la consulta YQL var today = year + '-' + month + '-' + day; // hoy // obtener la fecha hace 12 semanas? 1000 milisegundos * segundos en minuto * minutos en hora * 2016 horas (12 semanas, 12 * 7 días) 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; // hoy - 12 semanas // realice una consulta histórica para el código de stock de nuestro gráfico var query2 = 'select * from yahoo.finance.historicaldata donde symbol = "' + txtStockCode.value + '" y startDate = "' + todayMinus12Weeks + '"y endDate ="' + today + '"'; // ejecuta la consulta y obtén los resultados Titanium.Yahoo.yql (query2, function (e) var data = e.data; var chartData = []; // coloca en bucle nuestros datos json devueltos durante las últimas 12 semanas para (var i = (data.quote.length -1); i> = 0; i--) // insertar este valor de cierre de los marcos de tiempo en nuestra matriz 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] .Close ; // Raphael espera un conjunto de arreglos, así que vamos a hacer que var formattedChartData = [chartData]; // active un evento que pasará los datos del gráfico al archivo chart.html // donde el Raphael lo procesará Motor de gráficos JS Ti.App.fireEvent ('renderChart', data: formattedChartData, startDate: todayMinus12Weeks, endDate: today);); El bloque final de código está haciendo otra llamada YQL, pero esta vez la llamada es a la tabla de datos de servicio llamada yahoo.finance.historicaldata que nos va a devolver una matriz JSON de valores de datos históricos. En nuestro caso, estamos buscando en las últimas doce semanas de datos para el código de stock seleccionado. Una vez que tenemos estos datos, es simplemente un caso de iteración a través de ellos hacia atrás (el elemento más antiguo es el último en la matriz JSON), y empujar la Cerrar valor de la propiedad en nuestra nueva matriz llamada chartData. Raphael utilizará los valores flotantes para representar los valores en el gráfico de barras. Finalmente, utilizamos Ti.App.fireEvent para activar el evento renderChart que creamos en el paso anterior, pasando nuestros valores a la chart.html archivo mientras lo hacemos!
Ejecute la aplicación en su simulador ahora y debería terminar con un gráfico que se presenta en nuestro tercer cuadro!
Bueno, como dice Porky, ¡eso es todo amigos! Hemos cubierto mucho en este tutorial, que incluye la consulta y utilización de datos de Yahoo YQL, la implementación de una biblioteca de terceros en Raphael JS Charts y la creación de una aplicación útil y bien diseñada con Titanium Mobile. Espero que hayas disfrutado siguiéndolo y me encantaría ver qué más haces con Appcelerator Titanium. Realmente es una gran plataforma móvil. Diviértete programando!
