Ext.chart.Chart Not Working - extjs

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
in axis config, the valid type is "numeric" , "category". You have it as upper case N and C.
Category axis should be years and numeric axis should be hrsworked.
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'
}]
}
});