I want to update state on button click
this.state = {
legend: {
enabled: true,
textSize: 14,
form: 'CIRCLE',
horizontalAlignment: "RIGHT",
verticalAlignment: "CENTER",
orientation: "VERTICAL",
wordWrapEnabled: true
},
data: {
dataSets: [{
values: [{value: 45, label: 'Sandwiches'},
{value: 21, label: 'Salads'},
{value: 15, label: 'Soup'},
{value: 9, label: 'Beverages'},
{value: 15, label: 'Desserts'}],
label: 'Pie dataset',
}],
},
highlights: [{x:2}],
description: {
text: 'This is Pie chart description',
textSize: 14,
textColor: processColor('darkgray'),
}
};
I want to update values array of state by using following code but
it didn't work
const myvalues=this.state.data.dataSets[0].values.map(l => Object.assign({}, l));
myvalues[1].label = 'NEw sandwich';
this.setState({values: myvalues}, () => {
console.log(this.state.data.dataSets[0].values[1].label + " it worksss");
});
I am stuck in this
Check this
const myvalues = [] /*your new array*/
this.setState((state) =>
{
data: {
...state.data,
values: myvalues
}
});
Related
How can I make the label display the value of not only one series, but the entire stack in Echarts.js? How can I make the border line go between each column, not just between columns of different x-axis values? I read the documentation, but did not find a solution to these issues there.
Chart
I wrote such settings in the configuration, but this, of course, is not what you need.
series: [
{
name: 'Matcha',
type: 'bar',
stack: 'drinks',
data: data.filter(item => item.name === 'Matcha').map(item => item.value),
},
{
name: 'Green tea',
type: 'bar',
stack: 'drinks',
data: data.filter(item => item.name === 'Green tea').map(item => item.value),
label: {
show: true,
position: 'top',
fontSize: 14,
fontWeight: 700,
},
},
{
name: 'Apple',
type: 'bar',
stack: 'fruits',
data: data.filter(item => item.name === 'Apple').map(item => item.value),
},
{
name: 'Orange',
type: 'bar',
stack: 'fruits',
data: data.filter(item => item.name === 'Orange').map(item => item.value),
label: {
show: true,
position: 'top',
fontSize: 14,
fontWeight: 700,
},
}
],
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?
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!
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.
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!