Line Chart with multi colored segments - javascript

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'
}]
});
});


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'
}]
});

Related

Different color bar chart from eCharts

I was trying to create a different color bar. For Mon blue, Tue red, Wed green. Please help me how to write it. Line itemStyle: {normal: {color: 'blue','red', 'green'}}, did not work. The code comes from the echarts site.
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
itemStyle: {normal: {color: 'blue'}},
data: [120, 200, 150],
type: 'bar'
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>

This is my solution:
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [
{
value: 120,
itemStyle: {color: 'blue'},
},
{
value: 200,
itemStyle: {color: 'red'},
},
{
value: 150,
itemStyle: {color: 'green'},
}
],
type: 'bar'
}],
graph: {
color: colorPalette
}
};
https://plnkr.co/edit/vFK1qeMfMCXGx8Gdn1d8?p=preview

The top solution was not working for me. From their documentation is seems lineStyle now has two children elements you can leverage 'normal' and 'emphasis'.
I had to modify it like so to override the default colors:
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [
{
value: 120,
itemStyle: { normal: { color: 'blue' } },
},
{
value: 200,
itemStyle: { normal: { color: 'red' } },
},
{
value: 150,
itemStyle: { normal: { color: 'green' } },
}
],
type: 'bar'
}],
graph: {
color: colorPalette
}
};

My solution in June 2019 for needing different colors based on values: Create separate series for the different colors, and use a stacked chart. For example, I needed to create a graph with green bars for passing values and yellow bars for failing values. This was my implementation:
var data = {};
data.legendData = ['Sales','HR','Engineering'];
data.greenSeriesData = ['-',96.38,98.43];
data.yellowSeriesData = [44.23,'-','-'];
var option = {
title: {
text: '2019 Progress',
left: 'center'
},
xAxis: {
type: 'category',
data: data.legendData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: function (val) {
return (val) + '%';
}
}
},
series: [{
data: data.greenSeriesData,
type: 'bar',
stack: 'colorbyvalue',
label: {
show: true,
position: 'insideTop',
formatter: "{c}%",
color: '#000000'
},
barWidth: 50,
itemStyle: {
color: 'green'
}
},
{
data: data.yellowSeriesData,
type: 'bar',
stack: 'colorbyvalue',
label: {
show: true,
position: 'insideTop',
formatter: "{c}%",
color: '#000000'
},
barWidth: 50,
itemStyle: {
color: 'yellow'
}
}],
animation: false
};

you may have an array corresponding to the colors that you need for each day.
initially that could be empty and then you push the relevant color to it, depending on that day!
var cars1 = data.data_1;
var color_bar = [];
var text = "";
var i;
for (i = 0; i < cars1.length; i++)
{
if (cars1[i] < 20.35) {
color_bar.push("red");
}
else {
color_bar.push("yellow");
}
}
and the you call the relevant color for each data series...
yAxis: {
type: 'value'
},
series: [{
data:
[
{
value: data.data_1[0],
itemStyle: {color: color_bar[0]},
},{
value: data.data_1[1],
itemStyle: {color: color_bar[1]},
},{
value: data.data_1[2],
itemStyle: {color: color_bar[2]},
}],
Here I worked out an example based on value, but conditioning "day" should be ok.
I hope this helps mate.

After a day of research got this answer => add itemStyle with seriesIndex as params
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [ 120,200,150],
type: 'bar',
itemStyle: {
// HERE IS THE IMPORTANT PART
color: (seriesIndex) => yourCustomFunctionName(seriesIndex) // you will get access to array data passed and its index values
},
}],
graph: {
color: colorPalette
}
};

How can I add custom text to the bars in echarts and modify the color of the hovering ?

I am new using this library, and basically I would like to change the texts that are shown in the tooltip and in the label of the bars. I would also like to know how to modify the color of the bars to my liking.
To try to change the text, I am putting an array of test texts so that when I do a hovering on the bar, the text corresponds to the position of the data.
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
this is my code:
var chart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var text_toltip=[];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
chart.setOption({
backgroundColor: '#fff',
tooltip: {},
visualMap: {
max: 20,
color: ['#d94e5d','#eac736','#50a3ba']
},
xAxis3D: {
type: 'category',
data: hours
},
yAxis3D: {
type: 'category',
data: days
},
zAxis3D: {
type: 'value',
min: 1
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
environment: 'none',
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
texture: 'asset/pisa.hdr',
diffuseIntensity: 1
}
}
},
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
label: {
show: item[2] != 0
}
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
});
how can I do it?
https://plnkr.co/edit/LZnJdUDRQHdCRKnldWCL?p=preview

So if I understand your questions correctly:
to change visualMap.color property which specifies colors used for gradient
e.g.
visualMap: {
max: 20,
color: ['#00ff00','#0000ff'] // start and end colors for gradient
},
You can add name property to each of your axises
e.g.
yAxis3D: {
type: 'category',
data: days,
name: 'days'
},
to change text of your tooltips you add tooltip with formatter
e.g.
tooltip: {
formatter: 'my custom text and {a}, {b}, {c}, {d} and {e}'
},
alternatively formatter can be provided as a callback:
tooltip: {
formatter: function(params, ticket, callback) {
return "my text, value: " + params.value;
}
}
Using callback you can get detailed text from the server.
I also forked your plnkr: https://plnkr.co/edit/fpyhLHUZ2VAPdeQWnw4E?p=preview
UPDATE: https://plnkr.co/edit/JJMoWpZVhfyQOjdTYDvB?p=preview - this version uses your array of tooltips
Basically what you need in your case is params.dataIndex property:
tooltip: {
formatter: function(params) {
return " " + params.value + ", " + text_toltip[params.dataIndex];
}
},

how to increase name in pie chart in extjs

when I use more then five letters in my name it comes out of the chart see the image i uploaded i am using extjs 6 I just want to have a large name on my chart
{
xtype: 'polar',
split: true,
flex: 0.3,
colors: [
'#347327',
'#2897d2',
'#de6110',
],
bind: {
store: '{pie}'
},
series: [{
type: 'pie',
showInLegend: true,
donut: false,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data'));
}
},
highlight: {
segment: {
margin: 15
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
xField: 'data'
}],
interactions: [{
type: 'rotate'
}]
}
here is My dynamically given names i want that names in side of my pie chart i mean above on the chart But when i use name that contain more then 5 letters it goes out side of the chart i will upload a image.
var pieStore = this.getViewModel().getStore('pie');
var rec = selected[0];
if (rec.get('new')) {
pieStore.add({
'name': 'NEW',
data: rec.get('new'),
total: rec.get('total')
});
}
if (rec.get('openToQc')) {
pieStore.add({
'name': 'QC',
data: rec.get('openToQc'),
total: rec.get('total')
});
}
if (rec.get('open')) {
pieStore.add({
'name': 'Open',
data: rec.get('open'),
total: rec.get('total')
});
}
if (rec.get('rejected')) {
pieStore.add({
'name': 'Rejected',
data: rec.get('rejected'),
total: rec.get('total')
});
}

The problem is on your series label:
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '12px Arial'
},
display: 'rotate', displays the label inside the chart in some cases and outside in others, you should use instead display: 'inside',
You can see a working example here

ExtJS 4.2.1.883: Bar Graph not plotted

I am trying to draw a bar graph with tge same code from http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Bar
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
Even though the values get plotted, the actual graph is not visible. I tried various examples with the same result. In Fiddle it works fine but in my code, the graph doesn't get plotted at all. Can someone help?
http://jsfiddle.net/kavitaC/8ecc1kme/2/

How to make a multi pane on highstock (highcharts) which contain a stacked area graph?

I want to know if it will be possible to use the two pane view (as this example) with a stacked area graph ?
I tryed to make it works in a fiddle http://jsfiddle.net/g2xDj/2/, but, the stacked area graph is not displayed.
var stacked_data = [{
name: 'Asia',
data: [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]]
}, {
name: 'Africa',
data: [[1364292000,106], [1364294000,107], [1364296000,111], [1364298000,133], [1364300000,221], [1364302000,767], [1364304000,1766]]
}, {
name: 'Europe',
data: [[1364292000,163], [1364294000,203], [1364296000,276], [1364298000,408], [1364300000,547], [1364302000,729], [1364304000,628]]
}];
var line_data = [[1364292000,502], [1364294000,635], [1364296000,809], [1364298000,947], [1364300000,1402], [1364302000,3634], [1364304000,5268]];
// create the chart
$('#container').highcharts('StockChart',
{
chart : {
//type: 'area',
renderTo : 'container',
zoomType: 'x'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'Load'
},
height: 200,
lineWidth: 2
},
{
title: {
text: 'Load 2'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}
],
series: [
{
name: "area",
data: stacked_data,
yAxis: 0
},{
name: "line",
data: line_data,
yAxis: 1
}]
});
});
Anybody have an idea to help me ?

In your example you have incorrect structure of series, because in stackedArea you try to push "series" structure for data.
Additionaly you should multiply all timestamp by 1000 to achieve JS timestamp format.
Updated example: http://jsfiddle.net/g2xDj/4/
var series = [{
name: 'Asia',
data: [
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]
}, {
name: 'Africa',
data: [
[1364292000000, 106],
[1364294000000, 107],
[1364296000000, 111],
[1364298000000, 133],
[1364300000000, 221],
[1364302000000, 767],
[1364304000000, 1766]
]
}, {
name: 'Europe',
data: [
[1364292000000, 163],
[1364294000000, 203],
[1364296000000, 276],
[1364298000000, 408],
[1364300000000, 547],
[1364302000000, 729],
[1364304000000, 628]
]
}];
var line_data = {
type:'line',
yAxis:1,
data:[
[1364292000000, 502],
[1364294000000, 635],
[1364296000000, 809],
[1364298000000, 947],
[1364300000000, 1402],
[1364302000000, 3634],
[1364304000000, 5268]
]};
series.push(line_data);

Categories