Highcharts série de données d'un problème avec ajax/json et PHP
C'est ma première demande ici, et j'ai lu de nombreux autres messages sur ce même problème, mais je suis TOUJOURS coincé, et quasiment à bout de ressources sur ce... de Sorte que toute aide est très appréciée!
J'ai suivantes Highcharts objet sur Page1.php et je suis en utilisant AJAX pour obtenir des données de Page2.php au chargement de la page ainsi que lorsqu'une option de liste déroulante est changé.
(tronquée pour faciliter la lecture):
$(document).ready(function() {
var e = document.getElementById("selOption"); //<--- This is the dropdown
var domText = e.options[0].text;
var domID = e.options[e.selectedIndex].value;
var options = {
chart: {
renderTo: 'linechart',
type: 'line'
},
title: {
text: 'Title for ' + domText
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %e, %Y',
year: '%Y'
}
},
yAxis: {
title: {
text: 'Important Values'
},
reversed: true,
min: 0,
max: 100
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
}
},
series: []
};
$.get('Page2.php?domID=' + domID,function(data) {
$.each(data, function(key,value) {
//var series = {};
//series.name.push(value);
//series.data.push([value]);
options.series.push(data);
//alert(data);
});
var linechart = new Highcharts.Chart(options);
});
});
Page2.php a la suite de l'envoi de retour json:
$sqlSelect = "SELECT Item1,Item2,Item3 FROM... ";
$result = mysql_query($sqlSelect);
while ($item = mysql_fetch_assoc($result)) {
$name = $item['Item1'];
$date = str_replace("-",",",$item['Item2']);
$pos = $item['Item3'];
$arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],");
echo json_encode($arr);
}
Mon json retour ressemble à ceci:
{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}
{"name":"Item1","data":"[Date.UTC(2011,11,08), 2 ],"}
Quand mon tableau de charges, il remplit 135 Série des noms (?!?!?!) au fond et ne semble pas montrer les points sur la ligne graphique.
Si je supprime les guillemets doubles et les coder en dur le résultat dans la baie de la série, il fonctionne très bien (même si j'ai remarqué que l'exemple ne semble pas avoir une virgule entre les objets.
VOUS REMERCIER pour toute l'aide ...surtout les réponses rapides! 😉
OriginalL'auteur gtr1971 | 2011-11-08
Vous devez vous connecter pour publier un commentaire.
RÉSOLU:
J'ai trouvé une réponse qui a finalement fonctionné! Frustrant qu'il m'a fallu plusieurs jours, parce qu'il n'a pas été bien documenté par Highcharts (et/ou peut-être que ma compréhension de jQuert et JavaScript est encore à un novice).
La réponse est ne pas envoyer les données X/Y comme un préformé tableau dans votre objet json, mais au lieu de simplement envoyer les chiffres qui composent la Date (valeur de x) et la Valeur (valeur y) comme une liste de valeurs séparées par des virgules dans un objet json, et ensuite faire l'analyse et en poussant sur le client final.
Par exemple: a l'origine, je voulais obtenir mon PHP pour envoyer quelque chose comme
mais ce que j'ai vraiment besoin de faire est d'envoyer quelque chose comme
La première étape est de s'assurer que vous avez la "série" d'option est définie sur un tableau vide
series: []
(J'en parle parce que j'ai vu d'autres réponses où ce qui a été fait différemment).
Puis dans votre getJSON fonction, vous devez créer un nouvel objet pour chaque objet que vous êtes en tirant dans, qui comprend également un vide "données" d'un tableau (voir "var série" ci-dessous).
Ensuite nid à quelques
$.each
boucles d'analyser et de pousser les données dans les tableaux, et de remplir le "nom" de chaque objet:Après le code ci-dessus, vous devez instancier la carte:
Et qui devraient être!
Espérons que quelqu'un d'autre trouve cette réponse utile et n'a pas besoin de battre eux-mêmes sur la tête pendant des jours à essayer de le comprendre. 🙂
OriginalL'auteur gtr1971
Depuis Javascript UTC méthode sera de retour avec un Entier, c'est juste mieux si vous venez de passer le Timestamp Unix comme un entier lorsque vous générez le JSON sur le serverside au lieu d'essayer de passer une fonction (UTC.Date) dans le JSON qui rend l'ensemble du JSON valide!
Donc
Au lieu de cela
Ce faire:
Veuillez noter que nous sommes en multipliant le PHP timestamp unix par 1000 pour le faire en JS compatible.
Référence: http://www.w3schools.com/jsref/jsref_utc.asp
OriginalL'auteur Tamas Kalman
Viens de vérifier avec un exemple de code pour Highcharts,
series
doit être un tableau d'objets JSON contenant chacun{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}
etc.Le principal problème est votre sortie de page2, n'est pas un tableau.
Vous aurez besoin pour réparer votre $.chaque d'abord, vous avez besoin de pousser
value
, pasdata
:Cela va définir chaque élément de la série à la pleine objet json.
Alors pour remédier à la sortie:
Et qui devrait le faire.
Le problème est que chaque "nom" a de multiples ensembles de données dans un tableau avec la date et le numéro de x/y coords. Voici mon nouveau JSON:
[{"name":"Name 1","data":["[Date.UTC(2011,11,08), 4 ]","[Date.UTC(2011,11,09), 4 ]","[Date.UTC(2011,11,10), 4 ]","[Date.UTC(2011,11,11), 4 ]","[Date.UTC(2011,11,14), 3 ]"]},{"name":"Name 2","data":["[Date.UTC(2011,11,08), 2 ]","[Date.UTC(2011,11,09), 2 ]","[Date.UTC(2011,11,10), 2 ]","[Date.UTC(2011,11,11), 2 ]","[Date.UTC(2011,11,14), 2 ]"]}]
Dans le tableau je obtenir les noms de couleurs différentes, mais pas de données tracées dans le graphique.heureux vous avez compris, je lui ai donné mon meilleur coup!
C'est ok... je vous remercie de prendre le temps et de regarder les docs pour m'aider à le comprendre. Ce n'est pas facile!
OriginalL'auteur sicks
Vérifié en PHP5.5
Vous pouvez simplement ajouter ceci dans le json avec la série de données
OriginalL'auteur Kunal Panchal
Je suis tombé sur le problème de l'envoi des horodateurs, produit par mktime() car highcharts prévoit de temps UTC, alors que le PHP Horodatage n'est pas l'heure UTC. Les données peuvent être affichées sur un mauvais jour dans le tableau, de sorte que vous devez aussi considérer le fuseau horaire.
Exemple de Code serait:
OriginalL'auteur Dimitri L.