I'm interested in making an interactive 3D pie chart using JavaScript and ASP.net
controls for a webpage. Essentially, I want to make an interactive version of the chart here: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#3D
I want to have 5 ASP.net textboxes where the user enters data and then submits it, and the chart adjusts according to what the user enters. I understand using ASP.net
controls with JS is probably not the most effective way to go about it, but I would really appreciate if someone could share how doing this would be possible. I really don't know where to begin.
Thanks for any help!
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
void btn1_Click(object sender, EventArgs e)
{
double s = 0.0;
double b = 0;
double g = 0.0f;
double c = 0.0f;
double h = 0.0f;
s = double.Parse(txtWork.Text);
b = double.Parse(txtEat.Text);
g = double.Parse(txtCommute.Text);
c = double.Parse(txtWatchTV.Text);
h = double.Parse(txtSleep.Text);
double total = s + b + g + c + h;
if (total != 24)
{
lblError.Text = "Warning! A day has 24 hours";
}
if (total == 24)
{
lblError.Text = string.Empty;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<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 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
var data = new google.visualization.DataTable();
var txtWork = document.getElementById('<%=txtWork.ClientID%>')
txtEat = document.getElementById('<%=txtEat.ClientID%>')
txtCommute = document.getElementById('<%=txtCommute.ClientID%>')
txtWatchTV = document.getElementById('<%=txtWatchTV.ClientID%>')
txtSleep = document.getElementById('<%=txtSleep.ClientID%>');
var workvalue = parseInt(txtWork, 10)
var eatvalue = parseInt(txtEat, 10)
var commutevalue = parseInt(txtCommute, 10)
var watchtvvalue = parseInt(txtWatchTV, 10)
var sleepvalue = parseInt(txtSleep, 10)
// Declare columns
data.addColumn('string', 'Task');
data.addColumn('Number', 'Hours per day');
// Add data.
data.addRows([
['Work', workvalue],
['Eat', eatvalue],
['Commute', commutevalue],
['Watch TV', watchtvvalue],
['Sleep', sleepvalue],
]);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="piechart_3d" style="width: 900px; height: 500px;">
</div>
<asp:Label ID="lblError" runat="server" Font-Size="X-Large" Font-Bold="true" />
<table>
<tr>
<td>Work:</td>
<td><asp:TextBox ID="txtWork" Text="11" runat="server" /></td>
</tr>
<tr>
<td>Eat:</td>
<td><asp:TextBox ID="txtEat" text="2" runat="server" /></td>
</tr>
<tr>
<td>Commute:</td>
<td><asp:TextBox ID="txtCommute" Text="2" runat="server" /></td>
</tr>
<tr>
<td>Watch TV:</td>
<td><asp:TextBox ID="txtWatchTV" Text="2" runat="server" /></td>
</tr>
<tr>
<td>Sleep:</td>
<td><asp:TextBox ID="txtSleep" Text="7" runat="server" /></td>
</tr>
</table>
<br />
<br />
<asp:Button ID="btn1" text="Draw 3D PieChart" runat="server"
OnClick="btn1_Click" />
</form>
</body>
</html>
