In: Computer Science
Troubleshoot the code to create a dynamic input field to take
numerical inputs and label strings to draw a pie chart.
<html>
<head>
<title>AddingRows</title>
</head>
<header>
<h1>AddingRows</h1>
</header>
<style>
table, td {
border-style:double;
border-color: black;
}
</style>
<body>
<table id="shtol">
<tr>
<td>Label 2 </td>
<td><input type="text" class = "labelIn"/></td>
<td>Percentage</td>
<td><input type="number" class = "percentIn"/></td>
</tr>
<tr>
<td>Label 1 </td>
<td><input type="text" class = "labelIn"/></td>
<td>Percentage</td>
<td><input type="number" class = "percentIn"/></td>
</tr>
</table>
<br>
<button type="button" onclick="addR()">Add Label</button>
<button type="button" onclick="drawChart()">Draw the Pie Chart</button>
<div id="chart_div"></div>
<p id = "counters" style = "display:none">2</p>
<script>
function addR() {
var counterHT = document.getElementById('counters');
var counter = counterHT.innerHTML;
counter++;
counterHT.innerHTML = counter;
var table = document.getElementById("shtol");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML= "Label " + counter;
cell2.innerHTML = "<input type = text>";
cell2.classList.toggle("labelIn");
cell3.innerHTML = "Percentage ";
cell4.innerHTML = "<input type = text>";
cell4.classList.toggle("percentIn");
}
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Percentage');
var x = document.getElementsByClassName("labelIn");
var y = document.getElementsByClassName("percentIn");
var i;
for(i = 0; i < x.length; i ++){
data.addRows([
[x[1].value,y[1].value]
])
}
var myTitle = document.getElementById("title").value;
// Set chart options
var options = {'title':myTitle,
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</body>
</html>
Troubleshooting of the above code
Creating a dynamic input field to take numerical inputs and label strings to draw a pie chart.
First before going onto the solution of the above code, we have to understand the faults due to which we face problems in our code :
1. Attaching the Google Charts AJAX API : Our code is for creating the Pie Chart by using the Google Charts but we haven't added the AJAX API for Google Charts to load.
In this process we have to load the AJAX API by using following command available on the official Google Charts website:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
2. Loading the Visulaization API and Corechart Package and set a Callback to run when API loaded : This step is added to our code as it is necessary to load all the Core Charts and the API for visualizing those charts in our code. And We also have to set a callback to run when the API is loaded and a function for displaying charts is called to show the chart in our browser.
We can load these by using the following Commands:
<!-- Load the Visualization API and corechart -->
google.charts.load('current', {'packages':['corechart']});
<!-- Setting a callback to run -->
google.charts.setOnLoadCallback(drawChart);
3. Adding the "class" with the inputs taken by dynamically extended Row elements : In the addR() function we used the toggle function to add the class name with the extanded row elements which returns the value NaN for the elements.
Wrong Code part:
cell1.innerHTML= "Label " + counter;
cell2.innerHTML = "<input type = text>";
cell2.classList.toggle("labelIn");
cell3.innerHTML = "Percentage ";
cell4.innerHTML = "<input type = text>";
cell4.classList.toggle("percentIn");
Hence Instead of using toggle we directly provide the
class names to the input values to bind them with the respective
classes.
Correct Code Part :
cell1.innerHTML= "Label " + counter;
cell2.innerHTML = '<input type = "text" class = "labelIn"/>';
cell3.innerHTML = "Percentage ";
cell4.innerHTML = '<input type = "number" class = "percentIn"/>';
4. We have to provide the Title field to input the title because we can't leave title field empty.
<label>Enter title for the Pie Chart</label>
<input type="text" id = "title"/>
5. In drawChart() function in the loop we have to take the all object values to pass the values in the Chart so instead of using the 1 we use i to extract the values in [x[i].value,parseInt(y[i].value)] and for the yth value we must have to convert it into integer.
Hence we use parseInt() function to convert it into integer.
for(i = 0; i < x.length; i ++){
data.addRows([
[x[i].value,parseInt(y[i].value)]
])
}
Hence by correcting all the above mistakes we come to our final code.
Here is the troubleshooted final code with all corrections that will give the correct required output :
<html>
<head>
<title>AddingRows</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function addR() {
var counterHT = document.getElementById('counters');
var counter = counterHT.innerHTML;
counter++;
counterHT.innerHTML = counter;
var table = document.getElementById("shtol");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML= "Label " + counter;
cell2.innerHTML = '<input type = "text" class = "labelIn"/>';
cell3.innerHTML = "Percentage ";
cell4.innerHTML = '<input type = "number" class = "percentIn"/>';
}
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Percentage');
var x = document.getElementsByClassName("labelIn");
var y = document.getElementsByClassName("percentIn");
var i;
for(i = 0; i < x.length; i ++){
data.addRows([
[x[i].value,parseInt(y[i].value)]
])
}
var myTitle = document.getElementById("title").value;
// Set chart options
var options = {'title':myTitle,
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<header>
<h1>AddingRows</h1>
</header>
<style>
table, td {
border-style:double;
border-color: black;
}
</style>
<body>
<label>Enter title for the Pie Chart</label>
<input type="text" id = "title"/>
<table id="shtol">
<tr>
<td>Label 2 </td>
<td><input type="text" class = "labelIn"/></td>
<td>Percentage</td>
<td><input type="number" class = "percentIn"/></td>
</tr>
<tr>
<td>Label 1 </td>
<td><input type="text" class = "labelIn"/></td>
<td>Percentage</td>
<td><input type="number" class = "percentIn"/></td>
</tr>
</table>
<br>
<button type="button" onclick="addR()">Add Label</button>
<button type="button" onclick="drawChart()">Draw the Pie Chart</button>
<div id="chart_div"></div>
<p id = "counters" style = "display:none">2</p>
</body>
</html>
The screenshot of output of the above code is attached below :