Question

我到处研究过这个，但每个人似乎都在做一些稍微不同的事情。

我想要做的是onload显示谷歌图表可视化，然后通过选择框允许用户通过ajax和json用不同的数据集更新图形。

这是我的html / javascript：

<?php
/* dummy user and audit id's */
$userid = "1";
$auditids = array(1,2);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="javascript">
$('select#auditid').live('change', function() {

var userID = "1";
var auditid = $(this, 'option').attr('value');  

auditRequest = $.ajax({
    cache: false,
    type: "GET",
    url: "examplejson.php",
    dataType: "json",
    data: "userid=" + userID + "&auditid=" + auditID + "",
    success: addNew     
});
}

function addNew(json) {
/* not sure what goes here */
}


</script>
<h1>My example graph:</h1>
<p>select audit:
<select id="auditid">
    <option value="<?php echo $auditids[0]; ?>"><?php echo $auditids[0]; ?>    </option>
    <option value="<?php echo $auditids[1]; ?>"><?php echo $auditids[1]; ?></option>
</select>
 </p>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Recommendation');
data.addColumn('number', 'Cost');
data.addRows([
  ['Fit thermostat', 150],
  ['Install uPVC double glazed windows', 1040],
  ['Loft Insulation/top up', 560],
  ['Install Vphase domestic voltage optimiser', 299],
  ['Fit watersave Shower heads', 90]
]);

var options = {
  width: 646, height: 230,
  colors: ['#53b924'],
  legend: {position: 'none'},
  hAxis: {titleTextStyle: {color: '#53b924'}}
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);

google.visualization.events.addListener(chart, 'select', selectHandler);

function selectHandler(e) {

  var urlslug = data.getValue(chart.getSelection()[0].row, 0).replace(' ', '-').toLowerCase();
  window.location = 'http://www.url.co.uk/' + urlslug;
}
}

</script>
<div id="chart_div"></div>

通过ajax和json更新谷歌图表可视化

0 个答案: