What I'm trying to do here is to use a form to change the value of a variable which defines the location of a csv file. When we press a button, the specific chart is presented in a div. The form is in another div, so it doesn't disappear. My problem, however is that the chart displays for a second and disappears. I have tried for the past one month to solve this, but to no result. Can anyone help me? My code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ift.tt/kTyqzh">
<html>
<head>
<title>Google Chart Example</title>
<script src="js/jsapi"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.csv-0.71.js"></script>
<script type="text/javascript">
// load the visualization library from Google and set a listener
google.load("visualization", "1", {
packages : [ "corechart" ]
});
google.setOnLoadCallback(drawChart);
var silver = 0
function validateForm() {
if (document.getElementById('one').checked) {
silver = "data/roadac_Road_Accident_Profile_of_Select_Cities-2012.csv";
drawChart();
alert(silver);
} else if (document.getElementById('two').checked) {
silver = "data/kzn1993.csv";
drawChart();
alert(silver);
} else if (document.getElementById('three').checked) {
alert("You have selected Option 3");
} else if (document.getElementById('four').checked) {
alert("You have selected Option 4");
}
}
function drawChart() {
// grab the CSV
$.get(silver, function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {
onParseValue : $.csv.hooks.castToScalar
});
//use arrayData to load the select elements with the appropriate options
for ( var i = 0; i < arrayData[0].length; i++) {
// this adds the given option to both select elements
$("select").append(
"<option value='" + i + "'>" + arrayData[0][i]
+ "</option");
}
// set the default selection
$("#domain option[value='0']").attr("selected", "selected");
$("#range option[value='1']").attr("selected", "selected");
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([ 0, 1 ]);
var options = {
title : "Accidents",
hAxis : {
title : data.getColumnLabel(0),
minValue : data.getColumnRange(0).min,
maxValue : data.getColumnRange(0).max
},
vAxis : {
title : data.getColumnLabel(1),
minValue : data.getColumnRange(1).min,
maxValue : data.getColumnRange(1).max
},
legend : 'none'
};
var chart = new google.visualization.LineChart(document
.getElementById("chart"));
chart.draw(view, options);
//set listener for the update button
$("select").change(function(){
// determine selected domain and range
var domain = +$("#domain option:selected").val();
var range = +$("#range option:selected").val();
// update the view
view.setColumns([ domain, range ]);
// update the options
options.hAxis.title = data.getColumnLabel(domain);
options.hAxis.minValue = data.getColumnRange(domain).min;
options.hAxis.maxValue = data.getColumnRange(domain).max;
options.vAxis.title = data.getColumnLabel(range);
options.vAxis.minValue = data.getColumnRange(range).min;
options.vAxis.maxValue = data.getColumnRange(range).max;
// update the chart
chart.draw(view, options);
});
});
}
</script>
</head>
<body>
<div id="silver">
<form name="form1" action="#" onsubmit="return validateForm()" method="post">
Choose dataset to visualise:<br />
<label for="s1">Accidents</label>
<input type="submit" id="one" name="yesno" value="one" checked="checked" onclick="function validateForm()" />
<br />
<label for="s2">Health</label>
<input type="submit" id="two" name="yesno" value="two" onclick="function validateForm()" />
<br />
<label for="s3">temperature</label>
<input type="submit" id="three" name="yesno" value="three" onclick="function validateForm()" />
<br />
<label for="s4">twoNormals</label>
<input type="submit" id="four" name="yesno" value="four" onclick="function validateForm()" /> <br />
</form>
</div>
<div id="chart"></div>
<select id="range">
</select>
<select id="domain">
</select>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire