How do I create a stacked Bar chart using JSON?


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Ananth on 6th December 2016
Hi how can i use staked graph using JSON data?

[{
   "FIELD1": "Richard",
   "FIELD2": 8,
   "FIELD3": 4,
   "FIELD4": 7,
   "FIELD5": 6,
   "FIELD6": 5,
   "FIELD7": 3,
   "FIELD8": 4
  }, {
   "FIELD1": "Dave",
   "FIELD2": 7,
   "FIELD3": 4,
   "FIELD4": 6,
   "FIELD5": 9,
   "FIELD6": 5,
   "FIELD7": 8,
   "FIELD8": 7
  }, {
   "FIELD1": "Luis",
   "FIELD2": 4,
   "FIELD3": 3,
   "FIELD4": 5,
   "FIELD5": 2,
   "FIELD6": 6,
   "FIELD7": 5,
   "FIELD8": 4
  }, {
   "FIELD1": "Kevin",
   "FIELD2": 4,
   "FIELD3": 2,
   "FIELD4": 8,
   "FIELD5": 9,
   "FIELD6": 6,
   "FIELD7": 7,
   "FIELD8": 3
  }, {
   "FIELD1": "Joel",
   "FIELD2": 4,
   "FIELD3": 5,
   "FIELD4": 1,
   "FIELD5": 3,
   "FIELD6": 5,
   "FIELD7": 8,
   "FIELD8": 6
  }, {
   "FIELD1": "Pete",
   "FIELD2": 4,
   "FIELD3": 5,
   "FIELD4": 6,
   "FIELD5": 3,
   "FIELD6": 5,
   "FIELD7": 8,
   "FIELD8": 6
  }
]
Posted by Richard on 7th December 2016
Hi,

Something like this - ie just formatting the JSON into two usable arrays:


www.rgraph.net/fiddle/view.html/a-bar-chart-retrieving-its-data-from-json





Richard
Posted by Ananth on 9th December 2016
this one works for me thank you! can you please tell me how we need to add click event on each color/item and data labels also if we have the JSON value is like 15 or so the bar is getting shrink-ed and the x-axis label is overlapping so do we have any option to change that x-axis label angle?
Posted by Richard on 9th December 2016
Hi there,

> this one works for me thank you! can you please tell me how we need to add click event
> on each color/item and data labels

I've updated the example to include a click and mousemove handler. So when you click on a segment it alerts the index. Just change that to do what you want based on that index.

> also if we have the JSON value is like 15 or so the
> bar is getting shrink-ed and the x-axis label is overlapping so do we have any option
> to change that x-axis label angle?

Yes - the textAngle option (and also the labelsOffsety option). But you'll also need to change the textAccessible option to false too.




Richard
Posted by Ananth on 12th December 2016
Hi ,

text angle is not working, not sure if that is because of bootstrap, so does this chart does not work if we integrate web application with Bootstrap
Posted by Richard on 12th December 2016
Hi there,

As mentioned, for textAngle to work you'll also need to set textAccessible to false.



Richard
Posted by Ananth on 12th December 2016
Hi Richard,

i am able to fix it with bar.Set('chart.gutter.bottom', 300);

Thanks,
Ananth

Add a reply

 




« Back to message list
RGraph on social media