PDA

View Full Version : Create a pie chart with data type : string



GBenji
29 Feb 2012, 4:30 AM
Hi,

I wanna create a pie chart with 3 sections (Alive,Dead,Standby) using a store, but I'm not sure if a pie chart can manage string or just manages numbers.

My error :

Error: Problem parsing d="M589,300LNaN,NaNA290,290,0,0,1,NaN,NaNLNaN,NaNA290,290,0,0,1,NaN,NaNLNaN,NaNL589,300Z"


My PieChart.js :

/*Integrating the chart library */
Ext.require('Ext.chart.*');


Ext.define('poar.view.piechart.PieChart',{
extend: 'Ext.chart.Chart',
alias: 'widget.pieChartPanel',
loadMask:true,
height: 600,
store : 'Resources',
series : [{
type: 'pie',
angleField: 'state',
//showInLegend: true
}],

initComponent: function() {
this.callParent(arguments);
},
});


Help me please :((

friend
29 Feb 2012, 4:40 AM
The general idea behind a chart is to help visualize trends in numeric data. Your 'Alive/Dead/Standby' strings imply a 'category', where you could associate a simple integer with each string, then render a chart accordingly. If your series data contained the integer 1 for each String category, then you would get a pie chart divided into three equal slices of the Alive, Dead and Standby categories.

Functional example here:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie Chart</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

Ext.create('Ext.window.Window', {
title: 'Pie Chart',
height: 400,
layout: 'fit',
width: 400,
items: [{
xtype: 'chart',
animate: true,
insetPadding: 5,
legend: {
position: 'right'
},
shadow: true,
store: {
fields: [{
name: 'category', type: 'string'
},{
name: 'data', type: 'int'
}],
data: [{
category: 'Alive', data: 1
},{
category: 'Dead', data: 1
},{
category: 'Standby', data: 1
}]
},
series: [{
type: 'pie',
field: 'data',
showInLegend: true,
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'category',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}]
}).show();
});

</script>
</head>

<body>
</body>
</html>

GBenji
29 Feb 2012, 4:53 AM
Thanks for reply,

But my serie data contains string and no integer, furthermore I can't change it.

There is not a property to allow the grouping by category and not by integer ?

Or I have to create a store with my original store which has 1 for Alive, 2 for Standby, 3 for Dead ?

Edit : I just tried your solution and thanks it's a new way of reflection for me, now I have to found how my Pie Chart can call my store for count how many 'Dead' there are in, etc...