This is something about the ExtJs5 charts.I have trouble changing the bar chart's labels.
Codes is as below:
Ext.create('Ext.chart.CartesianChart', {
store: {
fields: ['pet', 'households', 'total'],
data: [{
pet: {name:'Cats'},
households: 38,
total: 93
}]
},
axes: [{
type: 'numeric',
position: 'left'
}, {
type: 'category',
position: 'bottom'
}],
series: [{
type: 'bar',
xField: 'pet',
yField: 'households',
label:{
field:'pet',
renderer:function(pet){
return 'Dear '+pet.name;
}
}
}]
});
You must have noticed that the field 'pet' is an object instead of a string.
The renderer in the series label returns the value I want it to be,but the label is still [object Object]!
Labels under the category(x axis in your code) are rendered by 'category' not the series.Try code below:
{
type: 'category',
position: 'bottom',
renderer:function(label){
return label.name;//the var 'label' represents the pet object.
}
}
By the way,I found another problem. No matter how many models are there in the chart store,only the first bar is displayed!
Related
Here is an Echarts column chart:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: [120],
type: 'bar'
},
{
data: [100],
type: 'bar'
}
]
};
It will display a column chart with two bars, one for each series. ECharts will render it as such:
What I really want is for Mon to be a label for the red bar in the first data series, and Tue to be a label for the blue bar in the second data series. In other words, I want the x label for each item in each series to display, as it would if it were a single series:
This second chart is the way I want it to display except I want the Tue bar to display in blue as it would if it were in another series.
In my real-life scenario, I expect there would be only one item per series, so if the solution has something to do with the name of the series as opposed to names/label of the individual items, that would work for me.
Any guidance would be appreciated.
There are at least two ways you can accomplish this.
Use two bar series and barGap:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: ['-', 120],
type: 'bar',
barGap: '-100%'
},
{
data: [100, '-'],
type: 'bar'
}
]
};
ref: https://echarts.apache.org/en/option.html#series-bar.barGap
Use a single bar series with a customized data item:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: [
120,
{
value: 100,
itemStyle: {
color: '#324b5b'
}
}
],
type: 'bar'
}
]
};
ref: https://echarts.apache.org/en/option.html#series-bar.data
Either of the above approaches should yield a chart that looks like this:
two vertical bars with different colours
I want to create a line chart with 3 different series using ExtJS 4.2.1, but only one of them is displayed, I don't know what I'm doing wrong. I take data from XML file and add it to the store:
Ext.each(arrayOfHeaps, function(item) {
var storeObject;
if (item.description === 'HeapTotal') {
storeObject = {'heapTotalValue': item.value, 'heapTotalDate': new Date(item.date)};
}
else if (item.description === 'HeapUsed') {
storeObject = {'heapUsedValue': item.value, 'heapUsedDate': new Date(item.date)};
}
else {
storeObject = {'heapFreeValue': item.value, 'heapFreeDate': new Date(item.date)};
}
store.add(storeObject);
});
It seems to work fine. One element from store printed in console:
heapFreeDate:""
heapFreeValue:""
heapTotalDate:Thu May 11 2017 04:10:00 GMT+0200 (Środkowoeuropejski czas letni)
heapTotalValue:1607680
heapUsedDate:""
heapUsedValue:""
Code to create chart:
title: 'Wartość',
type: 'Numeric',
position: 'left',
fields: ['heapTotalValue', 'heapFreeValue', 'heapUsedValue'],
grid: true
},{
title: 'Czas',
type: 'Time',
position: 'bottom',
fields: ['heapTotalDate', 'heapFreeDate', 'heapUsedDate'],
dateFormat: 'H:i:s.u',
fromDate: new Date('2017-05-11T04:10:00.055+02:00'),
toDate: new Date('2017-05-11T12:30:00.005+02:00'),
grid: true
}],
series: [{
type: 'line',
id: 'tilingChart',
fields:['heapTotalValue', 'heapTotalDate'],
yField: 'heapTotalValue',
xField: 'heapTotalDate'
},{
type: 'line',
id: 'memoryChart',
fields:['heapFreeValue', 'heapFreeDate'],
xField: 'heapFreeValue',
yField: 'heapFreeDate'
},{
type: 'line',
id: 'defaultChart',
fields:['heapUsedValue', 'heapUsedDate'],
xField: 'heapUsedValue',
yField: 'heapUsedDate'
}]
The chart is created, but second and third series are ignored
I'm new using Highcharts and I have a chart with 7 series. Those series shows prices and now I need to show in the main chart tooltip the percentage difference between the prices of the main chart and just another one.
I was watching how to format the tooltip but I can't find how to solve this, maybe is easy or maybe not, so your help will be so appreciated.
Here you can see an example of my code:
series: [{
name: "User Price",
type:'line',
data: JSON.parse(data)
},
{
type: 'line',
name: 'Average Price',
color: "#E82315",
dataLabels: false,
visible: true,
data: JSON.parse(precio_medio)
},
{
type: 'line',
name: 'Other Price',
color: "#CC8604",
visible: false,
dataLabels: false,
data: [0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,
0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884]
},
{
type: 'line',
name: 'Other Price 2',
color: "#F29D00",
visible: false,
dataLabels: false,
data: [0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368
,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368]
}]
And I want to show in the tooltip the percentage difference between the User Price and the Average price.
Thanks you all in advance.
Try This
formatter:function() {
var pointPct='';
var baseValue= this.points[0].point.y;
var tooTipTxt='';
console.log(baseValue);
$.each(this.points, function(i, point) {
pointPct = (point.y)*100/baseValue;
tooTipTxt += "<span>"+pointPct+"</span> "
});
return tooTipTxt;
}
I'm using Highcharts, and I used to be able to get labels on the side. But it's not working now, am I missing something? The red arrow is where I would want the labels like in the following example.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/
This is the code I'm using, I add the series in a dynamic way.
credits: {
enabled: false
},
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb'],
labels: {
enabled: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Score',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
}
});
// Add Series
var detailchart = $('#chart-detail').highcharts();
var categories = new Array;
// Set Chart Title
detailchart.setTitle({text: results[0].category});
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score]
});
});
detailchart.xAxis[0].setCategories(["1", "2"]);
$('#chart-detail').highcharts().reflow();
Results is an array that looks like this (I get it through ajax):
As I understand from your code here, you wish to specify two categories with names 1 and 2 but you are not specifying any data for second category, So the only category that is showing on your chart is 1. Your data array for each series must have elements per each category. For example if you have two category you should consider having two data elements in each series. In this line data: [data.score] you are just specifying one element in data array. Your code should be something like this: (make it dynamic per your need)
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score, 40], //40 is some data for your second category.
});
});
Demo: http://jsfiddle.net/u6crkatv/
Only what you need is use 4 series, each of them with single data point.
series: [{
name: 'Year 1800',
data: [107]
}, {
name: 'Year 1900',
data: [138]
}, {
name: 'Year 2008',
data: [973]
},{
name: 'Year 20098',
data: [973]
}]
Example: http://jsfiddle.net/y9wzggc4/
I've been researching without any luck about how to change the x legend color in a Line chart. Do you know how can I do it ?
Attached image of the chart.
You can do this by setting the label property on the axis config, like so:
axes: [{
type: 'numeric',
position: 'left',
fields: ['data1'],
title: {
text: 'Sample Values',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['name'],
title: {
text: 'Sample Values',
fontSize: 15
},
label: {
fill: '#FF0000'
}
}],
I have created a fiddle so that you can see this working. Note that the config item with ExtJs 4 is fill, NOT color as you would expect.