Hi guys. I'm a novice developer (fresh out of high school intern to be specific). The company I'm interning at currently uses Adobe Flex for the UI of one of our systems, and I'm trying to port it to HTML5 and JavaScript so it will be compatible will the mobile/tablet platform.

Basically, the system downloads hoards of data off of our server and displays it in a chart format on the browser. It supports drill-downs, meaning that you can narrow down and display charts more specific to what you're looking for. I'll show an example below.


What we have here is mobile video data. If I wanted to drill down, say, on the OS, I would click the chart to make the drop down box appear, find OS, and click it.


Clicking OS would make another chart appear on the right, with specific information about the OS. I could continue to drill-down and make more and more charts appear. Once there are already 3 charts displaying, an arrow bar will appear on the left to view older charts if you continue to drill down.

I need to know how I can do this in JavaScript to run on iPads and Android tablets. The data is still all available on the server side, I'm simply developing the client-side UI. I've been looking into jQuery and it seems like the way to go, but if there are better ways I can look into that as well. Also- I was not the developer on the Flex end, so I'm unsure of what code they used, and it might be closed or locked.

Does anybody know how I can do this? Thanks!