Hi I am using sencha touch 2.1.1 charts to show the polls result as in cartesian chart format.I assigned my axes type as 'integer'. My given input values for chart's store are always whole numbers only(like 1,2,3...). But the drawned graph axis contains decimals, but i no need of decimals in my axis.How to fix this.Thanks in advance.
Ext.define("KBurra1.view.PollChart",{
extend:"Ext.chart.CartesianChart",
requires:['Ext.data.JsonStore','Ext.chart.axis.Numeric','Ext.chart.axis.Category','Ext.chart.series.Bar'],
config:{
store:null,
//id:"poll_chart",
height:'200px',
flipXY: true,
axes: [{
type: 'numeric',
minimum:0,
//maximum:3,
//increment:1,
position: 'bottom',
title: 'Number of Votes',
grid: {
odd: {
opacity: 1,
fill: '#dddc',
stroke: '#bbb',
lineWidth: 1
},
},
}, {
type: 'category',
position: 'left',
grid: true,
label: {
rotate: {
degrees:330
},
}
}],
series: [{
//title : ['data1'],
type: 'bar',
xField: 'answer',
yField: ['votecount'],
style: {
fill:'#57a4f7',
minGapWidth:5,
},
stacked : false
}]
}
});
You can use the built in javascript function "toFixed(0)" this will give it 0 decimal places. Also if you want 1 decimal place just put 1 instead of 0.
To use it in the chart add a render property to the axes with a little function that does it. In my app I was dealing with numbers in millions so I divide by 1000000 and then display only 1 decimal.
axes: [
{
type: 'numeric',
position: 'left',
fields: ['population','phones'],
minimum: 0,
renderer: function (value) {
value = value / 1000000;
return value.toFixed(1);
},
grid: true
},
In your case just multiply by 100 and use toFixed(0)
Related
I have a radar chart with 4 radar series, i want to use renderer function for each type.
My sample code is :
series: [{
type: 'radar',
xField: 'name',
yField: 'data3',
renderer: function(storeItem, item, i, display){
alert(storeItem)
},
showInLegend: true,
showMarkers : false,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#FFF',
fill: 'none'
}
},{
type: 'radar',
xField: 'name',
yField: 'data2',
showMarkers: true,
showInLegend: true,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#FF0',
fill: 'none'
}
},{
type: 'radar',
xField: 'name',
yField: 'data5',
showMarkers: true,
showInLegend: true,
markerConfig: {
radius: 5,
size: 5
},
style: {
'stroke-width': 2,
stroke : '#0FF',
fill: 'none'
}
}]
where to add renderere function? I tried adding in all possible ways but its not working.
Am i doing any mistake? or the function is not there for radar chart?
pls some one let me know
Im using extjs4.1.0
When in doubt, grep the source.
The renderer function is never called in a radar chart. Looks like another documentation bug. The label.renderer function gets called but it's only good for formatting the display text.
I'm playing with Sencha Touch Charts. I've got them working, with interactions, animation everything is good. I even styled a bunch of them.
But when I got around styling a series of type area.. it just wouldn't take.
new Ext.chart.Chart({
theme: 'MyTheme',
cls: 'myClass',
legend: { ... },
interactions: [{ ... }],
store: app.stores.MyStore,
axes: [...],
series: [{ type: 'area', axis: 'left', xField: 'Date', yField: 'someField' },
{ type: 'line', axis: 'right', xField: 'Date', yField: 'someField2' }
]
})
and the style
chart[cls=myClass] {
series {
&[type=area] {
fill: #FFA500;
}
&[type=line] {
stroke: #008000;
fill: #008000;
marker {
stroke: #008000;
fill: #008000;
}
}
}
}
so the line series is styled just fine, but the area is not :| Any idea?
I've not actually tried this but it looks like you're almost there...
Based on the example found at http://docs.sencha.com/touch-charts/1-0/#!/guide/touch_charts_styling (at "axis" -> "label")
I'd try:
axis[position=bottom] {
label {
rotate: 0 0 45;
}
}
Using ExtJS4, I need to draw a straight line across a column chart indicating the average of the series. Does anyone have know of an example of this or have a suggestion on how to do it?
I usually have the average value calculated on server side and held in the store. For exmaple, My store will be:
Ext.data.Store({
fields: ['name','active','avg'],
autoLoad: true,
proxy: {
type: 'ajax',
url : '/location/to/data'
}
})
The 'avg' holds the average value. The average line is drawn using the following series configuration:
{
type: 'line',
xField: 'name',
yField: 'avg',
showMarkers: false // Ensures that markers don't show up on the line...
}
Or we can calculate it on client side like this. Here is a working sample.
var container = Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: 'fit',
items: {
xtype: 'cartesian',
store: {
fields: ['month', 'value'],
data: [{
month: 'January',
value: 40
}, {
month: 'February',
value: 30
}, ]
},
axes: [{
id: 'left',
type: 'numeric',
position: 'left',
fields: 'value',
grid: true,
listeners: { // this event we need.
rangechange: function (axis, range) {
var store = this.getChart().getStore();
var tmpValue = 0, ortalama = 0, idx = 0;
store.each(function (rec) {
tmpValue = rec.get('value');
ortalama = tmpValue + ortalama;
idx++;
});
ortalama = (ortalama / idx).toFixed(2);
this.setLimits({
value: ortalama,
line: {
title: {
text: 'Average: ' + ortalama + ' USD'
},
lineDash: [2, 2]
}
});
}
}
}, {
id: 'bottom',
type: 'category',
position: 'bottom',
fields: 'month'
}],
series: {
type: 'bar',
xField: 'month',
yField: 'value',
label: {
field: 'value',
display: 'outside',
orientation: 'horizontal'
}
}
}
});
I've implemented a Chart that needs to be populated after its creation.
Here is a snip of the object i created:
MyApp.views.chartPanel = new Ext.chart.Panel({
id: 'chartPanel',
title: 'Pie Chart',
items: {
cls: 'pie1',
theme: 'Demo',
store: null,
shadow: false,
animate: false,
insetPadding: 20,
legend: {
position: 'top'
},
.....
pass: function(id) {
MyApp.views.chartPanel.items.items[0].bindStore(getData(id));
}
The pass function is invoked and chart is populated but i cannot see the legend that is shown only if the users double-click on the window and resets the chart.
How can i correctly show the legend?
Add the following in your series config:
series: [{
type: 'pie',
....
showInLegend: true,
label: {
field: 'name'
}
}]
The gauge is showing up just fine but the label "Some diff data" does not show up under the chart as expected. Ext JS 4 API - Gauge says display denotes how the label gets displayed. I assume title is the label. Any ideas?
series: [{
type: 'gauge',
field: 'diff1',
donut: false,
title: "Some diff data",
display: 'under', //tried outside as well
colorSet: ['#FFFFCC', '#FF9999']
}]
You are correct that the title field is for the title. But it's not specified as part of the series...it needs to be applied to the axes. Such as, like this:
items: [{
xtype: 'chart',
data: 'data',
height: 200,
width: 200,
animate: true,
store: 'store1',
axes: [{
position: 'gauge',
title: 'Your Title Here', // << HERE >>
type: 'Gauge',
margin: 8,
maximum: 100,
minimum: 0,
steps: 4
}],
series: [{
type: 'gauge',
angleField: 'data1',
donut: 60,
needle: false
}]
create text sprites for the title or any labels.
Look at the Ex.draw package.