Home forums Feature Requests & Feedback mysql => php => javascript => canvas

This topic contains 1 reply, has 2 voices, and was last updated by  Daniel Silva 2 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #7225

    Delta123
    Participant

    hi i have a table contains 3 columns (time datetime,temperature int,humidity int)

    table meteo
    i wanna draw a canvas with 2 lines of temperature and humidity with date day by day my php is :

    <?php 
    header('Content-Type: application/json');
    include_once("connect.php");
    
    if($_POST['action'] == "showGraph"){
    	
    	$data_points = array();
    	
    	$result = mysql_query("SELECT * FROM  data" , $connection);
    	
    	while($row = mysql_fetch_assoc($result)){
    		$point = array("label" => $row['TS'] , "y" => $row['TEMP']);
            
            array_push($data_points, $point);
    		
    	}
    	echo json_encode($data_points, JSON_NUMERIC_CHECK);
    
    	
    } 

    javascript :

    function showGraph(){
    $.getJSON("scriptWithAjax.php", function (result) {	
    	var chart = new CanvasJS.Chart("chartContainer",
        {
          title:{
            text: "Temperature et l'humidité"             
          },      
          axisY:{
            titleFontFamily: "arial",
            titleFontSize: 12,
            includeZero: false
          },
          toolTip: {
            shared: true
          },
          data: [
          {        
            type: "spline",  
            name: "Humidité",        
            showInLegend: true,
            dataPoints: [
            {label: "Oct 1" , y: 40} ,     
            {label:"Oct 2", y: 37} ,     
            {label: "Oct 3", y: 34} ,     
            {label: "Oct 4", y: 36} ,     
            {label: "Oct 5", y: 54}              
            ]
          }, 
          {        
            type: "spline",  
            name: "Température",        
            showInLegend: true,
            dataPoints: [
            {label: "Oct 1" , y: 27} ,     
            {label:"Oct 2", y: 28} ,     
            {label: "Oct 3", y: 26} ,     
            {label: "Oct 4", y: 27} ,     
            {label: "Oct 5", y: 32}              
            ]
          }    
          ],
          legend:{
            cursor:"pointer",
            itemclick:function(e){
              if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
              	e.dataSeries.visible = false;
              }
              else {
              	e.dataSeries.visible = true;            
              }
              chart.render();
            }
          }
        });
    
    	chart.render();
    });	
    	
    }

    jquery and canvas are called in my index but it doesn’t shows anything

    if it show then i need to draw a line for humidity

    #7228

    Daniel Silva
    Participant

    The javascript is working:
    http://jsfiddle.net/dreamfalcon/90fesy3v/

    You just need to iterate over the result

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.