draw vertical lines using jquery

Question

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.

Answer 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)

Answer 2

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.