jquery - Display a Google chart in a popup window + pass parameters to the chart through a hyperlink/button -
can please suggest way pass parameters (data) following google chart hyperlink(id="inline").to have hard-coded data in function.plus want pop chart in j query fancybox (which done)..please!! looking suggestions
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script> <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> <script type="text/javascript"> google.load('visualization', '1', {packages: ['columnchart']}); </script> <script> function drawvisualization() { var data = google.visualization.arraytodatatable([ ['year', 'sales', 'expenses'], ['2004', 1000, 400], ]); var options = { title: 'company performance', haxis: {title: 'year', titletextstyle: {color: 'red'}} }; // create , draw visualization. new google.visualization.columnchart(document.getelementbyid('data')).draw(data, options); } $(document).ready(function() { $("a#inline").fancybox({ 'hideoncontentclick': true, oncomplete: drawvisualization }); }); </script> </head> <body> <a id="inline" href="#data">show chart</a> <div style="display:none"><div style='height:400px;width:600px' id="data"></div></div> </body> </html>
it's ugly...read on @ own risk !
seriously, it's not particularly elegant solution, might work (based on specific requirements, @ moment of writing not clear me).
you use custom data-* attribute (let's call data-chart-data) in each <a> element want display chart , store there serialized data.
(for illustration used simple scheme: separating table rows | , separating cell-data ,).)
<a href="#data" class="chartlink" data-chart-data='"year","sales","expenses"|"2004",1000,400'> show chart </a> then, on js part, need pass chart-data parameter drawvisualization() function.
accessing chart-data (using html5): aelem.dataset.chartdata
accessing chart-data (no html5): aelem.getattribute("data-chart-data")
unfortunately, need custom function convert chart-data string representation js array. here sample function expects values of type integer (anything not enclosed in ") , string (anything enclosed in "):
function strtoarr(str) { var arr = []; var rows = str.split("|"); (var = 0; < rows.length; i++) { var row = []; var regex = new regexp("^\"(.*)\"$"); var values = rows[i].split(","); (var j = 0; j < values.length; j++) { var value = values[j].trim(); row.push(regex.test(value) ? regexp.$1 : parseint(value, 10)); } arr.push(row); } return arr; } of course, should modify function cover needs.
in similar fashion, serialize "options" , pass them parameter drawvisualization() too.
see, also, short demo.
Comments
Post a Comment