Ext.chart.Chart Not Working

Question

When i replace with Ext.chart.CartesianChart with Ext.chart.Chart its not working,Here the code,

CartesianChart chart

Ext.define("dashboard.view.HrsWorkedChart", {
       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"
                  ],
       alias: "widget.hrsworkedchart",
       config: {
       flex: 1,
       xtype: "chart",
       store: "HrsAndValueByYear",
       cls: "chart",
       innerPadding: 20,
       animate: true,
       series: [
                {
                type: "line",
                xField: "year",
                yField: "hrsworked",
                title: "Hours Worked",
                style: {
                stroke: "#003366",
                lineWidth: 3
                },
                marker: {
                type: "circle",
                stroke: "#003366",
                radius: 5,
                lineWidth: 3
                },
                label: {
                field: "hrsworked",
                color: "#000",
                display: "over",
                font:"10px Helvetica"
                }
                },
                {
                type: "line",
                xField: "year",
                yField: "hrsbilled",
                title: "Hours Billed",
                style: {
                stroke: "#6d0060",
                lineWidth: 3
                },
                marker: {
                type: "circle",
                stroke: "#6d0060",
                radius: 5,
                lineWidth: 3
                },
                label: {
                field: "hrsbilled",
                color: "#000",
                display: "over",
                font: "10px Helvetica"
                }
                }
                ],
       axes: [
              {
              type: "numeric",
              position: "left",
              title: {
              fontSize: 15,
              text: "Hrs"
              },
              minimum: 130000,
              maximum: 180000,
              grid: {
              even: {
              fill: "#f9f9f9"
              }
              }
              },
              {
              type: "category",
              position: "bottom"
              }
              ]
       }
       });

Ext.Chart.Chart

Ext.define("dashboard.view.HrsWorkedChart", {
       extend: "Ext.chart.Chart",
       alias : "widget.hrsworkedchart",
       flex: 1,
       shadow: true,
       animate: true,
       store: "HrsAndValueByYear",
       axes: [{
              type: 'Numeric',
              position: 'left',
              fields: ['year'],
              minimum: 0,
              hidden: true
              }, {
              type: 'Category',
              position: 'bottom',
              fields: ['hrsworked'],
              label: {
              renderer: function(v) {
              return Ext.String.ellipsis(v, 15, false);
              },
              font: '9px Arial',
              rotate: {
              degrees: 270
              }
              }
              }],
       series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
                style: {
                fill: '#456d9f'
                },
                highlightCfg: {
                fill: '#a2b5ca'
                },
                label: {
                contrast: true,
                display: 'insideEnd',
                field: 'year',
                color: '#000',
                orientation: 'vertical',
                'text-anchor': 'middle'
                },
                xField: 'name',
                yField: ['price']
                }]        
       });

Whats wrong with my code.Please help me to solve

Answer 1

Couple of pointers

1. in axis config, the valid type is "numeric" , "category". You have it as upper case N and C.
2. Category axis should be years and numeric axis should be hrsworked.
3. i am not sure if there is a "column" series. Use "bar" instead.

you can see the sample here https://fiddle.sencha.com/#fiddle/51f and the code snippet below.

var store1 = Ext.create('Ext.data.Store', {
    fields: ['year', 'hrsworked'],
    data: [{
       year: 2010,
       hrsworked: 130000
    }, {
       year: 2011,
       hrsworked: 140000
    }, {
       year: 2012,
       hrsworked: 150000
    }]
});

Ext.define("dashboard.view.HrsWorkedChart", {
          extend: "Ext.chart.Chart",
          requires: ["Ext.TitleBar", "Ext.chart.CartesianChart", "Ext.chart.series.Bar", "Ext.chart.series.Line", "Ext.chart.axis.Numeric", "Ext.chart.axis.Category", "Ext.draw.sprite.Circle"],
          alias: "widget.hrsworkedchart",
          config: {
             flex: 1,
             shadow: true,
             animate: true,
             store: store1,
             cls: "chart",
             innerPadding: 20,
             animate: true,
             series: [{
                type: 'bar',
                xField: 'year',
                yField: ['hrsworked'],
                style: {
                  fill: 'blue'
                }
             }],
            axes: [{
                type: "numeric",
                position: "left",
                minimum:0,
                title: {
                  fontSize: 15,
                  text: "Hrs"
                },
                grid: {
                  even: {
                    fill: "#f9f9f9"
                  }
               },
               field: ['hrsworked']
            }, {
               type: "category",
               position: "bottom",
               label: {
        font: '9px Arial',
                    rotate: {
                      degrees: 270
                     }
           },
               field: 'year'
           }]
        }
 });