https://stackoverflow.com/questions/23264566
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianI found the solution. All i need to add was the chart height and width.
width:400px;
height:400px;
xtype: 'chart',
store: 'OcularPressure',
flex: 5,
layout: 'fit',
animate: false,
interactions: ['panzoom']
Creating a chart with Sencha Touch 2
-
08-07-2023 - |
Question
This is my view:
(Chart related code ends at the asterix line created)
Ext.define('denovoeye.view.OcularPressure', {
extend: 'Ext.navigation.View',
xtype: 'ocularPressure',
config: {
scrollable: {
direction: 'vertical'
},
items: [{
xtype: 'container',
fullscreen: true,
layout: 'vbox',
items: [{
style: 'background-color:#72D2D4;',
flex: 1,
items: [{
xtype: 'component',
flex: 1,
html: '<div style="text-align:left;padding : 20px 0px 0px 20px;color:#120963;"> INTRA OCULAR PRESSURE</div>',
}, {
xtype: 'chart',
store: 'OcularPressure',
flex: 5,
layout: 'fit',
animate: false,
interactions: ['panzoom'],
series: [
{
type: 'line',
xField: 'name',
yField: 'g1',
title: 'Line1',
style: {
lineWidth: 2,
stroke: 'rgba(0,40,170,0.7)'
}
},
{
type: 'line',
xField: 'name',
yField: 'g2',
title: 'Line2',
style: {
lineWidth: 2,
stroke: 'rgba(80,40,170,0.7)'
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
grid: true
},
{
type: 'category',
position: 'bottom',
grid: true,
visibleRange: [0, 0.5]
}
]
},
//******************************************************************************************
{
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:20px 20px 20px 20px;',
items: [{
html: ' ',
flex: 1.25
}, {
html: '<div style="text-align:left;padding : 20px 0px 0px 20px;color:#120963;">◼ Right Eye</div>',
flex: 1
}, {
html: '<div style="text-align:left;padding : 20px 0px 0px 20px;color:#ffffff;">◼ Left Eye</div>',
flex: 1
}]
}]
},
{
style: 'background-color: #ffffff;',
flex: 1,
items: [{
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:20px 20px 10px 20px;border-bottom:1px solid #c7c7c7;',
items: [{
xtype: 'container',
flex: 1.25,
html: ' '
}, {
xtype: 'container',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;margin : 20px 20px 0px 20px;color:#120963;"><b>Right Eye</b></div>'
}, {
xtype: 'container',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;margin : 20px 20px 0px 20px;color:#120963;"><b>Left Eye</b></div>'
}]
}, {
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:0px 20px 0px 10px;border-bottom:1px solid #c7c7c7;',
items: [{
xtype: 'container',
layout: 'hbox',
flex: 1.3,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">APR 4,2014</div>'
}, {
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">10mmHG</div>'
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">12mmHG</div>'
}]
},
{
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:0px 20px 0px 10px;border-bottom:1px solid #c7c7c7;',
items: [{
xtype: 'container',
layout: 'hbox',
flex: 1.3,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">APR 4,2014</div>'
}, {
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">10mmHG</div>'
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">12mmHG</div>'
}]
},
{
xtype: 'container',
flex: 1,
layout: 'hbox',
style: 'margin:0px 20px 0px 10px;border-bottom:1px solid #c7c7c7;',
items: [{
xtype: 'container',
layout: 'hbox',
flex: 1.3,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">APR 4,2014</div>'
}, {
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">10mmHG</div>'
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
html: '<div style="border-bottom:1px solid white;text-align:left;padding : 20px 20px 0px 20px;color:#120963;">12mmHG</div>'
}]
}]
}
]
}]
}
});
This is my model:
Ext.define('denovoeye.model.OcularPressure', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'auto'},
{name: 'g1', type: 'int'},
{name: 'g2', type: 'int'},
{name: 'g3', type: 'int'},
{name: 'g4', type: 'int'},
{name: 'g5', type: 'int'}
]
}
});
This is my store:
Ext.define('denovoeye.store.OcularPressure', {
extend: 'Ext.data.Store',
config: {
model: 'denovoeye.model.OcularPressure',
data: [
{"name": "Item-0", "g1": 18.341524994680185, "g2": 0.04297258032918805, "g3": 22.351114037029276, "g4": 10.501821959142115, "g5": 18.422488416954124},
{"name": "Item-2", "g1": 1.9082894708999651, "g2": 5.729225849931112, "g3": 14.809082259901247, "g4": 38.935629377514275, "g5": 2.7729804343737},
{"name": "Item-3", "g1": 21.372004559042896, "g2": 2.131323680889345, "g3": 12.98075950737056, "g4": 63.8279558143009, "g5": 18.852890370148263},
{"name": "Item-4", "g1": 2.678644589238747, "g2": 8.533478458163483, "g3": 4.442247207672851, "g4": 87.39642008886551, "g5": 27.236700916073737},
]
}
});
Am ending up with this error:
Uncaught TypeError: Cannot call method 'getData' of null
Can anyone take a look at this and help me render the chart?
Solution 2
OTHER TIPS
Its just a typo:-
Change the store name from "OcularPressure" to "OcularPressures" and replace it in the view as well. Also remove the warnings by adding all the required files needed in the view.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
