Как вставить данные в highcharts?
Данные хранятся в БД, через ajax успешно выгружаются на страницу. Но как их отдать highcharts для отрисовки графиков по этим данным? Данные приходят в виде json и имеют вид
Код:
[{name: "",count: "",time: ""},{name: "",count: "",time: ""},{name: "",count: "",time: ""},{name: "",count: "",time: ""}...] Я правильно понимаю что в highcharts есть средства для перебора и сортировки данных из json? или нужно самому перебирать json, переписывать в массив и подставлять уже готовое? |
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 запрос не отработал. |
Вот тут читай, за тебя нашел http://www.highcharts.com/docs/worki...rom-a-database
И еще, если у тебя такие данные и приходят - {name: "",count: "",time: ""} - то никаких чартов ты не получишь вообще. |
ну там в кавычках данные конечно, разумеется.
Это я уже читал. Там в примере пхп у меня нету пхп у меня только js и на клиенте и на сервере. Вот тут в примере $data[] = "[$datetime, $value]"; т.е они передают массив а не объект. и перебирает этот массив пхп. series: [{ data: [<?php echo join($data, ',') ?>] }] а у меня еще в каждом объекте есть свойство "name" и в зависимости от его значения data будет разная. Грубо говоря 3 линии по "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,"coun ter2":8},{"ind":2,"create_at":"2016-07-29T11:40:23.000Z","name":"user2","counter":2,"coun ter2":9},{"ind":3,"create_at":"2016-07-29T11:40:23.000Z","name":"user3","counter":0,"coun ter2":4},{"ind":4,"create_at":"2016-07-29T11:40:23.000Z","name":"user4","counter":2,"coun ter2":0}]
|
рони,
хорошо где в доках описаны методы обработки? |
Цитата:
|
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? |
|
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,
толи была проблема и вы её решили, толи проблема есть? |
тут должно быть 10к точек. Вот линии которые по диагонали они без точек а в бд инфа то есть |
user71,
http://savepic.net/ |
user71,
вашей картинки не видно залейте по ссылке выше |
Кажется я понял в чем дело. Данных в бд действительно нет. Только даты не совпадают. Разница 3 часа между тем что пишет график и тем что написано в бд
|
Цитата:
нужна 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) |
Часовой пояс GMT +3, время: 23:38. |