All geek questions in one place

Zing chart - how to add additional information to the tooltip?

I am trying to use a Zing Chart and have a JS array like this:

"values": [ [1458846060000, 167.272, "Parameter1", "Parameter2", "Parameter3"], [1458847060000, 150.272, "Parameter1", "Parameter2", "Parameter3"] ]

When hovering over a specific point - I can show Time, Value and Series in the tooltip, but how to show Parameter1,2,3 from the same array when the user is pointing at a specific point in the scatter chart?

thanks.

+5
source share
1 answer

You can use custom tokens that are defined in the plot or series object as an attribute or array using the data prefix. For example, "data-fullname" or "data-extracredit".

Here is an example in which three user tokens were created for parameters 1, 2, and 3. To call them in tooltips, you must use the% data-parameter1,% data-parameter2 and% data-parameter3 tokens. See Demo.

 var myConfig = { "type":"scatter", "title":{ "text":"Custom Token as Attribute" }, "plot":{ "tooltip":{ "text":"%kv, %v, %data-parameter1, %data-parameter2, %data-parameter3." } }, "scale-x":{ "transform":{ "type":"date", "all":"%g:%i %A" } }, "scale-y":{ }, "series":[ { "values": [ [1458846060000, 167.272], [1458847060000, 150.272], [1458848060000, 134.311] ], "data-parameter1":"Parameter1", "data-parameter2":"Paremeter2", "data-parameter3":"Parameter3" } ] }; zingchart.render({ id : 'myChart', data : myConfig, height: 400, width: 600 }); 
 <!DOCTYPE html> <html> <head> <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head> <body> <div id='myChart'></div> </body> </html>

http://demos.zingchart.com/view/78P4SI51

Alternatively, you can use an array to assign text to each individual node. See Demo.

 var myConfig = { "type":"scatter", "title":{ "text":"Custom Token as Array" }, "plot":{ "tooltip":{ "text":"%kv, %v, %data-parameter1, %data-parameter2, %data-parameter3." } }, "scale-x":{ "transform":{ "type":"date", "all":"%g:%i %A" } }, "scale-y":{ }, "series":[ { "values": [ [1458846060000, 167.272], [1458847060000, 150.272], [1458848060000, 134.311] ], "data-parameter1":["Parameter1a","Parameter1b","Parameter1c"], "data-parameter2":["Paremeter2a","Parameter2b","Parameter2c"], "data-parameter3":["Parameter3a","Parameter3b","Parameter3c"] } ] }; zingchart.render({ id : 'myChart', data : myConfig, height: 400, width: 600 }); 
 <!DOCTYPE html> <html> <head> <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head> <body> <div id='myChart'></div> </body> </html>

http://demos.zingchart.com/view/GSGWW4YO

Let me know if this helps! I am on the ZingChart team and I am happy to answer other questions. Thanks!

+5
source

Source: https://habr.com/ru/post/1247546/

More articles:


All Articles