5

So I've been asked to add an additional layer of labels to a bar chart built with ZingChart. We essentially have a single series column chart that plots ratings for criteria, within sub categories, for a specific category.

Currently sub categories don't play a role in the chart at all, as I plot the rating for each criteria within a category. How do I 'group' the criteria together so the labels would show each criteria name, with the sub category grouping the labels together.

Also I can't make use of multi-series data, with a legend as each column is colored according to its rating/value, so a color-coded legend would be pointless as I understand it.

Merrily
  • 1,686
  • 10
  • 14
thorne51
  • 588
  • 7
  • 23

1 Answers1

4

Full disclosure, I'm a member of the ZingChart team.

I'm a bit unsure of exactly what you want but I have taken a stab at creating your chart here.

This chart utilizes custom tokens, prefixed by the data-. As well as our valueBox text attribute. We add two custom tokens into our series object

    {
        values: [25,42,67,89,15,34,67,85],
        text:'Rating 1', // Standard plot/legend text
        'data-sub-text':['SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1'],
        'data-sub-rating':[1,2,3,4,5,6,7,8]
    }

From here we can access all these values on hover with tooltips or if we want to always display that value, like a label, we can use valueBox.

plot:{
  valueBox:{
    placement:'top', // Put the valueBox above the bar
    text:'%t: %v <br> %data-sub-text: %data-sub-rating',
    backgroundColor:'#000'
  }
}


var myConfig = {
  type: "column", 
  plot:{
    barWidth:15,
    valueBox:{
      placement:'top',
      text:'%t: %v <br> %data-sub-text: %data-sub-rating',
      backgroundColor:'#000'
    }
  },
 series : [
  {
   values : [25,42,67,89,15,34,67,85],
   text:'Rating 1',
   'data-sub-text':['SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1','SubRating 1'],
   'data-sub-rating':[1,2,3,4,5,6,7,8]
  }
 ]
};

zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: 400, 
 width: 600 
});
<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
  <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>

 </head>
 <body>
  <div id='myChart'></div>
 </body>
</html>

Please let me know If I did not answer your question appropriately.

nardecky
  • 2,623
  • 8
  • 18
  • Thanks @nardecky, great library btw. Not quite what I had in mind. Here's a pic I drew quick to illustrate what was requested from me to build: https://drive.google.com/file/d/0B_dtw2ENIC_ldnBxblVBb2hYTkk/view?usp=drivesdk – thorne51 Jul 12 '16 at 18:31
  • I have created a new [demo](http://demos.zingchart.com/view/YGBEFC2J) using similar techniques from above. I would suggest implementing the criteria with valueBox and/or tooltips and the sub category on the x-axis label. This is the most fluid to read IMO. The constraints of the image would be drawing the lines to group the bars. You can do this, but the graph will not be responsive so I avoided this approach. If that is a client must have, I can create a demo for that as well. – nardecky Jul 13 '16 at 17:49