2015-09-15 2 views
5

Я хочу добавить данные в бар-график Morris через ajax. Ниже приводится JSON, который я получаю в Ajax успехаКак добавить динамические данные в диаграмму morris

[{"x":"2014-10-02","y":"1"},{"x":"2014-10-19","y":"1"},{"x":"2014-10-20","y":"1"},{"x":"2014-11-13","y":"1"}]

Ниже приведен код JS

var chart = Morris.Bar({ 
     element : 'normal-bar-graph', 
     data : [{ 
      "x" : null, 
      "y" : null 
     }], 
     xkey : 'x', 
     ykeys : ['y'], 
     labels : ['Added'] 
    }); 
$.ajax({ 
      type: "POST", 
      url: "some_url", 
      data: {'user_report':[k,v]}, 

      success: function(html)      
      { 
       if(html == "error") 
       { 
       alert('error'); 
       } 
       else 
       { 
        chart.setData(html); 

       } 
       hide_loading(); 
      } 
     }); 

я использую /morris/raphael.2.1.0.min.js и /morris/morris.min.js. Функциональность chart.setData(html); не работает, как указано в документации Morris.

заблаговременно. пожалуйста, сообщите мне, если возникла какая-либо ошибка.

также сделали jsbin, если это может помочь: morris

ответ

4

Удалить кавычки. setData ожидает массив. Когда вы используете кавычки, он преобразует это в строку вместо массива.

chart.setData([{ "y": "2006", "a": 100, "b": 90 },{ "y": "2006", "a": 100, "b": 90 }]);

+0

Но это показывает только один график. Также, когда я хочу получить данные через ajax, 'chart.setData()'. – dhpratik

+0

@dhpratik: Что вы подразумеваете под «* он показывает только один график *»? Решение, приведенное выше, должно работать, иначе вы не расскажете нам всю картину. – D4V1D

+1

Да. Похоже, это из-за ошибки - https://github.com/morrisjs/morris.js/issues/105 Обновите свои скрипты до последней версии гистограммы Morris, и все работает. http://jsbin.com/kiduwuseda/edit?html,js,output. Но мое оригинальное решение _is_ исправить на ваш вопрос. – afrin216

Смежные вопросы