rambomambo
Gebruiker
- Lid geworden
- 9 dec 2012
- Berichten
- 163
Hey
Ik heb de API van google gebruikt voor een chart te tekenen. Nu wil ik met een textbox data toevoegen dit werkt maar
.Ik zit met een leeg veld die hij toevoegt aan mijn chart. Weet niet of mijn toegevoegde code correct is toegepast.
Weet iemand waar het probleem zit ?
Eigen code
Ik heb de API van google gebruikt voor een chart te tekenen. Nu wil ik met een textbox data toevoegen dit werkt maar
.Ik zit met een leeg veld die hij toevoegt aan mijn chart. Weet niet of mijn toegevoegde code correct is toegepast.
Weet iemand waar het probleem zit ?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {packages:["corechart", "table"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
var data = null;
var i = 0;
function drawChart() {
// Create the data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Naam');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addColumn('number', 'S3');
addnieuwe();
data.addRows([
['Jan', 15,14,16],
['Piet', 18,16,17],
['Pol', 17,19,19],
]);
// Set chart options
var options = {'title':'Punten Ti',
'width':800,
'height':600,
// colors : ['fuchsia','deepskyblue','lime'],
is3D: true
};
var tableoptions = {
showRowNumber : true,
width : '350px',
height : '100%',
title : 'punten',
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, tableoptions);
}
var j = 0;
var lijst = [];
var overzicht = { naam : [],s1 : [],s2 : [],s3 : []}
var addnieuwe = function(){
var naam = document.getElementById("invulTb").value
var s1 = Math.floor((Math.random() * 10) + 1);
var s2 = Math.floor((Math.random() * 10) + 1);
var s3 = Math.floor((Math.random() * 10) + 1);
lijst.push(naam);
overzicht.naam.push(naam);
overzicht.s1.push(s1);
overzicht.s2.push(s2);
overzicht.s3.push(s3);
j++;
for(var i = 0 ;i < j;i++)
{
data.addRows([
[overzicht.naam[i], overzicht.s1[i], overzicht.s2[i], overzicht.s3[i]]
]);
}
}
</script>
</head>
<body>
<div id="table_div"></div>
<div id="chart_div"></div>
<style>
#chart_div{
float: left;
}
#table_div{
float: left;
}
</style>
<input type="text" id="invulTb" style="float: left">
<input type="button" id="btnBevestig" onclick="drawChart()" Bevestig>
</body>
</html>
</head>Eigen code
Code:
var j = 0;
var lijst = [];
var overzicht = { naam : [],s1 : [],s2 : [],s3 : []}
var addnieuwe = function(){
var naam = document.getElementById("invulTb").value
var s1 = Math.floor((Math.random() * 10) + 1);
var s2 = Math.floor((Math.random() * 10) + 1);
var s3 = Math.floor((Math.random() * 10) + 1);
lijst.push(naam);
overzicht.naam.push(naam);
overzicht.s1.push(s1);
overzicht.s2.push(s2);
overzicht.s3.push(s3);
j++;
for(var i = 0 ;i < j;i++)
{
data.addRows([
[overzicht.naam[i], overzicht.s1[i], overzicht.s2[i], overzicht.s3[i]]
]);
}
