I_Hate_Midgets
New Member
I'm trying to create a bar graph. I'm having trouble with a bunch of the code, but the biggest problem is that I can't seem to create a loop that will take the data in my sampleData array and create a new div each time and append it to the next div and so on. For now I've simple created 5 divs, but I don't many I will need.Also, I'd like to hover over the bar and see the number of items. \[code\]<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/12735391/testMyJson.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script > $(document).ready(function() { $.support.cors = true; $.ajax({ url:'https://www.sciencebase.gov/catalog/items?q=Fish&max=20&format=json', type: "GET", dataType: "json", success: function( response ) { var sampleData = http://stackoverflow.com/questions/12735391/[25,7,19,22,150]; //for (var i = 0; i < 5; i++) { $('#super-skill-1').animate( { height:sampleData[0] + 'px' } ); $('#super-skill-2').animate( { height:sampleData[1] + 'px' } ); $('#super-skill-3').animate( { height:sampleData[2] + 'px' } ); $('#super-skill-4').animate( { height:sampleData[3] + 'px' } ); $('#super-skill-5').animate( { height:sampleData[4] + 'px' } ); //} }, error: function(jqXHR, textStatus, errorThrown) { alert("Ajax Call Failed - textStatus =" + textStatus + ", errorThrown = " + errorThrown);}});});</script><style>.the-container { width:400px; height:250px; border-style: solid; border-width:3px; border-color:black }.the-container ul { margin:0; padding:0; list-style:none; }.the-container li { width:30px; height:250px; margin:0 5px; position:relative; float:left; }.the-container li a { position:absolute; bottom:0; width:100%; height:0; background-color:#ccc; }.the-container li a:hover { background-color:green; }</style></head><body><div class="the-container"><ul><li><a id="super-skill-1" href="http://stackoverflow.com/questions/12735391/#" class="tooltip" title=sampleData[0]></a></li><li><a id="super-skill-2" href="http://stackoverflow.com/questions/12735391/#" class="tooltip" title="TESTING!!!!"></a></li><li><a id="super-skill-3" href="http://stackoverflow.com/questions/12735391/#" class="tooltip" title="TESTING!!!!"></a></li><li><a id="super-skill-4" href="http://stackoverflow.com/questions/12735391/#" class="tooltip" title="TESTING!!!!"></a></li><li><a id="super-skill-5" href="http://stackoverflow.com/questions/12735391/#" class="tooltip" title="TESTING!!!!"></a></li></ul></div><form><input type="button" id="showdata"value="http://stackoverflow.com/questions/12735391/Show Data" ></form></body></html>\[/code\]Thanks