sencha touch and charts

Question

¿Alguien ha sido capaz de incorporar Gráficos y gráficos a Sencha Touch?

Si es así, un ejemplo sería apreciado.

Gracias

Answer 1

que estaba bajo la impresión de que Raphael (http://raphaeljs.com/) con el tiempo se incorporaría en Sencha Touch por su componente de gráficos (http://g.raphaeljs.com/). Hasta entonces, puede simplemente incluir los archivos .js de Raphael adicionales y hacer gráficos de esa manera. Algo así como:

<script src="sencha-touch-1.0/sencha-touch-debug.js" type="text/javascript" charset="utf-8"></script> 

<!-- Raphael JS --> 
<script src="raphael/raphael-min.js" type="text/javascript" charset="utf-8"></script> 
<script src="raphael/g.raphael-min.js" type="text/javascript" charset="utf-8"></script> 
<script src="raphael/g.pie-min.js" type="text/javascript" charset="utf-8"></script> 
<script src="raphael/g.line-min.js" type="text/javascript" charset="utf-8"></script> 
<script src="raphael/g.bar-min.js" type="text/javascript" charset="utf-8"></script> 

<script type="text/javascript" charset="utf-8"> 
    Ext.setup({ 
     onReady: function() 
     { 
      // Set up main panel! 
      var tabPanel = new Ext.Panel 
      ({ 
       fullscreen: true, 
       html: '<div id="graph"></div>' 
      }); 

      // Try to draw a graph! 
      var r = Raphael('graph'); 
      r.g.txtattr.font = '12px Helvetica, Arial, sans-serif'; 
      r.g.text(150, 250, "Demo chart with title"); 
      r.g.linechart(10, 10, 300, 220, [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]], {nostroke: false, axis: "0 0 1 1", symbol: "o", smooth: true}); 

     } 
    }); 
</script> 

Answer 2

Tome un vistazo a http://code.google.com/p/oppo-touching/. Alguien ya movió los gráficos a Snecha Touch. También hay noticias de que la próxima versión de Sencha Touch incluirá gráficos.

Answer 3

Sencha Touch Charts acaba de ser released

Answer 4

que ahora tienen algunos ejemplos. deben ayudar http://dev.sencha.com/deploy/touch-charts-beta/examples/

Answer 5

Aquí está el código para un gráfico de ejemplo en Sencha Touch

var SampleLineChart = new Ext.chart.Chart({ 
    fullscreen : true, 
    iconCls: 'line', 
    cls: 'chartpanel', 
    theme: 'Energy', 
    interactions: [ 'reset', 
    { 
     type: 'panzoom', 
     axes: { 
      right: {} 
     } 
    }, 
    { 
     type: 'iteminfo', 
     gesture: 'tap', 
     listeners: { 
      show: function(interaction, item, panel) { 

//     Ext.dispatch({ 
//      controller : 'Users', 
//      action : 'popupInfoAbtChart', 
//      data : {item:item, panel:panel} 
//     }); 

      } 
     } 
    }], 
    animate: false, 
    store: EnergyApp.stores.ChartStore, //choose for consumption 
    axes: [{ 
     type: 'Numeric', 
     position: 'right', 
     minimum: 0, 
     majorTickSteps : 10, 
     minorTickSteps : 5, 
     fields: ['generatedpv', 'buildcons','excessPV'], 
     title: 'Y-axis title' 
    }, 
    { 
     type: 'Category', 
     position: 'bottom', 
     fields: ['day'], 
     title: 'X-axis title', 
     label: { 
      rotate: { 
       degrees: 45 
      } 
     } 
    }], 
    legend: { 
     position: Ext.is.Phone ? 'left' : 'top' 
    }, 

    series: [{ 
     type: 'line', 
     highlight: false, 
     showMarkers: true, 
     fill: false, 
     smooth: true, 
     axis: 'right', 
     xField: 'day', 
     yField: 'generatedpv', 
     title: 'Field 1 
    }, 
{ 
     type: 'line', 
     highlight: false, 
     showMarkers: true, 
     fill: false, 
     smooth: true, 
     axis: 'right', 
     xField: 'day', 
     yField: 'buildcons', 
     title: 'Field 2 
    }], 

    listeners: { 
     afterrender: function(me) { 
      me.on('beforerefresh', function() { 
       if (me.ownerCt.getActiveItem().id !== me.id) { 
        return false; 
       } 
      }, me); 
     } 
    } 
}); 

Para más ejemplos de código miren el Ejemplo EnergyApp en el ejemplo carpeta Sencha Touch--Charts. Su sido representado muy bien

Answer 6

Aquí hay un enlace a un foro Sencha con algunos ejemplos de cómo incorporar un gráfico en una aplicación Sencha Touch 2.0 existente:

http://www.sencha.com/forum/showthread.php?190053-How-to-Integrate-Touch-2-Charts-into-an-existing-Sencha-Touch-2.0-Final-application.

Answer 7

Existe el paquete con el api de gráfico para Sencha (http://dev.sencha.com/deploy/touch-charts-beta/examples/) pero parece muy difícil de integrar en la solución táctil sencha (dependencia de archivos, función no definida en alguna versión del paquete sencha touch).

La solución que encontré es instalar la versión de prueba de Sencha Architect que ya incluye la API gráfica, crear un proyecto móvil (tocar proyecto) y empaquetarla. Luego tengo un paquete completo con las dependencias correctas y puedo reutilizarlo sin depender de Sencha Architect.