Menu
I am using Ext 5 and would like to color segments in a line chart based on the values. Show line in green color if value greater than the target otherwise red.
Is there any way to change the color of a line segment in Ext line chart based on its value?
I could find that there is no built-in way of doing this in sencha from this link
I have also tried add a line sprite dynamically over the line to make an impact of varying colors. It worked. But I was unable to find the exact x, y coordinates to draw this custom line dynamically.
This is the code I have tried so far.
Ext.onReady(function () {
var data = [{
'date': '1',
'data2': 4
}, {
'date': '2',
'data2': 8
}, {
'date': '3',
'data2': 12
}, {
'date': '4',
'data2': 6
}, {
'date': '5',
'data2': 36
}];
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: {
fields: ['name', 'data2'],
data: data
},
listeners: {
redraw: function(){
var chart = this;
var series = chart.series[0];
var dataRange = series.dataRange;
var large = dataRange.find(function(v){ return v>14 });
if(large){
var line = series.getSurface().add({
type: 'line',
fromX: 354,
fromY: 75,
toX: 465,
toY: 257,
zIndex: 2000,
stroke: 'green',
'stroke-width': 2,
}).show(true);
}
}
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['data2'],
title: {
text: 'Stores Visited',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['date'],
title: {
text: 'Date',
fontSize: 15
}
}],
series: [{
type: 'line',
style: {
stroke: 'red',
lineWidth: 2
},
xField: 'date',
yField: 'data2'
}]
});
});
439
In a chart, click to select the data series for which you want to change the colors. On the Format tab, in the Current Selection group, click Format Selection. tab, expand Fill, and then do one of the following: To vary the colors of data markers in a single-series chart, select the Vary colors by point check box.
You can easily plot multiple lines on the same graph in Excel by simply highlighting several rows (or columns) and creating a line plot.
Excel multi-colored line charts are a little gimmicky, after all we don’t need color to tell if a line is going up or down. However, it can be useful for encoding data that is outside a threshold and can also speed up interpretation, especially if you use familiar traffic light color encoding.
What is a line chart? A line chart (aka line plot, line graph) uses points connected by line segments from left to right to demonstrate changes in value. The horizontal axis depicts a continuous progression, often that of time, while the vertical axis reports values for a metric of interest across that progression.
The main point of a sparkline is to show change over a period of time, and is often seen in financial contexts. One variant chart type for a line chart with multiple lines is the ridgeline plot. In a ridgeline plot, each line is plotted on a different axis, slightly offset from each other vertically.
Examples of line charts with multiple lines have thus far had each line be part of the same domain, and thus plottable on the same axis. There’s nothing that limits each line to depict values on the same units, however. When a line plot includes two series, each depicting a summary of a different variable, then we end up with a dual axis plot.
Actually, changing color of whole line, (which is between per metric) is not hard. The problem is how to change color of portion line. To fix this issue, I created data boundaries(pushed boundary items to store). I am not sure It will be useful for you. Unfortunately, I don't have any idea except this. Anyway, please check this fiddle: https://fiddle.sencha.com/#fiddle/v0d
var data = [{
'name': 'metric one',
'data2': 4
}, {
'name': 'metric two',
'data2': 8
}, {
'name': 'metric three',
'data2': 20
}, {
'name': 'metric four',
'data2': 12
}, {
'name': 'metric five',
'data2': 18
}, {
'name': 'metric six',
'data2': 24
}, {
'name': 'metric seven',
'data2': 36
}];
var newData = [];
Ext.each(data, function(dt, index) {
newData.push(dt);
if((index != data.length-1) && dt.data2 < 14 && 14 < data[index+1].data2) {
newData.push({'data2': 14, name: index});
}
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: {
fields: ['name', 'data2'],
data: newData
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['data2'],
title: {
text: 'Sample Values',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['name'],
title: {
text: 'Sample Values',
fontSize: 15
}
}],
series: [{
type: 'line',
style: {
lineWidth: 2,
maxBarWidth: 30,
stroke: 'red'
},
renderer: function(sprite, config, rendererData, index) {
var store = rendererData.store,
storeItems = store.getData().items,
record = storeItems[index],
prev = storeItems.length - 2,
last = storeItems.length - 1,
changes = {};
if (!record) {
return;
}
if (record.get('data2') > 14) {
changes.strokeStyle = 'green';
} else {
changes.strokeStyle = 'red';
}
return changes;
},
xField: 'name',
yField: 'data2'
}]
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
