Multiplot And Change Line Color Depending On Column Value In Zingchart
Solution 1:
Full Disclosure, I'm a member of the ZingChart team. It sounds like what you need to do with ZingChart is leverage our rules. Adding the rules attribute to our plot object will check every node against these defined set of rules. Here's a small snippet of code that will change the backgroundColor of your bars based on the value of that node.
plot:{
rules:[
{
//if value is between 5 and 7 change backgroundcolor
rule:'%v > 5 && %v < 7',
backgroundColor:'#69F0AE' // bright green
}
]
}...
Based on your question we want to check each bar against a certain value, not necessarily the value of that bar. You can do this by creating custom tokens which are created in the series object with a starting prefix 'data-' to define the token. You can name the token anything you want. You can pass the custom token an array that is the same length as the values you passed in, which in your case will be column two of your csv file. Check it out.
series : [
{
values : [
[1451692800000,5],
[1451779200000,10],
[1451865600000,3],
[1451952000000,1]
],
},
{
values : [
[1451692800000,2],
[1451779200000,5],
[1451865600000,4],
[1451952000000,9]
],
},
{
values : [
[1451692800000,3],
[1451779200000,6],
[1451865600000,9],
[1451952000000,1]
],
'data-customValue':[1,6,3,4,6] //custom made tokens can be accessed in the rules above. This token only applies to this series, you would have to add it to the others for it to be defined
}]
Once you have defined your token you can access that token in your rules and adjust the bar color based on that custom token value. I have made a full demo which incorporates a stacked bar chart, plotted with timestamp values and adjust some of the bar colors based on value and custom token values. If I didn't answer your question in the correct way please email us directly for support help: support@zingchart.com. You can check out our help center or come to our site and try and reach us through the chat. Thanks for your time!
var myConfig = {
type: "bar",
utc:true,
title: {
text: 'Stacked Timestamp With Custom Values And Rules'
},
scaleX:{
transform:{
type:'date',
all:'%D, %d %M %Y'
},
minValue:1451606400000, // Jan 1step:'day'
},
plot:{
stacked:true,
barWidth:40,
rules:[
{
//if value is between 5 and 7 change background colorrule:'%v > 5 && %v < 7',
backgroundColor:'#69F0AE'// bright green
},
{
//if custom token value is less than 5 change background colorrule:'%data-customValue <= 5',
backgroundColor:'#E040FB'// bright purple
}
]
},
series : [
{
values : [
[1451692800000,5], //Jan 2
[1451779200000,10], //Jan 3
[1451865600000,3], //Jan 4
[1451952000000,1] //Jan 5
],
},
{
values : [
[1451692800000,2],
[1451779200000,5],
[1451865600000,4],
[1451952000000,9]
],
},
{
values : [
[1451692800000,3],
[1451779200000,6],
[1451865600000,9],
[1451952000000,1]
],
'data-customValue':[1,6,3,4,6] //custom made tokens can be accessed in the rules above. This token only applies to this series, you would have to add it to the others for it to be defined
},
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: '100%'
});<!DOCTYPE html><html><head><!--Assets will be injected here on compile. Use the assets button above--><scriptsrc= "https://cdn.zingchart.com/zingchart.min.js"></script><!--Inject End--></head><body><divid='myChart'></div></body></html>
Post a Comment for "Multiplot And Change Line Color Depending On Column Value In Zingchart"