@arturka_v_10

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

Здравствуйте, понадобилось мне тут графики нас сайт привинтить. В 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 раскидать попорядку значения из выборки?
  • Вопрос задан
  • 242 просмотра
Решения вопроса 1
@Oleg-v7
PHP, js, jq, css3
стиль 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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@fetis26
Ну, за фронтенд!
У вас компонент принимает массив

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы