How to add dynamic data to a morris histogram

Question

I want to add data to a Morris bar chart via ajax. Below is the json I get with ajax success

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

following js code

 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(); } }); 

am using /morris/raphael.2.1.0.min.js and /morris/morris.min.js . Functionality chart.setData(html); doesn't work as morris documentation says.

Thanks in advance. Please inform me if any error occurred.

also made jsbin if this can help: morris

Answer 1

Remove quotes. setData expects an array. When you use quotation marks, it converts this to a string instead of an array.

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