PDA

View Full Version : Having trouble displaying the line graph.



skotamreddy
10 Apr 2012, 9:40 AM
I am having trouble displaying the line graph properly. &nbsp;I have a Json store and I am able to display a grid, bar chart and pie chart without any issue. &nbsp;The line graph is a straight line from 0,0 to 5,5. &nbsp;Attached is the output of the html page. &nbsp;Please let me know what is it I am missing. I removed the code for bar chart and piechart.<br><br>
<html><head>
<title>EasyAsk Query Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../examples/resources/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../examples/resources/example.css" />
<script type="text/javascript" src="../examples/javascript/bootstrap.js"></script>

<script type="text/javascript">
//javascript code to create the grid // create the data store
Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
fields: ['User Name','Number of Opportunities'],
data: [{'User Name':'chris','Number of Opportunities':'14'},{'User Name':'jim','Number of Opportunities':'3'},{'User Name':'maxx','Number of Opportunities':'22'},{'User Name':'sally','Number of Opportunities':'26'},{'User Name':'sarah','Number of Opportunities':'5'},{'User Name':'will','Number of Opportunities':'12'}] });




// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
columns: [{text:'User Name', dataIndex:'User Name'},{text:'Number of Opportunities', dataIndex:'Number of Opportunities'}],
height: 350,
width: 800,
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});





Ext.create('Ext.tab.Panel', {
width: 600,
height: 350,
activeTab: 2,
items: [
{
title: 'Bar Chart',
bodyPadding: 10,
contentEl : 'bar-chart'
},
{
title: 'Pie Chart',
contentEl : 'pie-chart'
},
{
title: 'Line Chart',
contentEl : 'line-chart'
}
],
renderTo : 'tab-panel'
});

Ext.create('Ext.chart.Chart', {
renderTo: 'line-chart',
width: 500,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['Number of Opportunities'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['User Name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'User Name',
yField: 'Number of Opportunities',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});



});


</script>

</head>
<body>
<Form name ="form1" Method ="POST" Action ="ask.php">
<Input Type = "text" size="117" id="q" Value ="count opportunities by user" Name ="q">
<Input Type = "Submit" id = "EasyAsk" Name = "EasyAsk" Value = "EasyAsk">
</FORM>
<div id="grid-example"></div>
<div id="tab-panel" ></div>
<div id="bar-chart" class="x-hide-display"></div>
<div id="pie-chart" class="x-hide-display"></div>
<div id="line-chart" class="x-hide-display"></div>
</body>
</html>


<br></div>

mitchellsimoens
12 Apr 2012, 11:43 AM
Since you are using Numeric axis, the Number of Opportunities data should be a number not a string:


var store = Ext.create('Ext.data.JsonStore', {
fields: ['User Name','Number of Opportunities'],
data: [
{'User Name':'chris','Number of Opportunities':14},
{'User Name':'jim','Number of Opportunities':3},
{'User Name':'maxx','Number of Opportunities':22},
{'User Name':'sally','Number of Opportunities':26},
{'User Name':'sarah','Number of Opportunities':5},
{'User Name':'will','Number of Opportunities':12}
]
});

skotamreddy
12 Apr 2012, 3:22 PM
Hi Mitchell,

Thank you for pointing that out. Feel dumb making such a silly mistake. :">

As the bar chart was working without any issue, I was expecting line to behave the same.

Thanks again,
Srinivas