JavaScript — гистограмма с использованием php и mysql

Question

JavaScript — гистограмма с использованием php и mysql

Линейчатая диаграмма требований из данных MySql, у меня есть рабочий код для статической гистограммы, код следующий ->

<script>
var data = [
[0, 11], //London, UK
[1, 15], //New York, USA
[2, 25], //New Delhi, India
[3, 24], //Taipei, Taiwan
[4, 13], //Beijing, China
[5, 18]  //Sydney, AU
];
var dataset = [
{ label: "barchart", data: data, color: "#5482FF" }
];
var ticks = [
[0, "London"],
[1, "New Mumbai"],
[2, "New Delhi"],
[3, "Taipei"],
[4, "Beijing"],
[5, "Sydney"]
];
<script>

но для динамической гистограммы данные поступают из базы данных, и данные также в формате массива следующим образом

Array
(
[0] => Array
(
[product] => abc
[total] => 21
)
[1] => Array
(
[product] => xyz
[total] => 1
)
[2] => Array
(
[product] => pqr
[total] => 13
)
)

Как создать гистограмму из этих данных? или любое предложение?

1

arrays bar-chart javascript mysql php

Решение

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

 $results = "data From the DB";

$ticks = array();

foreach($results as $result){

$data[0] = $result['product'];

$data[1] = $result['total'];

$ticks[] = $data;

}

<script>
var ticks =  <?php print_R($ticks); ?>
</script>

0

Источник

Accepted Answer

используемый chart.js
документ графика http://www.chartjs.org/docs/

пример гистограммы. Надеюсь, это поможет вам

<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<style>
canvas{
}
</style>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<?php
$array=array
(
'0' => array
(
'product' => 'abc',
'total' => 21
),
'1' => array
(
'product' => 'xyz',
'total' => 1
),
'2' => array
(
'product' => 'pqr',
'total' => 13
)
);

?><script>
var lab=[];
var data=[];
<?php
foreach($array as $tem)
{

?>

lab.push('<?php echo $tem['product']; ?>');
data.push('<?php echo $tem['total']; ?>');
<?php }

?>

var barChartData = {
labels : lab,
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : data
},

]

}

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

</script>
</body>
</html>

1