Login/Register
Zingchart: Target multiple series in a rule using tokens
Asked Answered
Solved javascriptzingchart
E

1

6

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.

Escarpment answered 15/10, 2015 at 1:46 Comment(0)
T
5

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>
Twomey answered 15/10, 2015 at 18:21 Comment(2)
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 – Escarpment
Never mind - you can indeed define rules directly on plot. Problem solved. – Escarpment

© 2022 - 2024 — McMap. All rights reserved.