How To Display Json Response Into A Bootstrap Chart With SpringMvc?

JavaScript
1

I’m developing a web application with spring Mvc and I’m trying to display data from my database to this bootstrap chart

As you can see from the previous link ,these are the static data displayed in the example in the javascript code :

 $.getScript('http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js',function(){
 $.getScript('http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js',function(){

Morris.Area({
element: 'area-example',
data: [
{ y: '1.1.', a: 100, b: 90 },
{ y: '2.1.', a: 75,  b: 65 },
{ y: '3.1.', a: 50,  b: 40 },
{ y: '4.1.', a: 75,  b: 65 },
{ y: '5.1.', a: 50,  b: 40 },
{ y: '6.1.', a: 75,  b: 65 },
{ y: '7.1.', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});

I want to put my data ,extracted from the database, in the place of the previous static data.

I’ve tried to extract data from my database and convert it to json so that it could be read from javascript this is the json format that I had:

[{"time":11:01,"val1":"123","val2":"124","val3":"11","val4":"140","val5":"100"},
{"time":11:11,"val1":"140","val2":"100","val3":"13","val4":"100","val5":"120"}]

I’ve made some modifications on the previous javascipt code :

$.ajax({
type: "GET",
contentType : 'application/json; charset=utf-8',
dataType : 'json',
url: "/json",
data: ,
success :function(json) {

 $.getScript('http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js',function(){
$.getScript('http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js',function(){

 Morris.Area({
 element: 'area-example',
data: y:json.time, a:json.val1,b:json.val2
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
});
});
});

but still not working. :cry:
any help please or any directions ? :sob:

2

You’re close, you can map of the json data to transform it into another form.

var data = json.map(function(item) {
  return {
    y: item.time,
    a: item.val1,
    b: item.val2
  }
});

Morris.Area({
  data: data
});
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.