Menu
I am trying Zing Chart and have JS array in this way:
"values": [
[1458846060000, 167.272, "Parameter1", "Parameter2", "Parameter3"],
[1458847060000, 150.272, "Parameter1", "Parameter2", "Parameter3"]
]
When hover-over specific point - I can show Time, Value and Series in a tooltip but how to show Parameter1,2,3, from the same Array when user hover over specific point in a scatter plot?
thanks.
398
In the Visualization Properties dialog, go to the Tooltip page. Click on the Add... button to add a tooltip value. To edit a tooltip value, select the value of interest from the list, then click on Edit.... Only the tooltip values that you have added to the list yourself can be edited or deleted.
To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), and the second one contains the bars. In this second column, we then add HTML <div> tags and define the width of these boxes with our numerical columns.
Specifying the tooltip typeisHtml: true in the chart options passed to the draw() call, which will also allow you to create Tooltip Actions.
You can use custom tokens, which are defined in the "plot" or "series" object as an attribute or array using the "data" prefix. E.g., "data-fullname" or "data-extracredit".
Here's an example where three custom tokens were created for parameters 1, 2, and 3. To recall them in the tooltips, you would use the tokens %data-parameter1, %data-parameter2, and %data-parameter3. See the 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 for each individual node. See the 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 that helps! I'm on the ZingChart team and happy to answer further questions. Thanks!
126
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
