Как связать массив данных с js?

Question

[Артур]

Здравствуйте, понадобилось мне тут графики нас сайт привинтить. В js ни бум-бум. Что нашел то сделал.
Вот рабочий вариант, но тут выборка только для одной записи и к js отправлена тоже одна переменная.

<script src='Chart.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/Chart.js"></script>
<?
$bp1 = 10; $bp2 = 18; $bp3 = 26;

$sql = $mysqli->query("SELECT * FROM history WHERE id2='1' LIMIT 1");
$kdat = $sql->fetch_array();
$sinf1 = $kdat['sum'];
$tinf1 = $kdat['time'];
?>
<canvas id="buyers" style="width: 500px; height: 200px;" class="tgr">
<script>
var old1 = '<?php echo $sinf1;?>';
var old2 = '<?php echo $bp2;?>';
var old3 = '<?php echo $bp3;?>';
var tim1 = '<?php echo date("H:i:s",$kdat['time']);?>';
var buyers = document.getElementById('buyers').getContext('2d');
var buyerData = {
   labels : [tim1,"Февраль","Март","Апрель","Май","Июнь"],
   datasets : [
      {
         fillColor : "rgba(172,194,132,0.4)",
         strokeColor : "#ACC26D",
         pointColor : "#fff",
         pointStrokeColor : "#9DB86D",
         data : [old1,old2,old3]
      }
   ]
}
</script>
<script>new Chart(buyers).Line(buyerData);</script></canvas>

Загвоздка в том, что нужно массив раскидать, так и чтобы каждый var из скрипта равнялся переменной, циклом.

<?
$sql = $mysqli->query("SELECT * FROM history WHERE id2='1'");
while($kdat = $sql->fetch_array()){
echo $kdat['sum']; echo $kdat['time'];
}?>

данных выгружаемых из базы может быть оч. много. И как мне к каждому var раскидать попорядку значения из выборки?

Comments

[Dmitriy Uvarov]

Если данных очень много, то может быть стоит подумать о передачи в виде json? Сделайте запрос с клиента на сервер за списком и спарсите его.

[OVK2015]

Судя по коду вы Chart.js используете. В нем наборы данных вот так хранятся/инициализируются:

var graphicData = 
{    
    labels : new Array(),
    datasets: 
    [
        {
            label: "Температура:",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",            
            pointHighlightStroke: "red",
            data : new Array()
        },
        {
            label: "Ощущается как:",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",            
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",           
            pointHighlightStroke: "red",
            data : new Array()
        }
    ]
};

В graphicData.datasets[0].data, graphicData.datasets[1].data заносите сами данные

Answer 1

[Олег]

стиль canvas игнорит поэтом ширину/высоту без style="" передавайте. Выгружать следует списком (больше одного в лимите)

<?
$r = array();
$d = array();
$query = $mysqli->query("SELECT * FROM history WHERE id2='1' ORDER BY id DESC LIMIT 10");
while ($set = $query->fetch_array()) {
  $r[] = $set['sum'];
  $d[] = '"'.date("d.m", $set['time']).'"';
  
}
$dt = implode(", ", $d);
$str = implode(", ", $r);
?>
<tr><td colspan="7">
<canvas id="buyers" width="500" height="200" class="tgr">
<script>
var myArr = [<?=$str?>];
var Date = [<?=$dt?>];
var buyers = document.getElementById('buyers').getContext('2d');
var buyerData = {
   labels : Date,
   datasets : [
      {
         fillColor : "rgba(172,194,132,0.4)",
         strokeColor : "#ACC26D",
         pointColor : "#fff",
         pointStrokeColor : "#9DB86D",
		 data: myArr
      }
   ]
}
</script>
<script>new Chart(buyers).Line(buyerData);</script></canvas>

Answer 2

[fetis26]

У вас компонент принимает массив

data : [old1,old2,old3]
так массив ему и передавайте

В JS можно задать массив следующим образом
var myArr = [1,2,4]

Т.е. выведите массив и его уже передавайте как
data: myArr

Comments

[Артур]

<?
$arr = [];
$query = $mysqli->query("SELECT sum,id FROM history WHERE id2='1'");
while ($set = $query->fetch_array()) {
$arr[$set['id']] = $set['sum'];
$array = $arr[$set['id']];
}
?>
<script>
var myArr = ['.implode(",",<?=$array;?>).']
var buyers = document.getElementById('buyers').getContext('2d');
var buyerData = {
   labels : ["1","2","3","4","5"],
   datasets : [
      {
         fillColor : "rgba(172,194,132,0.4)",
         strokeColor : "#ACC26D",
         pointColor : "#fff",
         pointStrokeColor : "#9DB86D",
		 data: myArr
      }
   ]
}
</script>

Не пашет, может не так что понял?

[fetis26]

Rich: а что получается в коде страницы, после отработки php?