Блог

Главная - Вопросы по программированию - как отобразить три линии на графике

как отобразить три линии на графике

#javascript #php #html #jquery #charts

Вопрос:

Я создаю диаграмму с помощью canvasjs. Значения, отображаемые в диаграмме, взяты из базы данных mysql. Все работает, но проблема в том, что он показывает только 1 строку на графике (sensors_pres) из таблицы SensorData на графике, а не все три sensors_pres, sensors_temperature_data и sensors_humidity. Другая проблема заключается в том, что на ползунке диапазона не отображается время от 0 до 24, проверьте это. Нажмите слева вверх на кнопку все, а справа вверх вы увидите число от -1 до 96. Как я могу решить эту проблему? Я открыл data.php файл с браузером, и все значения работают правильно.

Вот мой код html и javascript

 <!DOCTYPE HTML>    
<html>    
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<script type="text/javascript">
window.onload = function () {  
$.getJSON("data.php", function (result) {
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    title:{
      text:"StockChart with Numeric Axis"
    },
    animationEnabled: true,
    exportEnabled: true,
    charts: [{
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true
        }
      },
      axisY: {
        crosshair: {
          enabled: true,
          //snapToDataPoint: true
        }
      },
      data: [{
        type: "line",
        dataPoints: result
    }]
    }],    
    rangeSelector: {
      inputFields: {
        startValue: 00,
        endValue: 24,
        valueFormatString: "###0"
      },
      
      buttons: [{
        label: "00",
        range: 00,
        rangeType: "number"
      },{
        label: "12",
        range: 12,
        rangeType: "number"
      },{
        label: "24",
        range: 24,
        rangeType: "number"
      },{
        label: "All",        
        rangeType: "all"
      }]
    }
  });

  stockChart.render();    
  })
}

</script>
</head>
<body>
<div id="chartContainer" style="height: 450px; width: 100%;"></div>
</body>
</html>

вот мой php — код:

 <?php

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

$con = mysqli_connect("fdb30.awardspace.net","3758712_lnd","bogdanutzu97","3758712_lnd");

// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $data_points = array();

    $result = mysqli_query($con, "SELECT * FROM SensorData");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['reading_time'] , "y" => $row['sensors_pres'],$row['sensors_temperature_data'],$row['sensors_humidity']);

        array_push($data_points, $point);       
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);

?>

Комментарии:

1. спасибо всем за помощь, вы хороший программист

2. Что у тебя за вопрос по этому поводу? Это вообще связано с PHP или HTML?

Ответ №1:

 data: [
       {
        type: "line",
        dataPoints: result1
       },

       {
        type: "line",
        dataPoints: result2
       },
       {
        type: "line",
        dataPoints: result3
       }
]

В разделе «Данные» добавьте еще 2 набора данных

Метки: