Geek Answers Handbook

Zingchart - passing a function to a tooltip

Can I pass a function to a tooltip in Zingchart Json?

I tried the following:

$scope.applyTooltip = function (timestamp) { console.log(timestamp); var tooltip = "<div>"; var data = { timestamp1: { param1: "bla", param2: "foo, }, ... } for(var param in data){ console.log(param); tooltip += param+": "+data[param]+"<br>"; } tooltop += "</div>; return tooltip; } $scope.graphoptions = { //... //just displaying the relevant options plot: { "html-mode": true, tooltip: $scope.applyTooltip("%kt"), } }

}

But the function gets the string "% kt" as is, and not the desired X-value of the hovering chart. So how can you pass the value of X to a function?

+5
source share
1 answer

ZingChart does not allow passing functions through a configuration object. Instead, there is a property called "jsRule" that allows you to pass the name of the function that will be evaluated during each prompt event.

 tooltip : { jsRule : "CustomFn.formatTooltip()" }

Inside this function, a parameter will be available that will contain information about the node that you used, for example value , scaletext , plotindex , nodeindex , graphid , etc. Just return the object for a tooltip (including rich text), and ZingChart takes care of the rest. An example is given below.

The jsRule is that the function name must be globally accessible since ZingChart does not accept inline functions. We know about this problem and plan that it will be an option in future versions.

 CustomFn = {}; var myConfig = { type: "line", tooltip : { jsRule : "CustomFn.formatTooltip()" }, series : [ { values : [1,3,2,3,4,5,4,3,2,1,2,3,4,5,4] }, { values : [6,7,8,7,6,7,8,9,8,7,8,7,8,9,8] } ] }; CustomFn.formatTooltip = function(p){ var dataset = zingchart.exec('myChart', 'getdata'); var series = dataset.graphset[p.graphindex].series; var tooltipText = ""; for (var i=0; i < series.length; i++) { tooltipText += "Series " + i + " : " + series[i].values[p.nodeindex] + ""; if (i !== series.length-1) { tooltipText += "\n"; } } return { text : tooltipText, backgroundColor : "#222" } } zingchart.render({ id : 'myChart', data : myConfig, height: 400, width: 600 }); 
 <!DOCTYPE html> <html> <head> <script src= 'https://cdn.zingchart.com/2.3.1/zingchart.min.js'></script> </head> <body> <div id='myChart'></div> </body> </html>
+6
source

More articles:


All Articles