Scénario :
Je dois tracer des données dans Zingchart à partir d'un CSV qui aura un nombre fixe de colonnes (37). Ce CSV a un en-tête qui définira la légende du graphique.
Problème :
Si le nombre d'éléments que je définis dans l'en-tête est inférieur à 10 (y compris le nom de l'axe X), tout va bien. Les neuf premières colonnes reçoivent une légende appropriée, et les autres sont nommées à l'aide du nom par défaut Series XX . Lien vers le résumé
Dans les données, j'ai essayé de jouer avec les guillemets. " y ' mais ça n'a pas changé le comportement.
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|||||||||||Toutefois, dès que je continue à inclure des éléments dans l'en-tête en utilisant le CSV | séparateur, les choses commencent à mal tourner. Idéalement, le fichier devrait être comme celui-ci :
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|||||||||||Mais alors la sortie est complètement désordonnée. Lien vers le résumé
Le code HTML pour le graphique que j'exécute en local avec les mêmes résultats :
<!DOCTYPE html>
<html>
<head>
<script src="zingchart_2.3.2/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "zingchart_2.3.2/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": "zingchart_2.3.2/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>Question :
Qu'est-ce que je fais de mal ?
