Menu
I'm wondering whether it's possible to target multiple series in the same rule using tokens. In essence, what I am aiming for is "if the value from series 1 is greater than the value in the same position in series 2, change some styles".
Zingchart config:
var config = {
// ...
'type': 'area',
'plot': {
'rules': [
{
'rule': '', // %v from series 1 > %v from series 2
'background-color': '#ccc'
}
]
},
'series': [
{
'text': 'Series 1',
'values': [36, 40, 38, 47, 49, 45, 48, 54, 58, 65, 74, 79, 85, 83, 79, 71, 61, 55]
},
{
'text': 'Series 2',
'values': [40, 40, 40, 50, 50, 50, 50, 60, 60, 80, 80, 80, 80, 80, 80, 80, 60, 60]
}
]
}
If that's not possible, is there another way to achieve the same outcome? I'm aiming to change the style of an individual point when the series 1 value is greater than the series 2 value.
897
At this time of writing (v2.1.4 and below), there is no way to apply rule logic across different series values. The best way to approach this would be to reference each series value array within each series object with a "data-" as the key value. (See below for a working example).
With that being said, I have submitted a ticket to look into implementing cross series logic into the rules syntax!-- I'm on the developer team on ZingChart, feel free to reach out with any further questions.
var ruleSet =
[
//Controls the series 0 coloring
{
rule : "%data-series-1 > %v",
backgroundColor : "#007c9b",
borderColor : "#006a84",
size : "8px"
},
//Controls the series 1 coloring
{
rule : "%data-series-0 > %v",
backgroundColor : "#188f00",
borderColor : "#188f00",
size : "8px"
}
];
var series0Values = [10,10,20,10,10,10,10,10];
var series1Values = [20,20,10,20,20,20,20,20];
var myConfig = {
type: "scatter",
plot :{
marker : {
rules : ruleSet
}
},
series : [
{
values : series0Values,
"data-series-1" : series1Values,
marker : {
backgroundColor : "#00c0ef",
borderColor : "#00c0ef"
}
},
{
values : series1Values,
"data-series-0" : series0Values,
marker : {
backgroundColor : "#26de00",
borderColor : "#26de00"
}
},
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 400
});<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</head>
<body>
<div id='myChart'></div>
</body>
</html>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
