Zingchart: Target multiple series in a rule using tokens

Question

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.

mike-schultz · Accepted Answer · 2015-10-16T15:29:56.820

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>

I ended up attempting something which involved doing the value comparison prior to rendering the chart, then using `selected-state` with a static `selection` array. This looks far more efficient. However, I'm wondering how I can use the above method to style the background-color of the plot area behind a single point on an area or line chart. It's not the marker itself I want to style, but according to the docs I can't define `rules` directly on `plot`. [Example](http://i.imgur.com/39LWOLN.png) — tomfairbs, Oct 15 '15 at 22:15
Never mind - you can indeed define `rules` directly on `plot`. Problem solved. — tomfairbs, Oct 15 '15 at 23:17

Zingchart: Target multiple series in a rule using tokens

1 Answers1