PDA

View Full Version : Piechart not loading properly



srikanthreddy karnati
2 Sep 2014, 5:24 AM
Hi,
I'm trying to get a pie chart in Extjs4 panel using highcharts. I think in my project Everything is properly set up.But I'm not getting pie chart.could someone help me where I went wrong??This is very important.I have googled so much but couldn't make out.

My .js file

Ext.Loader.setConfig({
enabled : true,
disableCaching : true
});


Ext.require('Chart.ux.HighChart');


Ext.application({
name : 'HighChart',
launch : function() {
// Using the new ExtJS 4 store
Ext.define('HighChartData', {
extend : 'Ext.data.Model',

fields : [{
name : 'risk',
type : 'string'
}, {
name : 'value',
type : 'float'
}]

});

var mystore = Ext.create('Ext.data.Store', {
model : 'HighChartData',
proxy : {
type : 'ajax',
url : 'data/standalone.json',
reader : {
type : 'json',
root : 'rows'
}
},
autoLoad : true
});


var panel = Ext.create('Ext.panel.Panel', {
width : 800,
height : 600,
minHeight : 400,
minWidth : 550,
hidden : false,
shadow : false,
maximizable : true,
title : 'Highchart example',
renderTo : Ext.getBody(),
layout : 'fit',

items : [{
xtype : 'highchart',
animate: true,
series : [{
type : 'pie',
//data :dataArray,
field : 'value',
visible : true,
label : {
field : 'risk',
display : 'rotate',
contrast : true,
font : '18px Arial'
}

}],
store : mystore,

chartConfig:{
chart: {
plotBackgroundColor: null,
plotShadow: false,

},
title: {
text: 'Portfolio Comparison Report'
},
plotOptions: {
pie: {
allowPointSelect: true,
showInLegend: true,
point: {
events: {
click: function(event) {
var options = this.options;
alert('Hi!!!This is ' + options.name );
}
}
}

}
},
legend:{
layout:'horizontal',
align:'right'
}
}
}]
});

}


});


My .json file

{"rows":[{"risk":"Low Risk","value":373,"type":"pie"},
{"risk":"Medium Risk","value":55,"type":"pie"},
{"risk":"High Risk","value":8,"type":"pie"}],
"success":true}




My .jsp file

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>RST PortFolio</title>
</head>
<body>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../extjs/examples/shared/example.css" />
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../Highcharts/js/highcharts.src.js"></script>
<script type="text/javascript" src="../crv/view/RSTPortfolioPie.js"></script>
</body>
</html>



When I run it I'm getting like this

50194




Thanks in advance!!!

Gary Schlosberg
2 Sep 2014, 8:45 AM
Was the link I posted on your other thread any help? Was thinking of the standalone post from LesJ.
http://www.sencha.com/forum/showthread.php?290763

Are the versions of Highcharts and ExtJS compatible?

Have you checked the Highcharts forum for similar issues?
http://forum.highcharts.com/

srikanthreddy karnati
2 Sep 2014, 12:25 PM
Hi
Yeah versions are compatible.it is working fine with other charts.I'm not understanding what could be the problem with pie chart.please help me

srikanthreddy karnati
2 Sep 2014, 9:52 PM
I could resolve finally pie chart issue...simply correcting field:'value' to dataField:'value' in the above provided code.But still I'm not getting labels of pie.they are showing as slice.Help me!!!50203