2015-02-17 2 views
1

Я использую плагин jquery с именем flot, чтобы создать некоторые графики для меня в моем веб-приложении весны mvc.jquery flot chart ajax source/json data transform

Пример, который я следую за загрузкой графика флота из вызова ajax с использованием данных json, можно найти здесь http://www.flotcharts.org/flot/examples/ajax/.

Этот пример показывает, что данные загружены в формате JSON на графике в этом формате ...

{ 
     "label": "Japan", 
     "data": [[1999, -0.1], [2000, 2.9], [2001, 0.2], [2002, 0.3], [2003, 1.4], [2004, 2.7], [2005, 1.9], [2006, 2.0], [2007, 2.3], [2008, -0.7]] 
    } 

Перемещение на мои данные сейчас, у меня уже есть контроллер JSon, который предоставляет данные, которые я хочу в графике но в другом формате ...

[ 
    { 
     "businessDate": "2015-02-10", 
     "thisYear": 20067, 
     "lastYear": 19252 
    }, 
    { 
     "businessDate": "2015-02-11", 
     "thisYear": 21733, 
     "lastYear": 19365 
    }, 
    { 
     "businessDate": "2015-02-12", 
     "thisYear": 28192, 
     "lastYear": 21982 
    } 
]  

Мой вопрос, как я могу получить Flot читать этот тип strucutre JSON данных? Ниже приведено то, что я собираюсь появиться на графике.

В качестве альтернативы, если это не представляется возможным, как я могу превратить мой JSON вернулся в то, что появляется ниже после получения JSON назад от АЯКС вызова (с помощью JQuery) ....

{ 
    "label": "ThisYear", 
    "data": [[2015-02-10, 20067], [2015-02-11, 21733], [2015-02-12, 28192]] 
} 

{ 
    "label": "LastYear", 
    "data": [[2014-02-10, 19252], [2014-02-11, 19365], [2014-02-12, 21982]] 
} 

благодаря

+1

Два варианта; один, вы модифицируете свой контроллер для создания JSON в формате флота или два, после того как вы получите json, вы пишете javascript, чтобы поместить его в формат, необходимый для флота. Кроме того, этот '[2015-02-10, 20067]' является ** не ** действительным javascript. Вам нужно решить, будете ли вы обрабатывать эти даты как в реальном времени, так и в виде категорий строк. – Mark

+0

спасибо. Это помогло мне. Я был немного запутан, хотя. Я подумал об этом намного больше, чем вам сказали, что это неверно. Javascript – Richie

ответ

2

Если вы вернете из своего бэкэнда следующий json, формат даты вызовет у вас некоторую головную боль. Вы должны отправить дату в timestamp, которая проста для jquery flot. Обратите внимание на то, что UNIX TIMESTAMP в секундах и должно быть умножено на 1000, чтобы соответствовать JavaScript метки, которые находятся в миллисекундах:

{ 
    "label": "LastYear", 
    "data": [[2014-02-10, 19252], [2014-02-11, 19365], [2014-02-12, 21982]] 
} 

Return это вместо того, чтобы и JQuery флот сделает гладкой:

{ 
    "label": "LastYear", 
    "data": [[1392008400000, 19252], [1392094800000, 19365], [1392181200000, 21982]] 
} 
Смежные вопросы