3

I have the following json and I need to create a grid and also above the grid need to show vertical lines based on the values :

var arr = [];

 arr= [
   {"Measure":"Air Pollution","Rank":"1","Value":"15.5"},
   {"Measure":"Water Pollution","Rank":"2","Value":"13.5"},
   {"Measure":"Soil Erosion","Rank":"3","Value":"10.5"}
 ]

Now I need to create a grid and above the grid, need to create vertical bars based on the "Value". There will be 3 bars created since there are 3 Values. Now when 1st row in the grid is selected, the first vertical bar needs to be highlighted . Similarly, when the 1st vertical bar is selected, the 1st row in the grid to be selected. Creating the grid is not a problem since I am using KendoUI grid but to create the vertical bars and the selection is the one where I am stuck . Any views ?

Thanks.

4
  • Can you post some code, particularly the part where you get stuck?
    – Mr Lister
    Apr 12, 2012 at 7:17
  • As a workaround, I think you can create divs and set different heights based on the value and a small width (1px) to make them look like a line
    – Bogdan M.
    Apr 12, 2012 at 7:30
  • how to create those divs based on the VALUES ?
    – Anirban
    Apr 12, 2012 at 7:38
  • For creating the bars I do not have any line of code .... I can send you how I am creating the grid, but that is very basic ....
    – Anirban
    Apr 12, 2012 at 7:39

2 Answers 2

1

Based on @Bogdan M.'s suggestion on using div elements, I've set up a jsFiddle demonstrating vertical bars built using jQuery. It relays on the input of values as an array of numbers, and converts those to DOM elements, setting their height accordingly.

This demo can be very easily updated to use the OP's supplied data structure, and selection behavior functionality can be added as well.

This final version (contains the complete solution, both for building the component and for assigning it with selection behavior) can be seen in the full demo on jsFiddle.

All that's left now is to assign handlers for the selection functionality - as cell / row listeners - to the KendoUI grid.

2
  • check out the re-edited fiddle, i've updated my answer, i think you'll like it... Apr 12, 2012 at 8:58
  • Thanks again. I didn't see your updated fiddle but did the same thing :)
    – Anirban
    Apr 12, 2012 at 20:34
1

I see that you aim to visualize your data as a bar-chart. If so, don't re-invent the wheel. there are a lot of good JS libraries designated for that purpose.

I've had a good experience using HighCharts, try it out.

Disclaimer: This may be an overkill, but is a suited solution should the component be generic (for future compatibility with flexible data)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.