HTML-граф с MySQL с использованием переполнения стека Javascript

Question

HTML-граф с MySQL с использованием переполнения стека Javascript

Привет ниже PHP получает результат, как показано ниже, но проблема в том, что мне нужно интегрировать с JavaScript, т.е. точки данных, чтобы показать тот же результат в графическом представлении

PHP Out выглядит следующим образом:

{ y: 4,label: James },
{ y: 5,label: Mathews },
{ y: 6,label: Arnold },
{ y: 7,label: William },

Код БД:

$mysqli=mysqli_connect('localhost','root','root','Reg');




$selname = $_POST['storedValue'];
$query ="SELECT * FROM master WHERE  StudentRegID='$selname' ";
$result = mysqli_query($mysqli,$query)or die(mysqli_error());
$num_row = mysqli_num_rows($result);
while($row=mysqli_fetch_array($result))
{



echo "{ y: ".$row[3].",label: ".$row[6]." },<br/>";

}

mysqli_close($mysqli);

Код JavaScript:
Ниже приведен код для точки данных вручную, но результат должен быть напечатан выше

data:[
{
type: "stackedBar100",
showInLegend: true,
name: "Presrnt",
dataPoints: [

{y: 0, label: "Modern Chair" },
{y: 120, label: "VOIP Phone" },
{y: 250, label: "Microwave" },
{y: 120, label: "Water Filter" },
{y: 374, label: "Expresso Machine" },
{y: 374, label: "Expresso Machine" },
{y: 350, label: "Lobby Chair" },
]
},
{
type: "stackedBar100",
showInLegend: true,
name: "Absent",
dataPoints: [

{y: 1, label: "Modern Chair" },
{y: 220, label: "VOIP Phone" },
{y: 350, label: "Microwave" },
{y: 220, label: "Water Filter" },
{y: 474, label: "Expresso Machine" },
{y: 474, label: "Expresso Machine" },
{y: 450, label: "Lobby Chair" },
]
}
]

Поскольку данные извлекаются с использованием ajax, у меня есть ответ во время погружения, и я использую его, чтобы указать на точку данных.

 var temp =  document.getElementById("mySpan").innerHTML;

0

ajax canvas javascript mysql php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я работал над чем-то очень похожим в последнее время, и я использовал этот метод:

Javascript:

var dps = [];
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Stats"},
animationEnabled: true,
height: 650,
width: $(".slide-content").width(),
theme: "theme2",
data: [

{
type: "column",
dataPoints: dps
}
]
});

Затем, чтобы обновить график с помощью AJAX-запроса:

function updatechart()
{
dps.length = 0;

$.getJSON("http://example.com", function (result) {

$.each(result, function() {
dps.push(this);
});

chart.render();
});

}

PHP:

$output = [];

$query = mysql_query("SELECT date,value FROM `stats`");
while($row = mysql_fetch_array($query)) {

$output[] = array("label" => "Date: ".$row[0], "y" => $row[1]);

}

$result = json_encode($output);
die($result);

0