2017-07-30 1 views
0

c'est en fait ma première fois d'utiliser les canvajs mais il fonctionne vraiment doenst :(Quelqu'un pourrait-il s'il vous plaît vérifier mon codecanvasJS: le tableau isnt chargé

data.php

<?php 

header('Content-Type: application/json'); 

include './traitement.php'; 

$data =array(); 

$data=getListTemp(); 

$point=array(); 

$data_points=array(); 

foreach($data as $value){ foreach($value as $l){ 

     $s= explode('T', $l->date) ; 

     $t=explode('-',$s[0]); 

     $f=explode(':',$s[1]); 

     $io=explode('+',$f[2]); 

     $o=mktime($f[0],$f[1],$io[1],$t[1],$t[2],$t[0]); 

     $i= date ("D M Y H:i:s U", $o); 

     $point = array("x" => $i, "y" => $l->valeur); 

     array_push($data_points, $point);   
}} 

echo json_encode($data_points, JSON_NUMERIC_CHECK); 

?> 

avec le résultat :

[{"x": «Sam Jul 2017 23:20:01», «y»: 30}, {"x": "sam. Juil. 2017 23:10:01", "y": 30 }, {"x": "sam. juil. 2017 23:00:01", "y": 30}, {"x": "sam. juil. 2017 22:50:01", "y": 25}, {" x ":" Sat Jul 2017 22:40:01 "," y ": 30}, {" x ":" Sat Jul 2017 22:30:01 "," y ": 25}, {" x ":" S à juil. 2017 22:20:01 "," y ": 30}, {" x ":" sam. juil. 2017 22:10:01 "," y ": 40}, {" x ":" sam. juil. 2017 22 : 00: 01" , "y": 23}]

curve.html

<!DOCTYPE html> 
<html> 


<head> 
    <title></title> 

    <script src="canvasjs.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="http://code.jquery.com/jquery-latest.js" > </script> 

    <script type="text/javascript"> 

$(document).ready(function() { 
$.getJSON("data.php", function (result) { 

var dps=[]; 
dps = result; 

    var chart = new CanvasJS.Chart("chartContainer",{ 
     title :{ 
      text: "Data " 
     }, 
     axisX: {       
      title: "time", 

     }, 
     axisY: {       
      title: "temperature", 

     }, 
     data: [{ 
      type:"spline", 

      dataPoints : dps 
     }] 
     }); 

    chart.render();  


}); 

}); 

    </script> 
</head> 
<body> 

    <div id="chartContainer" style="width: 800px; height: 380px;"></div> 

</body> 
</html> 

Et c'est ce que je dois à la suite !! enter image description here

+0

À la place de 'x' utilisez 'label' en réponse, j'ai lu la documentation et essayé ce https://jsfiddle.net/p7w58naq/ avec votre réponse – LogicBlower

+0

merci beaucoup ça marche^_ ^ –

Répondre

0

Remplacer x par une étiquette. Selon la documentation et les choses que j'ai essayé x doit être un nombre seulement alors il fonctionnera et dans votre cas, il est la chaîne Sat juillet .. 'si la marque x que l'étiquette

(ci-dessous est copier coller de mon commentaire ci-dessus) Dans -place de 'x' utilise 'label' en réponse, j'ai lu la documentation et essayé ce jsfiddle.net/p7w58naq avec votre réponse