Annonce
#1 Mon 03 October 2016 14:36
- Gayake
- Participant occasionnel
- Date d'inscription: 13 Sep 2014
- Messages: 26
importer donnees d'un GeoJSON dans graph
Bonjour à tous!
Il y a 15j je cherchais (sujet du 15/09) à intégrer un graph dans une pop-up. Je n'ai toujours pas réussi à le faire malgré les informations. Afin de progresser, j'ai décomposer mon objectif, mais là encore je sollicite de l'aide.
J'ai un GeoJSON d'une parcelle. Quand je clique dessus, je souhaiterais qu'un graph apparaisse dans une div différente. J'ai vu que le sujet a déjà plus ou moins été abordé mais pour ma part, les données ne doivent pas être inscrites "en dur" genre data: [0.1,0.2...], ni ne doivent provenir d'un fichier externe.
Comme variables j'ai:
var= geojson_OGRGeoJSON //
var = Jour // correspond à mon axe x
var= doubleS // fonction qui calcule le y à partir de 6 attributs du GeoJSON
J'utilise un fonction jQuery faisant appel à ces var pour afficher mon graph mais rien ne se passe. Je pense que je mélange mes variables en les indiquant.
Pourrais-je avoir un avis externe car je patauge allègrement dans la choucroute!
Merci
Voici une partie du code
Code:
//début du Html
var geojson_OGRGeoJSON = {"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } },
"features": [
{ "type": "Feature", "properties": { "id": zita, "Vmin": "0.17", "Vmax": "0.8", "A": "210.5", "mA": "0.5", "S": "306.9", "mS": "0.07" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ ... ] ] ] } }, //coordonnées indisponibles pour le moment
<div id="container" style="float:left; border-radius: 15px; margin-bottom:0.5px; border:2px solid #000; height:250px; width:35%" >
<script>
var Jour = new Array(365);
for(x=1;x <= Jour.length;x++){
Jour[x-1]=x;
}
var doubleS = function doubleS(xdate, Vmin,Vmax,A,mA,S,mS){
try {
var xdateLength = xdate.length;
var ACR = new Array();
var SCE = new Array();
var Vt = new Array();
for(x=0;x < xdateLength;x++){
ACR.push( 1.0/(1+Math.exp(-mA*( xdate[x]-A))));
SCE.push( 1-1.0/(1+Math.exp(-mS*( xdate[x]-S))) );
Vt.push(Vmin+(Vmax-Vmin)*(SCE[x]+ACR[x]-1));
}
// console.log('len(Vt) : ',len(Vt));
return Vt;
}catch(err){
alert(err);
console.log('pb valueError : ',err,", ",ACR,", ", SCE,", ",Vt);
//return None
}
};
$(document).ready(function() {
var chart;
var colors = ["#98DF8A"];
var options = {};
options.chart = {
renderTo: 'container',
width: 588,
height: 400,
marginTop: 70,
marginLeft: 100,
marginRight: 100,
type:'line'
};
options.credits = {
enabled: false
};
options.colors = colors;
options.title = {
text: "tutu",
margin: 10
};
options.tooltip = {
formatter: function() {
return " : " + number_format(this.y,',',',' ') ;
}
};
options.xAxis = {
categories: [],
labels: {
rotation: -45,
y: 20
}
};
options.yAxis = [
{
title : {
text: "indice"
},
labels: {
formatter: function() {
return this.value ;
},
style: {
color: '#000'
}
}
}];
options.series = [
{
name: 'doubleS', //est-ce la bonne variable?
data: []
}
]
$.getJSON('geojson_OGRGeoJSON ', function(ind) {
$.each(ind, function(x,e){
var Jour = new Jour(parseInt(x),0,1); // ici j'ai mis la var de l'axe x
options.series[0].data.push(e.doubleS);
options.xAxis.categories.push(x);
})
console.log(options.categories)
chart = new Highcharts.Chart(options);
});
})
<!--variables réagissant au clic souris-->
function jeReagisAuClick(evt) {
var pixel = evt.pixel;
displayFeatureInfo(pixel);
var Jour;
var doubleS;
var chart;
map.on('click',jeReagisAuClick );
</script>
</div>
...//suite du htmlHors ligne
