3 Replies - 1268 Views - Last Post: 24 August 2019 - 10:02 AM

#1 rahma2   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 25-April 16

how to display Json response into a bootstrap chart with SpringMvc ?

Posted 25 April 2016 - 03:08 AM

I'm developing a web application using `spring MVC` .

I'm trying to display data from my database into 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:

@RequestMapping(value = "/json", method = RequestMethod.GET)
 public @ResponseBody List<User> jsonresponse(Model model) {
     model.addAttribute("user", new User());
     List<User> l= new ArrayList<User>();
       l=this.userService.getUserList();
    return l;
 }


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


I have tried to modify the javascript code as below :


$.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, I hava a blank page !

My problem is that I need only the two first data to be displayed in the chart I don't know how to extract it from the json and put it in the javascript of the chart

I'm new with json and javascript any help is really apreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: how to display Json response into a bootstrap chart with SpringMvc ?

#2 rahma2   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 25-April 16

Re: how to display Json response into a bootstrap chart with SpringMvc ?

Posted 26 April 2016 - 04:16 AM

is it impossible to do this ?

if it's impossible, could someone tell me this , so that I can search to use something else :huh:
Was This Post Helpful? 0
  • +
  • -

#3 ndc85430   User is offline

  • I think you'll find it's "Dr"
  • member icon

Reputation: 981
  • View blog
  • Posts: 3,868
  • Joined: 13-June 14

Re: how to display Json response into a bootstrap chart with SpringMvc ?

Posted 26 April 2016 - 04:42 AM

Of course it's possible. Web services built using, e.g. REST often send/receive data in JSON.

Is the server side code actually sending a response whose body is JSON? I can't tell from the code snippet you've provided. Perhaps you could also try adding an error callback in the data you're passing to $.ajax() so you can see if your request is failing.

Also, remember to check your browser console for any errors.
Was This Post Helpful? 0
  • +
  • -

#4 sanjaysingh10   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 24-August 19

Re: how to display Json response into a bootstrap chart with SpringMvc ?

Posted 24 August 2019 - 10:02 AM

View Postndc85430, on 26 April 2016 - 04:42 AM, said:

Of course it's possible. Web services built using, e.g. REST often send/receive data in JSON.

Is the server-side code actually sending a response whose body is JSON? I can't tell from the code snippet you've provided. Perhaps you could also try adding an error callback in the data you're passing to $.ajax() so you can see if your request is failing.

Also, remember to check your browser console for any errors.


Thank you for your advice
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1