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.
Related
I am trying to connect a RallyChart using the type specifier set to pie with a Rally.data.custom.Store. When the RallyChart has the type set to column or is blank, the data shows correctly. When the type is set to pie, I get a pie with all 0%s returned.
Here's what my store looks like:
var myStore = Ext.create('Rally.data.custom.Store', {
data: mySeries,
fields: [
{ name: 'WorkItems', type: 'string' },
{ name: 'Count', type: 'int' }
]
});
Here's what my chart configuration function looks like:
_buildChart: function(myStore) {
this.myChart = Ext.create('Rally.ui.chart.Chart', {
height: 400,
store: myStore,
series: [{
type: 'pie',
name: 'Count',
dataIndex: 'Count'
}],
xField: 'WorkItems',
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Work Breakdown in Selected Sprint'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
}
}
});
this.add(this.myChart);
}
My data incoming looks like:
['Defects', 4],
['Feature A', 4]
['Feature B', 4]
Any ideas why column charts can show it, but pie cannot?
I bet this is a bug in the 2.0p5 version of the chart. We just released version 2.0rc1 of the SDK which includes a better version of the chart. The following code example shows how to create a pie with your data and Rally.ui.chart.Chart in 2.0rc1:
//from inside your app
this.add({
xtype: 'rallychart',
height: 400,
chartData: {
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Defects', 4], ['Feature A', 4], ['Feature B', 4]
]
}]
},
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
xAxis: {},//must specify empty x-axis due to bug
title: {
text: 'Work Breakdown in Selected Sprint'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
}
}
});
Note it is no longer necessary to create an intermediate store to pass to the chart- you can simply pass in your series as part of the chartData config.
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)
can anybody tell how to change color of bar in column chart .I have tried with style but its not working
style : {
fill : ['red', 'green'],
width : 30
},
Thanks
Use color renderer function for series onReady method like this on custom example;
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
style: 'background:#fff',
shadow: false,
store: store1,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'bar',
axis: 'bottom',
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
contrast: true
},
xField: 'name',
yField: ['data1'],
//color renderer
renderer: function(sprite, record, attr, index, store) {
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('data1') >> 0) % 5;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color
});
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Bar Renderer',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}],
items: chart
});
});
Good Luck!
I am trying to put 2 charts next to each other, just like the Yearly view in the example EnergyApp. My code I use for initiating the charts and putting them into the Panel is as follows:
var salesChart = new Ext.Panel({
title: 'Sales',
iconCls: 'line',
cls: 'chartpanel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
xtype: 'chart',
cls: 'sales',
store: StoreDemo.stores.SalesStore,
shadow: true,
animate: true,
interactions: [{
type: 'iteminfo',
listeners: {
show: function(interaction, item, panel) {
// Can be used to pop-up more information or to load drill down chart
}
}
}, {
type: 'panzoom',
axes: ['bottom']
}],
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 1000,
fields: ['total'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Total'
},
{
type: 'Category',
position: 'bottom',
fields: ['month'],
label: {
renderer: function(v) {
return Date.monthNames[(v - 1) % 12];
}
},
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
field: 'total'
},
xField: 'month',
yField: 'total'
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
fill: true,
axis: 'left',
smooth: true,
label: {
field: 'forecast'
},
xField: 'month',
yField: 'forecast'
}]
}, {
flex: 1,
xtype: 'chart',
cls: 'sales-forecast',
store: StoreDemo.stores.SalesForecastStore,
shadow: true,
animate: true,
interactions: [{
type: 'iteminfo',
listeners: {
show: function(interaction, item, panel) {
// Can be used to pop-up more information or to load drill down chart
}
}
}, {
type: 'panzoom',
axes: ['bottom']
}],
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 1000,
fields: ['total'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Total (Forecast)'
},
{
type: 'Category',
position: 'bottom',
fields: ['month'],
label: {
renderer: function(v) {
return Date.monthNames[(v - 1) % 12];
}
},
title: 'Month of the Year'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
label: {
field: 'total'
},
xField: 'month',
yField: 'total'
}]
}]
});
StoreDemo.views.ChartView = new Ext.TabPanel({
tabBar: {
dock: 'top',
layout: {
pack: 'center'
}
},
ui: 'light',
cardSwitchAnimation: {
type: 'slide'
},
items: [salesChart]
});
The two charts overlap, but only the data, not the axes. Here is a screenshot from Chrome 14 (it also happens on Chrome 16 and Safari 5):
You can see that the right chart is empty since the data is displayed behind the left chart.
The same thing happens for 3 charts. I tried to set a fixed width and height instead of a flex number, but then the charts completely disappeared.
I searched Google and this forum and didn't find any topic to help me (I also read the articles in the Sencha Learn, and of course the source of the EnergyApp).
Your help is very appreciated.
Ofir
You can try to set the layout of items that under the panel as 'fit'.
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.