この Google Gauge を C# と ASP.NET で使用しています。更新パネルを使用して毎秒ゲージを更新しようとしましたが、機能しません。SQL からデータを取得します。ページ全体ではなく、ゲージのみを更新したい。何か案は ?
aspx
<asp:UpdatePanel ID="UpdatePanelProgressBar" runat="server">
<ContentTemplate>
<asp:Literal ID="lt" runat="server"></asp:Literal>
<asp:Label ID="lblStatus" runat="server"></asp:Label>
</div>
<div id="chart_div"></div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer" Interval="1000" runat="server" OnTick="TimerProgress_Tick">
</asp:Timer>
aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
// here i am calling function chart_bind(); in the page load event of the page
chart_bind();
}
protected void TimerProgress_Tick(object sender, EventArgs e)
{
chart_bind();
}
private void chart_bind()
{
using (SqlConnection con = new SqlConnection(connStr))
{
// here i am using SqlDataAdapter for the sql server select query
SqlDataAdapter adp = new SqlDataAdapter("SELECT QueueDesc,convert(decimal(18,1),(1.0*GoalMetCount/TotalTickets * 100)) AS GoalMet, convert(decimal(18,1),100 -(1.0*GoalMetCount/TotalTickets * 100)) AS NotGoalMet FROM vwTodayGoalMet WHERE QueueId = 4", con);
// here am taking datatable
DataTable dt = new DataTable();
try
{
// here datatable dt is fill wit the adp
adp.Fill(dt);
// this string m catching in the stringbuilder class
// in the str m writing same javascript code that is given by the google.
// my data that will come from the sql server
// below code is same like as google's javascript code
str.Append(@" <script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');");
// inside the below line dt.Rows.Count explain that
// how many rows comes in dt or total rows
str.Append("data.addRows(" + dt.Rows.Count + ");");
Int32 i;
for (i = 0; i <= dt.Rows.Count - 1; i++)
{
// i need this type of output " data.setValue(0, 0, 'Memory'); so on in the first line so for this
//m using i for the 0,1& 2 and so on . and after this i am writting zero and after this student_name using datatable
str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["QueueDesc"].ToString() + "');");
// i need this type of output " data.setValue(0, 1, 80);
//so on in the first line so for this
//m using i for the 0,1& 2 and so on . and after this i am writting zero and after this percentage using datatable
str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["GoalMet"].ToString() + ") ;");
// str.Append("['" + (dt.Rows[i]["student_name"].ToString()) + "'," + dt.Rows[i]["average_marks"].ToString() + "],");
}
str.Append("var chart = new google.visualization.Gauge(document.getElementById('chart_div'));");
// in the below line i am setting the height and width of the Gauge using your own requrirement
str.Append(" var options = {width: 400, height: 200, redFrom: 1, redTo: 79,greenFrom: 90, greenTo: 100,");
// str.Append(" var chart = new google.visualization.BarChart(document.getElementById('chart_div'));");
str.Append("yellowFrom:80, yellowTo: 89, minorTicks: 5};");
str.Append(" chart.draw(data, options);}");
str.Append("</script>");
lt.Text = str.ToString().TrimEnd(',');
}
catch (Exception ex)
{
lblStatus.Text = ex.ToString();
}
}
}