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.
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!
© 2022 - 2024 — McMap. All rights reserved.