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.
Related
I have a problem with adding different values in tooltips in my chart using React-Native.
We have 3 series of my graph. The first shows the bars and the others are lines.
When I click on the bar I load a tooltip with the value "this.y" which is what I need and it works.
But when I click the in lines I need to load other values into the tooltips.
But I can't load these values. Clicking doesn't open the tooltip.
//Bar data
this.state.barArray = [10.1, 22.5, 33.3, 4.5, 1.5, 26.3, 17, 18.20, 9.2, 0.9, 1, 2];
//Line 1 data
this.state.line1Array = [12.1, 21.5, 23.3, 14.5, 13.5, 16.3, 15, 18.12, 19.2, 10.9, 0, 2.5];
//Line 2 data
this.state.line2Array = [13.1, 18.5, 13.3, 24.5, 19.5, 23.3, 10.3, 16.40, 29.2, 5.9, 21.3, 0];
//X axis of chart
this.state.dias = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
//Here I load 2 arrays with the values. I want to display on each line
var toolTip = ['2h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];
var toolTip2 = ['1h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];
Graph configuration.
var conf={
chart: {
type: 'column',
},
yAxis: {
title: {
useHTML: true,
text: null,
},
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF', 'rgb(71, 40, 213)', 'rgb(172, 143, 242)'], //Bar and lines colors
title: {
text: null
},
xAxis: {
categories: this.state.dias
},
credits: {
enabled: false
},
series: [{
type: 'column', //First serie with bar
name: 'Bar',
data: this.state.barArray,
marker: {
enabled: false,
},
tooltip: {
useHTML: true,
shared: false,
pointFormatter: function() {
return '<b>Value: ' + this.y + '</b>';
}
}
}, {
type: 'line', //Second serie with first line
name: 'Line 1',
data: this.state.line1Array,
marker: {
enabled: false,
},
tooltip: {
useHTML: true,
shared: false,
pointFormatter: function() {
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
return '<b>' + p + '</b>';
});
}
}
}, {
type: 'line', //Second serie with second line
name: 'Line 2',
data: this.state.line2Array,
marker: {
enabled: false,
},
tooltip: {
useHTML: true,
shared: false,
pointFormatter: function() {
Highcharts.each(toolTip2[this.series.data.indexOf(this)], function(p) {
return '<b>' + p + '</b>';
});
}
}
}],
tooltip: {
headerFormat: '',
},
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
I did this through the example of this link http://jsfiddle.net/o2zmLngr/5/, but I could not reproduce it in React-Native.
Can anyone help me to create individual tooltips for my chart line and loading information from other arrays?
Here's the sample code
I tried with update and other functions, none of them worked
launch: function() {
var categories = ['EMEA','APAC','AMERICAS'],
name = 'Browser brands',
data = [{
y: 55.11,
drilldown: {
name: 'EMEA versions',
categories: ['Cost', 'TechMe', 'disc', 'Matt'],
data: [
{
y: 40.11,
drilldown: {
name: 'Cost Drill',
categories: ['Page 1', 'Page 2', 'Page 3.0', 'Page 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43]
}
},
{
y: 40.11,
drilldown: {
name: 'Techme Drill',
categories: ['Page 1', 'Page 2', 'Page 3.0', 'Page 4.0'],
data: [1.58, 13.12, 5.43,0.20, 0.83]
}
},
{
y: 40.11,
drilldown: {
name: 'dISC Drill',
categories: ['Page 1', 'Page 2', 'Page 3.0', 'Page 4.0'],
data: [0.83, 1.58, 13.12,0.20, 5.43]
}
}
]
}
}, {
y: 21.63,
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43]
}
}, {
y: 11.94,
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22]
}
}, {
y: 7.15,
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
}
}, {
y: 2.14,
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65]
}
}];
Here's the setChart function which is called on click event of the chart
function setChart(chart,name, categories, data, color) {
var newchart=mychart;
var chartConfig={
chart: {
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(this,drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(this,name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
}
}
console.log("Before ",newchart.chartConfig);
newchart.setChartConfig(chartConfig);
console.log("After ",newchart.chartConfig);
var chartSeries={
name: name,
data: data,
color: 'white'
}
newchart.setChartData(chartSeries);
chart.remove('#myChart');
//chart.update(newchart);
//redrawChart(this,mychart);
//console.log(mychart);
// console.log(chart.setChartConfig());
//chart.x.setCategories(categories, false);
//chart.chartData.series[0].remove(false);
/*chart.chartData.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);*/
//chart.redraw();
// mychart.update();
//mychart.updateLayout();
// mychart.show();
console.log("After " , mychart);
}
Main chart is here ...
var mychart=Ext.create('Rally.ui.chart.Chart', {
autoRender:true,
autoShow:true,
id:'myChart',
storeType : 'Rally.data.WsapiDataStore',
storeConfig : {
model: 'Defect'
//fetch : ["_ValidFrom", "_ValidTo", "10778908645", "ScheduleState", "Name"]
//filters : this.getColumnFilters()
},
calculatorType: 'My.Calculator',
calculatorConfig: {},
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(this,drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(this,name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
}
},
chartData:{ // this works
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
}
});
// add your code here
this.add(mychart); // add the component to rally interface
}
I want data to get changed on clicking
I have an example of chart update triggered by a button click in a github repo here.
Unlike a AppSDK2 grids that have a reconfigure method, AppSDK charts do not. In this example I delete a chart this.down("#myChart").removeAll() , modify metric definition of the calculator and then re-add the chart to the app.
You may also want to see this post.
I have an app that worked great for 2.0p5. I was able to set the various columns in the chart specific colors. In the chart config, I added
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
When I upgraded to 2.0rc1, the colors no longer seem to get set. My chart config is:
Ext.create('Rally.ui.chart.Chart', {
animate: true,
chartData: {
series: [{
type: 'column',
name: 'Data1',
data: data1
},
{
type: 'column',
name: 'Data2',
data: data2
},
{
type: 'column',
name: 'Data3',
data: data3
}],
categories: xAxisData
},
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Show Data'
},
yAxis: {
min: 0,
title: {
text: 'yAxis Info'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white'
}
}
}
}
});
Any ideas why I lost my color setting capabilities in 2.0rc1?
An example from one of my apps:
var series = [{
name : 'Col 1',
data : [],
showInLegend : false
},{
name : 'Col 2',
data : [],
showInLegend : false
},{
name : 'Col 3',
data : [],
showInLegend : false
}];
Ext.Array.each(records, function(record) {
//HighCharts Data
record.set('name', ...);
record.set('y', ...);
record.set('color', ...);
//Add record to series
series[index].data.push(record.data);
// Add to chartData
});
Hope this helps/works for you!
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!
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'
}
}
}
});