JustinShilot Posted May 15, 2014 Report Share Posted May 15, 2014 New to Caspio, have had trouble finding what I'm looking for in the "howto", can someone point me in the right direction? I have an excel document with multiple tabs with data on each. I am able to import that data into a table and make a datapage that displays a chart for each individual tab. So, multiple charts. What I'd like to do is have a dropdown with the name of each individual chart. When you choose a name and hit submit, it takes you to the corresponding chart. Is that possible in Caspio? Quote Link to comment Share on other sites More sharing options...
casGary Posted May 19, 2014 Report Share Posted May 19, 2014 Hi jshilot, Here is a suggestion for you. Let's say you have two charts to select from 1. Create datapages with the predefined search criterias, based on the tabs of your table and embed them to your HTML page to different <div> tags (with IDs block1 and block2). 2. Make all the <div> tags hidden by default. 3. Create a dropdown with the necessary options <select id="mysel"> <option>1</option> <!-- 1 and 2 are the names of your charts, it may be whatever --> <option>2</option> </select> each option will be showing some particular <div> 4. Create a "show" button <input type="button" value="show" onclick="myHtml()"> 5. insert the following script to the <head> of your page. <script type="text/javascript"> function myHtml() { var aSelected = document.getElementById('mysel').options[mysel.selectedIndex].text; if (aSelected == '1') { //1 is the name of the chart same as in dropdown document.getElementById('block1').style.display = 'block'; document.getElementById('block2').style.display = 'none'; } else if (aSelected == '2') { //2 is the name of the chart same as in dropdown document.getElementById('block1').style.display = 'none'; document.getElementById('block2').style.display = 'block'; } } </script> quantity of "if else" instructions may vary with the different quantity of your charts. Let me know how it works Quote Link to comment Share on other sites More sharing options...
JustinShilot Posted May 19, 2014 Author Report Share Posted May 19, 2014 Not what I had in mind - but looks to be working close to what I was hoping for! The only issue I'm having is with hiding the <div>. I'm admittedly not the strongest coder in the world. This is what I was trying: <div id="block2" style="display:none"> This technically works, but my chart is coming through looking strange and crunched for some reason. Using the iframe version of the data page, not sure if that helps. Seems like the style is messing with the chart in some way. Any better ideas on how to hide it? Thanks so much for your help! Quote Link to comment Share on other sites More sharing options...
casGary Posted May 20, 2014 Report Share Posted May 20, 2014 Have you got a screenshot? Maybe it's necessary to play with styles a little bit. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.