Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Данные для построения графиков. (https://javascript.ru/forum/misc/66943-dannye-dlya-postroeniya-grafikov.html)

ureech 19.01.2017 11:08

Данные для построения графиков.
 
Всем привет. Хочу вывести графики. Решил использовать highcharts.js. Подключил пример, работает. Только теперь не могу въехать как мне данные передать. Пример здесь http://codepen.io/Ureech/pen/VPPBjp?editors=1010
Сами данные раз в неделю заносятся юзером в инпут, передаются аяксом на сервер, обрабатываются, заносятся в базу и выводятся в таблицу. А вот как их в эту data:[] передать?

ureech 19.01.2017 16:11

Дошёл до следующего.
Из php в html передаю переменую, полученную из массива
$list = Array ( [0] => 145.00 [1] => 115.00 [2] => 140.00 [3] => 0.00 [4] => 0.00 [5] => 0.00 [6] => 0.00 [7] => 0.00 [8] => 0.00 [9] => 0.00 )
$list = implode(',',$list);

Теперь в переменной у меня строка. Подставляю в
var dat = '{$list}';
....
     series: [{
        name: 'Dev #1',
     data: [datа]
...

Не работает. Смотрю в консоли, в data только имя,значения нет.

laimas 19.01.2017 16:18

var dat = '{$list}'; - и нахрена тут вообще кавычки при том одинарные, в которых РНР не обрабатывает наличие своих переменных, да и к тому же к этой строке РНР не имеет отношения?

а тут

data: [datа]

ureech 19.01.2017 16:38

var dat = '{$list}'; Не суть. Главное здесь строка. (это смарти)
Цитата:

Сообщение от laimas
data: [datа]

Это опечатка. Так data: [dat]

laimas 19.01.2017 16:46

Если смарти и опечатка, то в коде страницы должно быть data: [145.00,115.00,140.00,...], кстати можно и без var dat, а сразу вставить сюда data: [{$list}], без кавычек конечно.

Проверяйте что отдает интерпретатор в шаблон.

ureech 19.01.2017 16:51

В том то и дело, что в коде страницы не значение, а имя переменой.
console.log(dat)
Строка
145.00,115.00,140.00,0.00,0.00,0.00,0.00,0.00,0.00 ,0.00
console.log(dat.split(','))
Array [ "145.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00" ]
Прописываю в data: саму строку всё работает, подставляю переменую,нет

ureech 19.01.2017 16:53

Вот в доках тоже самое вроде
http://www.highcharts.com/docs/worki...rom-a-database

laimas 19.01.2017 17:06

Попробуйте так:

$list = json_encode($list);

и

data: {$list}

Dilettante_Pro 19.01.2017 17:09

var dat = "145.00,115.00,140.00,0.00,0.00,0.00,0.00,0.00,0.00 ,0.00 ";
var obj = { };
obj.data = dat.split(",");
alert(obj.data[1]);

ureech 19.01.2017 17:26

Я не понимаю, что мне с этим делать? Это похоже тоже что и
data:dat.split(',')
console.log(obj.data)
Array [ "145.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00" ]

laimas 19.01.2017 17:27

Цитата:

Сообщение от Dilettante_Pro
var obj = { };

причем тут объект, если плагин работает с массивом и большего не требует?

Dilettante_Pro 19.01.2017 17:30

ureech,
А это не то, что тебе нужно?
data у тебя - это что?

Например
var chart1; // globally available
$(function() {
       chart1 = Highcharts.stockChart('container', {
         rangeSelector: {
            selected: 1
         },
         series: [{
            name: 'USD to EUR',
            data: usdtoeur // predefined JavaScript array
         }]
      });
   });

Dilettante_Pro 19.01.2017 17:44

laimas,
Цитата:

Сообщение от laimas
причем тут объект, если плагин работает с массивом и большего не требует?

Ну так и дайте ему массив dat.split(","), а не строку dat

ureech 19.01.2017 17:47

Так я пробовал, но не смог заставить работать. Ошибка,
TypeError: Highcharts.stockChart is not a function

ureech 19.01.2017 17:50

Чем это
var a = '1,2,3';
var b = [];
b = [a];

отличается от этого
var b = [1,2,3];

Dilettante_Pro 19.01.2017 17:53

ureech,
Ваш пример:
var chart1, chart2;

// Once DOM (document) is finished loading
$(document).ready(function() {

    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'line',
        height: 350,
     },
     title: {
        text: 'Изменение размеров шеи,талии и бёдер за 10 недель в %'
     },
     xAxis: {
        categories: [1,2,3,4,5,6,7,8,9,10]
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Талия',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Бёдра',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Шея',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });


То же самое с данными из строки:

var chart1, chart2;
var legs = "15, 15, 18, 40, 30, 25, 60, 60, 80, 70";
// Once DOM (document) is finished loading
$(document).ready(function() {

    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'line',
        height: 350,
     },
     title: {
        text: 'Изменение размеров шеи,талии и бёдер за 10 недель в %'
     },
     xAxis: {
        categories: [1,2,3,4,5,6,7,8,9,10]
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Талия',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Бёдра',
        data: legs.split(",")
     }, {
        name: 'Шея',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });

Dilettante_Pro 19.01.2017 17:55

Цитата:

Сообщение от ureech (Сообщение 441450)
Чем это
var a = '1,2,3';
var b = [];
b = [a];

отличается от этого
var b = [1,2,3];

Тем, что в первом случае в массив пишется одно значение, равное всей строковой переменной
var a = '1,2,3';
var b = [];
b = [a];
alert(b.length);
alert(b[0]);

ureech 19.01.2017 18:10

У меня так же. Не работает.

ureech 19.01.2017 18:10

Цитата:

Сообщение от Dilettante_Pro (Сообщение 441452)
Тем, что в первом случае в массив пишется одно значение, равное всей строковой переменной
var a = '1,2,3';
var b = [];
b = [a];
alert(b.length);
alert(b[0]);

Понятно,спасибо.

Dilettante_Pro 19.01.2017 18:13

Цитата:

Сообщение от ureech
У меня так же. Не работает.

Где так же? Значит, не совсем так

ureech 19.01.2017 18:22

Я скопировал ваш код в песочницу и проверил. Средний график отсутствует.
http://codepen.io/Ureech/pen/VPPJpb

Dilettante_Pro 19.01.2017 18:49

Действительно, что-то никак не хочет
<div class="col-xs-12 col-xl-6">
<div id="chart_1" class="chart"></div>
</div>
<div class="col-xs-12 col-xl-6">
<div id="chart_2" class="chart"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://dieta.ewbolg.ru/templates/_default_/js/highcharts.js"></script>
<script>
var chart1, chart2;

// Once DOM (document) is finished loading
$(document).ready(function() {
  var leg = "15,15,18,40,30,25,60,60,80,70";
  var legs = leg.split(",");  
  alert(legs.length);

    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'line',
        height: 350,
     },
     title: {
        text: 'Изменение размеров шеи,талии и бёдер за 10 недель в %'
     },
     xAxis: {
        categories: [1,2,3,4,5,6,7,8,9,10]
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Талия',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Бёдра',
        data: legs
     }, {
        name: 'Шея',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });
})

</script>

причем с
var legs = [15,15,18,40,30,25,60,60,80,70];
работает

ureech 19.01.2017 21:26

Возможно нужно подставлять массив
Array [ "145.00","0.00","0.00","0.00","0.00","0.00","0 .00" ], но убрать кавычки.

ureech 20.01.2017 09:54

Вопрос решил.Всем большое спасибо.
var leg = "15,15,18,40,30,25,60,60,80,70";
var legs = leg.split(",");
for(var i=0; i<legs.length; i++) {
    legs[i] = +legs[i];
}

ureech 21.01.2017 16:50

Блин, теперь застрял на получении нескольких строк. Раннее в запросе к базе был один параметр
SELECT hip...
Теперь два
SELECT hip,neck...
........
            while ($data = $inDB->fetch_assoc($result)) {                
			   $list['hip']       =  $data['hip'];
			   $list['neck']     =  $data['neck'];
            }
echo json_encode($list);

Пытаюсь получить на выходе, в аяксе две строки и никак. Пробую уже с помощью json хоть что то получить
$.ajax({
		url:'/dieta/admin/full-report.html',
		data:{grf: '1',ot:ot,to:to},
		dataType:'json',
		success : function (data) {
		for(var i=0; i<data.length; i++) {
        var res1 = (data.hip[i]);
        var res2 = (data.neck[i]);
			}
})


Ничего не выходит. {"hip":"0.00","neck":"0.00"},те последнии значения и ошибка
TypeError: data is undefined
Подскажите как решить.Уже устал тыкаться.

ureech 21.01.2017 22:45

С этим вроде разобрался. Имею в data
[{"hip":"140","neck":"58"},{"hip":"145","neck":"55"}]

success : function (data) {
		var res1 = [];
		for(var i=0; i<data.length; i++) {
        res1 += data[i].hip;				
			}
		console.log(hip) //140145
}

Но при hip.split(',') не хочет разделять числа запятой.Упорно выводит
array["140145"]
Почему?

laimas 22.01.2017 04:42

Зачем отдавать клиенту ассоциативный массив, если ему требуется индексный?


Часовой пояс GMT +3, время: 10:06.