Просмотр полной версии : Как вставить данные в highcharts?
Данные хранятся в БД, через ajax успешно выгружаются на страницу. Но как их отдать highcharts для отрисовки графиков по этим данным? Данные приходят в виде json и имеют вид
[{name: "",count: "",time: ""},{name: "",count: "",time: ""},{name: "",count: "",time: ""},{name: "",count: "",time: ""}...]
на одной диаграмме будет несколько графиков. График идентифицируется по "name" данные для него хранятся в count, по xAxis нужно откладывать "time".
Я правильно понимаю что в highcharts есть средства для перебора и сортировки данных из json? или нужно самому перебирать json, переписывать в массив и подставлять уже готовое?
Dilettante_Pro
05.08.2016, 13:58
user71,
EXTERNAL DATA LOADING
Highcharts takes the data in a JavaScript array, which can be defined in the local configuration object, in a separate file or even on a different site. Furthermore, the data can be handled over to Highcharts in any form, and a callback function used to parse the data into an array.
http://www.highcharts.com/products/highcharts
Вроде обещают...
Dilettante_Pro,
хорошо, а как указать ему что есть что?
в js элементом массива может быть функция или переменная?
На данном этапе не получается ничего. Кидаю json в data не получаю ничего. подставляю к дате функцию для парсинга даты - вообще белый экран даже ajax запрос не отработал.
warren buffet
05.08.2016, 21:38
Вот тут читай, за тебя нашел http://www.highcharts.com/docs/working-with-data/data-from-a-database
И еще, если у тебя такие данные и приходят - {name: "",count: "",time: ""} - то никаких чартов ты не получишь вообще.
ну там в кавычках данные конечно, разумеется.
Это я уже читал. Там в примере пхп у меня нету пхп у меня только js и на клиенте и на сервере.
Вот тут в примере
$data[] = "[$datetime, $value]";
т.е они передают массив а не объект. и перебирает этот массив пхп.
series: [{
data: [<?php echo join($data, ',') ?>]
}]
а у меня еще в каждом объекте есть свойство "name" и в зависимости от его значения data будет разная. Грубо говоря 3 линии по "name".
user71,
пример формата данных с датой
http://jsfiddle.net/9wy1a610/
warren buffet
06.08.2016, 05:49
Грубо говоря 3 линии по "name".
Значит надо группировать по name. Ты решил что скрипт это сделает за тебя? Наверно он это может, но ты же не станешь читать документацию. То есть требуется транспонирование массива.
warren buffet,
Я не решил, я спрашиваю сделает/не сделает? если сделает то как это организовать? что куда записать надо? Документацию я читаю почему нет то. Но в доках не понятны лично мне некоторые куски кода. а пояснений к ним никаких нет. Ну вот к примеру.
$.getJSON(url, function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
вот это вот "options.series[0].data = data" это что такое? для чего и куда?
а в других примерах они пишет так:
series: [{
data: [<?php echo join($data, ',') ?>]
}]
почему?
а в других примерах они пишет так:
то и другое одно и тоже
почему тогда я не могу туда подставить for(i in data) options.series[i].data = data.counter;
user71,
странное преобразование
Да согласен. что то я поспешил. что то тут не то.
for(i in data) options.series[0].data = data[i].counter;
вот так вот должно быть. Перебираем все элементы массива, каждый элемент - объект => берем его свойство и складываем в другой массив. Но так как у меня еще и по именам надо сортировать сюда придется приделать if а то и switch case.
series: [{
data: [<?php echo join($data, ',') ?>]
}]
вот этот вот код вынутый из доков грит нам о том что series УЖЕ массив объектов и именно массив объектов я получаю из сиквела беда в том что имена свойств разные и data[0-100000000].counter
Я уже не знаю может есть другие библиотеки для отрисовки графиков в которых нарисовать JSON как то проще?
Мне вот это решение с вложенными циклами не нравится тем что итераций там будет действительно много счет идет на миллионы и я не думаю что это будет быстро. Возможно разрабы highcharts подумали о таком и придумали какой то алгоритм работающий побыстрее.
Пока писал подумалось может быть сиквел этой проблемой озадачить? всмысле сформировать запрос который бы выдавал массив значений counter и time, а name сделать один на запрос?
warren buffet,
в доках вот нашел скрипт может складывать по name, но как ему этот name передать?
user71,
какая проблема то преобразовать один обьект в другой если на сервере этого сделать не смогли? напишите пример вашего json хоть один элемент
рони,
так не вопрос можно и на сервере. Я просто что то не понимаю видимо, но js объектно ориентированый язык, все есть объект, я получаю с сервера данные в виде объекта, передаю объект в сиквел на запись, потом читаю из сиквела и то же получаю объект, передаю его по сети клиенту, вставляю в график опять объект. И все вроде бы замечательно только почему эти объекты ниразу несовместимы друг с другом. Все эти объекты непременно надо переделать иначе оно не работает. Я просто не верю что разрабы того же highcharts не подумали о том что данные в их таблицы будут пихать из сиквела а из сиквела они приходят именно таким объектом а не тем который надо вставить.
json сейчас выложу. У сервака какие то проблемы с ип к бд доступ пока получить не могу
user71,
не понимаю что вы пишите, читайте документацию ищите нужный вам метод обработки данных или преобразуйте ваши данные в нужный формат.
[{"ind":1,"create_at":"2016-07-29T11:40:23.000Z","name":"user1","counter":5,"counter2":8},{"ind":2,"create_at":"2016-07-29T11:40:23.000Z","name":"user2","counter":2,"counter2":9},{"ind":3,"create_at":"2016-07-29T11:40:23.000Z","name":"user3","counter":0,"counter2":4},{"ind":4,"create_at":"2016-07-29T11:40:23.000Z","name":"user4","counter":2,"counter2":0}]
рони,
хорошо где в доках описаны методы обработки?
хорошо где в доках описаны методы обработки?
Сперва получайте данные уже отсортированные SQL запросом, а получить из них родителей->потомков уже будет не сложно.
laimas,
несколько ajax запросов? или вы имеет ввиду просто сделать сортировку по именам в пределах одного запроса. т.е на выходе будет json а имена по порядку.
В чем у вас проблема - расфасовать данные или ...? Если первое, то запрос должен возвращаться отсортированным согласно их принадлежности, чего там у вас name-time-count? Ну так получайте, а кроме как проходом в цикле этих данных нельзя (хотя можно и пересечением массивов такое сотворить) получить из них name=>[[time, count], [time, count], ...].
user71,
какими данными оперировать из вашего примера #19 ?
в примере ниже данные продублированы на следующий день.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
var data = [{"ind":1,"create_at":"2016-07-29T11:40:23.000Z","name":"user1","counter":5,"counter2":8},{"ind":2,"create_at":"2016-07-29T11:40:23.000Z","name":"user2","counter":2,"counter2":9},{"ind":3,"create_at":"2016-07-29T11:40:23.000Z","name":"user3","counter":0,"counter2":4},{"ind":4,"create_at":"2016-07-29T11:40:23.000Z","name":"user4","counter":2,"counter2":0},{"ind":1,"create_at":"2016-07-30T11:40:23.000Z","name":"user1","counter":5,"counter2":8},{"ind":2,"create_at":"2016-07-30T11:40:23.000Z","name":"user2","counter":2,"counter2":9},{"ind":3,"create_at":"2016-07-30T11:40:23.000Z","name":"user3","counter":0,"counter2":4},{"ind":4,"create_at":"2016-07-30T11:40:23.000Z","name":"user4","counter":2,"counter2":0}]
var obj = data.reduce(function(a, b) {
if (!a[b.name]) a[b.name] = [];
a[b.name].push([+new Date(b.create_at), +Math.min(+b.counter, +b.counter2), +Math.max(+b.counter, +b.counter2)]);
return a
}, {});
data = Object.keys(obj).map(function(key) {
return {
name: key,
type: "arearange",
data: obj[key].sort(function(a, b) {
return b[0] - a[0]
})
}
});
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: data
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
рони,
Благодарю за интересный пример кода. А может ли это сделать сам highcharts? Таким вот образом всегда приходится поступать в javascript или это просто неудачное стечение обстоятельств? Я про преобразовпния массива
user71,
мне вас сложно понять, все ответы вы уже получили ранее.
рони,
А этот код можно объявить как структуру или прототип функции или только непосредственно вставить в ajax?
https://msdn.microsoft.com/ru-ru/library/64973255.aspx
user71,
я не знаю C++, поэтому не понимаю о чём вы говорите, особенно не понимаю какая проблема сформировать нужный массив на сервере.
код ниже это всё чем я могу вам ещё помочь
$(function() {
$.getJSON(url, function(data) {
var obj = data.reduce(function(a, b) {
if (!a[b.name]) a[b.name] = [];
a[b.name].push([+new Date(b.create_at), +Math.min(+b.counter, +b.counter2), +Math.max(+b.counter, +b.counter2)]);
return a
}, {});
data = Object.keys(obj).map(function(key) {
return {
name: key,
type: "arearange",
data: obj[key].sort(function(a, b) {
return b[0] - a[0]
})
}
});
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: data
});
});
});
Жаль. Все равно спасибо вам огромное. Вы мне очень помогли.
Я на js всего лишь вторую неделю пытаюсь писать может еще не знаю как что называется -) вот вы меня и не поймете ни как.
рони,
у меня новая беда. Он точки не все отмечает. в бд они есть а на графике нет!
obj = data.reduce(function(a, b) { if (!a[b.name]) a[b.name] = []; a[b.name].push([+new Date(b.create_at), +b.counter]);return a},{});
чуть изменил ваш код
user71,
толи была проблема и вы её решили, толи проблема есть?
http://blkst.xyz/graph.jpg
тут должно быть 10к точек. Вот линии которые по диагонали они без точек а в бд инфа то есть
user71,
http://savepic.net/
user71,
вашей картинки не видно залейте по ссылке выше
Кажется я понял в чем дело. Данных в бд действительно нет. Только даты не совпадают. Разница 3 часа между тем что пишет график и тем что написано в бд
Разница 3 часа между
формирование +new Date(b.create_at),
нужна UTC
[{"ind":317,"create_at":"2016-07-30T14:26:06.000Z" это в json приходит
317 | 2016-07-30 17:26:06
он же в бд
user71,
число даты сформировать на сервере можно?
user71,
как вариант ...
(+new Date(b.create_at)+(new Date).getTimezoneOffset()*60000)
сделал такой кастыль new Date(b.create_at)+10800000.
Конечно можно. Я вот уже раздумываю чтобы с sql сделать чтобы он другие даты выдавал
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot