JSON Results to Chart

Skythrust

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!
 
Sort by date Sort by votes
Markshall

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,638
2,393
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>
 
Upvote 0 Downvote
Skythrust

Skythrust

Member
Jul 9, 2019
133
7
Markshall said:
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>
Click to expand...
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.
 
Upvote 0 Downvote
Skythrust

Skythrust

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

You must be registered for see links
Click to expand...

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:
Upvote 0 Downvote

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top