Last active
May 19, 2016 16:01
-
-
Save eballes/d8d2064a4e5456e776904f017d05cc19 to your computer and use it in GitHub Desktop.
Zingchart example - ok, legend up to 10 elements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdn.zingchart.com/zingchart.min.js"></script> | |
<script> | |
zingchart.MODULESDIR = "zingchart/modules/"; | |
</script> | |
<style></style> | |
</head> | |
<body> | |
<div id='myChart'></div> | |
<script> | |
var myConfig = { | |
"globals":{ | |
"font-family":"Arial" | |
}, | |
"legend":{ | |
"layout":"4x", | |
"adjust-layout":true, | |
"align":"center", | |
"background-color":"none", | |
"shadow":0, | |
"border-width":0, | |
"vertical-align":"bottom" | |
}, | |
"type": "line", | |
"utc":true, | |
"csv": { | |
"url": "sample_5lines.dat", | |
"separator": "|", | |
"vertical-labels": true, | |
}, | |
"plot":{ | |
"line-width":2, | |
"active-area":true, | |
"shadow":0, | |
"exact":true, | |
"marker":{ | |
"size":4 | |
}, | |
"hover-marker":{ | |
"size":3 | |
}, | |
"preview":true, | |
"spline":false, | |
"text":"%v", | |
}, | |
"plotarea":{ | |
"adjust-layout":1, | |
"width":"100%", | |
"height":200, | |
"position":"0% 0%", | |
"margin-top":60, | |
"margin-right":60, | |
"margin-left":70, | |
"margin-bottom":105 | |
}, | |
"preview":{ | |
"visible":true, | |
"height":40, | |
"position":"0 370", | |
"margin-top":10, | |
"margin-bottom":15 | |
}, | |
"scale-x":{ | |
"format":"%v", | |
"zooming":true, | |
"label":{ | |
"margin-top":100 | |
}, | |
"tick":{ | |
"line-color":"black", | |
"line-width":"2px", | |
"size":8, | |
}, | |
"transform":{ | |
"type":"date", | |
"all":"%d/%M/%Y\n%H:%i:%s", | |
} | |
}, | |
"scale-y":{ | |
"zooming":true, | |
"decimals":0, | |
}, | |
"tooltip":{ | |
<!--"js-rule":"myfunc()",--> | |
"shadow":0, | |
"font-color":"#000", | |
"text":"%t - %k<br><br>%v<br>Hz", | |
"border-radius":"5px", | |
"sticky":true, | |
"timeout":500, | |
"decimals":6 | |
} | |
}; | |
zingchart.render({ | |
id: 'myChart', | |
data: myConfig, | |
height: 500, | |
width: "100%" | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sample graph | |
Times|Line_1|Line_2|Line_3|Line_4|Line_5|Line_6|Line_7|Line_8|Line_9|"Line_10" "Line_11" Line_12 Line_13 Line_14 Line_15 Line_16 Line_17 Line_18 Line_19 Line_20 Line_21 Line_22 Line_23 Line_24 Line_25 Line_26 Line_27 Line_28 Line_29 Line_30 Line_31 Line_32 Line_33 Line_34 Line_35 Line_36 | |
1218604835|0.0756521739130562|-0.151304347825771|||||||0.122608695652389|||||||-0.130434782608745|0.0443478260868915|0.232173913043425|||||||-0.172173913043707||||||||||| | |
1218604836|-0.427826086956543|-0.253043478260679|||||||-0.279130434782701|||||||-0.130434782608745|-0.0573913043477887|0.232173913043425|||||||-0.27391304347816||||||||||| | |
1218604837|-0.229565217391325|0.0469565217390482|||||||-0.0808695652174265|||||||0.0678260869565293|0.242608695652279|-0.169565217391664|||||||0.0260869565217945||||||||||| | |
1218604838|0.370434782608697|0.34695652173923|||||||-0.482608695652061|||||||0.0678260869565293|-0.159130434782583|-0.169565217391664|||||||0.224347826086841||||||||||| | |
1218604839|-0.133043478260902|-0.156521739130767|||||||0.117391304347848|||||||0.266086956522031|0.039130434782578|0.4304347826087|||||||-0.279130434782701||||||||||| |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment