par
josse34 » 20 oct. 2013, 11:03
Bonjour!
Je rencontre un petit souci avec HighCharts qui doit être tout bête :
http://www.highcharts.com/
J'ai un script PHP qui récupère des informations dans une base Mysql dont un un print-r de la variable donne ceci après conversion en date UNIX via mktime :
Array ( [0] => 1380664800000, 1603 [1] => 1380751200000, 313 [2] => 1380837600000, 132 [3] => 1380924000000, 1636 [4] => 1381010400000, 1173 [5] => 1381096800000, 1528 [6] => 1381183200000, 1493 [7] => 1381269600000, 1191 [8] => 1381356000000, 1167 [9] => 1381442400000, 1551 [10] => 1381528800000, 1448 [11] => 1381615200000, 1425 [12] => 1381701600000, 1400 [13] => 1381788000000, 364 [14] => 1381874400000, 1394 [15] => 1381960800000, 1446 [16] => 1382047200000, 583 [17] => 1382133600000, 515 )
Un json_encode donne cela :
["1380664800000, 1603","1380751200000, 313","1380837600000, 132","1380924000000, 1636","1381010400000, 1173","1381096800000, 1528","1381183200000, 1493","1381269600000, 1191","1381356000000, 1167","1381442400000, 1551","1381528800000, 1448","1381615200000, 1425","1381701600000, 1400","1381788000000, 364","1381874400000, 1394","1381960800000, 1446","1382047200000, 583","1382133600000, 515"]
Hors je ne parviens pas à afficher ces données avec ce code provenant de l'exemple :
http://www.highcharts.com/demo/arearange-line.
Je dois avoir un souci de format tout bête! (j'ai rien dans la série ranges pour le moment, c'est normal) car déjà les données exemple indique un format du genre :
var ranges = [
[1246406400000, 27.7],
[1246492800000, 27.8],
[1248998400000, 16.1]
],
alors que je suis plutôt (apparemment) en json dans ce genre la :
["1382133600000, 1603",
"1380664800000, 313",
"1380837600000, 132"]
[javascript]
<script src="CHARTS/js/jquery.min.js"></script>
<script src="CHARTS/js/highcharts.js"></script>
<script src="CHARTS/js/highcharts-more.js"></script>
<script src="CHARTS/js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var ranges = [
[<?php echo $json_meteo_final; ?>]
],
averages = [
];
Highcharts.setOptions({
chart: {
zoomType: 'x',
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(245, 245, 245)'],
[1, 'rgb(245, 245, 245)']
]
},
}
});
$('#container').highcharts({
title: {
text: 'July temperatures'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
credits: {
enabled: false
},
plotOptions: {
series: {
connectNulls: true
}
},
legend: {
},
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]
});
});
</script>
<div id="container" style="min-width: 100%; height: 400px; margin: 0 auto"></div>
[/javascript]
Grand merci pour votre aide et bonne journée!
Bye
Bonjour!
Je rencontre un petit souci avec HighCharts qui doit être tout bête : http://www.highcharts.com/
J'ai un script PHP qui récupère des informations dans une base Mysql dont un un print-r de la variable donne ceci après conversion en date UNIX via mktime :
[quote]
Array ( [0] => 1380664800000, 1603 [1] => 1380751200000, 313 [2] => 1380837600000, 132 [3] => 1380924000000, 1636 [4] => 1381010400000, 1173 [5] => 1381096800000, 1528 [6] => 1381183200000, 1493 [7] => 1381269600000, 1191 [8] => 1381356000000, 1167 [9] => 1381442400000, 1551 [10] => 1381528800000, 1448 [11] => 1381615200000, 1425 [12] => 1381701600000, 1400 [13] => 1381788000000, 364 [14] => 1381874400000, 1394 [15] => 1381960800000, 1446 [16] => 1382047200000, 583 [17] => 1382133600000, 515 )
[/quote]
Un json_encode donne cela :
[quote]
["1380664800000, 1603","1380751200000, 313","1380837600000, 132","1380924000000, 1636","1381010400000, 1173","1381096800000, 1528","1381183200000, 1493","1381269600000, 1191","1381356000000, 1167","1381442400000, 1551","1381528800000, 1448","1381615200000, 1425","1381701600000, 1400","1381788000000, 364","1381874400000, 1394","1381960800000, 1446","1382047200000, 583","1382133600000, 515"]
[/quote]
Hors je ne parviens pas à afficher ces données avec ce code provenant de l'exemple : [url]http://www.highcharts.com/demo/arearange-line[/url].
Je dois avoir un souci de format tout bête! (j'ai rien dans la série ranges pour le moment, c'est normal) car déjà les données exemple indique un format du genre :
[quote]
var ranges = [
[1246406400000, 27.7],
[1246492800000, 27.8],
[1248998400000, 16.1]
],
[/quote]
alors que je suis plutôt (apparemment) en json dans ce genre la :
[quote]
["1382133600000, 1603",
"1380664800000, 313",
"1380837600000, 132"]
[/quote]
[javascript]
<script src="CHARTS/js/jquery.min.js"></script>
<script src="CHARTS/js/highcharts.js"></script>
<script src="CHARTS/js/highcharts-more.js"></script>
<script src="CHARTS/js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var ranges = [
[<?php echo $json_meteo_final; ?>]
],
averages = [
];
Highcharts.setOptions({
chart: {
zoomType: 'x',
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(245, 245, 245)'],
[1, 'rgb(245, 245, 245)']
]
},
}
});
$('#container').highcharts({
title: {
text: 'July temperatures'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
credits: {
enabled: false
},
plotOptions: {
series: {
connectNulls: true
}
},
legend: {
},
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]
});
});
</script>
<div id="container" style="min-width: 100%; height: 400px; margin: 0 auto"></div>
[/javascript]
Grand merci pour votre aide et bonne journée!
Bye