How to get Highchart Gauge to work in Sencha Touch 2

Question

Trying to use Highcharts with Sencha Touch 2.3.1

I am using this from JoKuan

The highcharts do not seem to be rendering, yet the containers are being assigned the Highcharts ID (ext-highcharts) and the class that is in my code:

Charts created with this:

theGauge = new Ext.create('Chart.ux.Highcharts', {   
  xtype: 'highchart',
  cls: 'ag',//component renders with this class ok
  series:[{
    dataIndex: 'CurrentValue'
  }],
  store: gaugeStore,
  chartConfig: {
    chart: {
      type: 'gauge'
    },
    title: {
      text: 'A simple graph'
    }
  }
});

console.log(theGauge);

This is the container for the chart:

chartgx = Ext.Container({
  xtype : 'container',
  flex: 1,
  layout: 'fit',
  items: [], 
  id: 'innerGauge_'+tt+'_'+tt2,
  itemId: 'x-innerGauge_'+tt+'_'+tt2
});

Ext.getCmp('gauge_'+tt+'_'+tt2).add(chartgx); //add inner container to outer container
Ext.getCmp('innerGauge_'+tt+'_'+tt2).add(theGauge); //add gauge to inner container

My App.js has:
requires: [ 'Chart.ux.Highcharts', 'Chart.ux.Highcharts.Serie', 'Chart.ux.Highcharts.AreaRangeSerie', 'Chart.ux.Highcharts.AreaSerie', 'Chart.ux.Highcharts.AreaSplineRangeSerie', 'Chart.ux.Highcharts.AreaSplineSerie', 'Chart.ux.Highcharts.BarSerie', 'Chart.ux.Highcharts.ColumnRangeSerie', 'Chart.ux.Highcharts.ColumnSerie', 'Chart.ux.Highcharts.GaugeSerie', 'Chart.ux.Highcharts.LineSerie', 'Chart.ux.Highcharts.PieSerie', 'Chart.ux.Highcharts.RangeSerie', 'Chart.ux.Highcharts.ScatterSerie', 'Chart.ux.Highcharts.SplineSerie', 'Chart.ux.ChartsMobileConfig', .....]

The object called theGauge is present in my source code, but no gauge chart is visible. No errors are shown in the console.log

The store seems ok, console.log shows raw data to include:
raw: Object BaseValue: 0 CentreValue: 756.79 CurrentValue: 413.55 Generated: "/Date(1399375165754+0100)/" Title: "Order Value Today" Type: 1

I have had a look at this post, and made the changes recommended, but still no success.

Answer 1

I have never worked with Sencha Touch but I have worked with Sencha Ext JS.

You don't need an extension in order mix up Sencha ExtJS and Highcharts. All Highchart/HighStock charts are assigned an html div to which they are rendered. You only need to get the html div from the Ext Js element you want to use for your chart. Here is an example from code i have which works fine:

var myVp = Ext.create('Ext.container.Viewport', {.........}

chart1 = new Highcharts.StockChart({
   chart: {
      renderTo: myVp.down('#Graph1').getEl().dom,
      zoomType: 'x'
   },
............
............
});

Here is the Graph1, its somewhere in myVp

  {
    flex: 8,
    xtype : "component", //i have other examples where the xtype is panel that
                         //work fine. I think this will work with all the type
                         //on containers
    itemId: 'Graph1'
  }

I know this isnt exactly what you were asking but i think its a very good aproach. The only drawback this has is that you will not be able to assigning a sencha store as the data of the chart. Here is the JsFiddle. Write me with feedbacks.