im trying out an app ,that plots charts from the store. It tends to display the axes but not the graphical lines and point

Question

the store works fine for the rest of the app but im not able to use that data and plot that data in the graph.

i have done some basic work with the little knowledge i have with charts.

i tried out with other examples which work but im not able to figure out the problem with this. the console says:Uncaught TypeError: Cannot read property '1' of undefined

i have installed ruby,compass and sass

view:

Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
requires: [
    'Ext.TitleBar',
    'Ext.chart.CartesianChart',
    'Ext.chart.series.Line',
    'Ext.chart.axis.Numeric',
    'Ext.chart.axis.Category',
    'Ext.draw.sprite.Circle',

],
xtype: 'graph',
config: {
    flex: 1,
    xtype: 'chart',
    store: 'mystore',
    cls: 'chart',
    innerPadding: 10,
    animate: true,
    series: [
        {
            type: 'line',
            xField: 'date',
            yField: 'amount',
            title: 'Expenses',
            style: {
                stroke: '#003366',
                lineWidth: 3
            },
            marker: {
                type: 'circle',
                stroke: '#003366',
                radius: 5,
                lineWidth: 3
            }
        }
    ],
    axes: [
        {
            type: 'numeric',
            position: 'left',
            title: {
                fontSize: 15,
                text: 'Amount'
            },
            grid: {
                even: {
                    fill: '#f9f9f9'
                }
            }
        },
        {
            type: 'numeric',
            position: 'bottom',
            title: {
                fontSize: 15,
                text: 'date'
            },
            grid: {
                even: {
                    fill: '#f9f9f9'
                }
            }
        }
    ]
}
});

modal:

 Ext.define('CSBApp.model.expensemodel',{
 extend: 'Ext.data.Model',


   config: {

        identifier:{
          type:'uuid'
        },
       fields: [
        {
          name:'desc',
          type:'string'
        },

       {
          name: 'amount',
          type:'number'
       },
       {
          name: 'date',
          type:'date',
          defaultformat: 'Y-m-d' 
       },

       ],
       // autoLoad : true

 }
});

store:

Ext.define('CSBApp.store.mystore',{
extend : 'Ext.data.Store',

config : {
    model : 'CSBApp.model.expensemodel',
    storeId : 'mysqlstore',

    proxy : {
        type : 'sql',
        id : 'mystore',
        reader: {
            type: "sql"

        }

    },
    autoLoad : true
}
});

Answer 1

i have kind of figured it out. the basic problem resides in the view and how it calls the store. so the app seems to work fine with the sql store. the main factor is that the 'requires' files have to be correct.

here is the view:

Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
xtype: 'graph',

requires: [
    'Ext.chart.series.Line',
    'Ext.chart.axis.Numeric',
    'Ext.chart.axis.Category',
    'Ext.chart.CartesianChart',
    'Ext.chart.axis.layout.CombineDuplicate',
    'Ext.chart.axis.segmenter.Names'
],

config: {

   store:'mysqlstore' ,
   width : '100%',
   layout:'fit',
axes: [{
    type: 'numeric',
    position: 'left',
    title: {
        text: 'Sample Values',
        fontSize: 15
    },
    minimum:0,
    fields: 'amount'
    },

 {
    type: 'category',
    position: 'bottom',
    title: {
        text: 'Sample Values',
        fontSize: 15
    },
    fields: 'date',
    minimum:0,
}],
series: [{
    type: 'line',
    xField: 'date',
    yField: 'amount',
    minimum:0,
style: {
                stroke: '#003366',
                lineWidth: 3
            },

marker: {
                type: 'circle',
                stroke: '#003366',
                radius: 5,
                lineWidth: 3,

                }
            }
}]
}
});

this is pretty correct if you get the store rite.