JSON Results to Chart

Skythrust

Member
Jul 9, 2019
133
7
Goodmorning,

I was wondering how I can use JSON values as variables for a chart.

I've got DateTime which should be the xValues, and I got Kh as my data, Whatever I tried, my chart is not correctly filled with his information.

JSON Output; [{"Kh":"7.8","DateTime":"2022-04-06,"},{"Kh":"9.4","DateTime":"2022-03-03,"},{"Kh":"9.4","DateTime":"2022-02-20,"},{"Kh":"11.5","DateTime":"2022-01-31,"},{"Kh":"8.5","DateTime":"2022-01-14,"},{"Kh":"8.3","DateTime":"2022-01-03,"},{"Kh":"8.8","DateTime":"2021-12-30,"},{"Kh":"7.3","DateTime":"2021-12-27,"},{"Kh":"7.7","DateTime":"2021-12-25,"},{"Kh":"7.4","DateTime":"2021-12-23,"}]

JavaScript:
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
var xValues = [100,200,300,400,500,600,700,800,900,1000];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});
</script>

Thanks in advance!
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
If I’m understanding what you’re saying correctly, this should suffice.

jsonData should be a reference to the JSON data you have.

JavaScript:
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
var xValues = jsonData.map(el => el.DateTime);

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      data: jsonData.map(el => el.Kh),
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});
</script>
 

Skythrust

Member
Jul 9, 2019
133
7
If I’m understanding what you’re saying correctly, this should suffice.

jsonData should be a reference to the JSON data you have.

JavaScript:
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
var xValues = jsonData.map(el => el.DateTime);

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      data: jsonData.map(el => el.Kh),
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});
</script>
Thanks!

How about when the const JSON is a variable from a php file like;

$JSONAnalyse = "[{"Kh":"7.8","DateTime":"2022-04-06,"},{"Kh":"9.4","DateTime":"2022-03-03,"},{"Kh":"9.4","DateTime":"2022-02-20,"},{"Kh":"11.5","DateTime":"2022-01-31,"},{"Kh":"8.5","DateTime":"2022-01-14,"},{"Kh":"8.3","DateTime":"2022-01-03,"},{"Kh":"8.8","DateTime":"2021-12-30,"},{"Kh":"7.3","DateTime":"2021-12-27,"},{"Kh":"7.7","DateTime":"2021-12-25,"},{"Kh":"7.4","DateTime":"2021-12-23,"}] ";

Since I call I SQL Database and I make a JSON with all the objects I would like to add this if possible.
 

Skythrust

Member
Jul 9, 2019
133
7
Make your PHP script output pure JSON instead and query that page using Javascript?


I tried this, when I include the php file on the top of the file and I do an echo it works. When I hide the echo and try to add this in the script I will get a blanc page or the message; 'SyntaxError: JSON.parse: unexpected character at line 3 column 1 of the JSON data'

My code;

PHP:
// index.php

<?php include 'temp.php'; ?>

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
const json = <?php echo $JSONAnalyse; ?>

var xValues = json.map(el => el.DateTime);

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
        data: json.map(el => el.Kh),
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});
</script>
PHP:
// temp.php

<?php
header('Content-Type: application/json; charset=utf-8');

// Aquarium Test Variables Charts
$vCalcium = "";
$vCarbonateHardness = "";   
$vIodine = "";
$vMagnesium = "";
$vNitrite = "";
$vNitrate = "";
$vAlkanity = "";
$vPhosphate = "";
$vStrontium = "";
$vSodiumChloride = "";
$vDateTime = "";

$conn=mysqli_connect(DATABASE_CONNECTION);
$sql = "SELECT * FROM Values ORDER BY DateTime DESC LIMIT 10";
$result = mysqli_query($conn, $sql);

    while($row = mysqli_fetch_assoc($result))
    {
        $vCarbonateHardness = $row["Kh"];   
        $vDateTime = $row["DateTime"];   

            $AnalyseArray[] = array(
            "DateTime"=> "$vDateTime", 
            "Kh"=> "$vCarbonateHardness");                   
    }
    mysqli_close($conn);
    $JSONAnalyse = json_encode($AnalyseArray);
    //echo $JSONAnalyse;
    
    $conn->close();

?>
Post automatically merged:

@TheGeneral can you please help me out with this? :)
 
Last edited:

Users who are viewing this thread

Top