Post
Ask Question
nitish rai

nitish rai

  • 1.3k
  • 319
  • 16.7k

drop down select list Items after plotting the line graph

Jan 16 2018 4:25 AM
Please help on subject mail.
 
Plesae find the below code.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TagIndexdemo.aspx.cs" Inherits="TagIndexdemo" %>  
  2. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6. <title></title>  
  7. <img src="logo_73492.gif" style="height: 63px; width: 267px; margin-top: 0px" />  
  8. </head>  
  9. <body>  
  10. <form id="form1" runat="server">  
  11. <asp:ScriptManager ID="ScriptManager1" runat="server">  
  12. </asp:ScriptManager>  
  13. <div>  
  14. <table>  
  15. <tr>  
  16. <td>  
  17. <asp:DropDownList ID="ddltagindex" runat="server" Width="119px" >  
  18. <asp:ListItem>-------Select ----</asp:ListItem>  
  19. <asp:ListItem>TagIndex1</asp:ListItem>  
  20. <asp:ListItem>TagIndex2</asp:ListItem>  
  21. <asp:ListItem>TagIndex3</asp:ListItem>  
  22. <asp:ListItem>TagIndex4</asp:ListItem>  
  23. <asp:ListItem>TagIndex5</asp:ListItem>  
  24. <asp:ListItem>TagIndex6</asp:ListItem>  
  25. </asp:DropDownList>  
  26. </td>  
  27. <td>  
  28. <asp:Label ID="lblFromdate" runat="server" Text="FromDate"></asp:Label>  
  29. </td>  
  30. <td>  
  31. <asp:TextBox ID="txtfromdate" runat="server"></asp:TextBox>  
  32. <asp:CalendarExtender ID="FromYearTxt_CalendarExtender" runat="server" Enabled="True"  
  33. TargetControlID="txtfromdate" Format="yyyy-MM-dd hh:mm:ss"></asp:CalendarExtender>  
  34. </td>  
  35. <td>  
  36. <asp:Label ID="lbltodate" runat="server" Text="ToDate"></asp:Label>  
  37. </td>  
  38. <td>  
  39. <asp:TextBox ID="txttodate" runat="server"></asp:TextBox>  
  40. <asp:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True"  
  41. TargetControlID="txttodate" Format="yyyy-MM-dd hh:mm:ss"></asp:CalendarExtender>  
  42. </td>  
  43. </tr>  
  44. </table>  
  45. <br />  
  46. <br />  
  47. <br />  
  48. <table>  
  49. <tr>  
  50. <td>  
  51. <asp:Button ID="Btnsubmit" runat="server" Text="Submit" Font-Bold="True" Font-Names="Times New Roman" OnClick="Btnsubmit_Click" />  
  52. </td>  
  53. </tr>  
  54. </table>  
  55. <canvas id="Chart" width="1000" height="700"></canvas>  
  56. </div>  
  57. </form>  
  58. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
  59. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>  
  60. <script type="text/javascript">  
  61. $(function () {  
  62. var ctx = document.getElementById("Chart").getContext('2d');  
  63. $.ajax({  
  64. url: "TagIndexdemo.aspx/getChartData",  
  65. type: "POST",  
  66. contentType: "application/json; charset=utf-8",  
  67. dataType: "json",  
  68. success: function (response) {  
  69. var chartLabel = eval(response.d[0]); //Labels  
  70. var chartData = eval(response.d[1]); //Data  
  71. var chartData1 = eval(response.d[2]); //Data  
  72. var chartData2 = eval(response.d[3]); //Data  
  73. var chartData3 = eval(response.d[4]); //Data  
  74. var chartData4 = eval(response.d[5]); //Data  
  75. var barData = {  
  76. labels: chartLabel,  
  77. datasets: [  
  78. {  
  79. fillColor: "rgba(255, 0, 0, 0.0)",//"rgba(220,220,220,0.2)",  
  80. strokeColor: "red",//"rgba(220,220,220,1)",  
  81. pointColor: "red",//"rgba(220,220,220,1)",  
  82. pointStrokeColor: "#fff",  
  83. pointHighlightFill: "#fff",  
  84. pointHighlightStroke: "rgba(220,220,220,1)",  
  85. data: chartData  
  86. },  
  87. {  
  88. label: 'PowerFactor',  
  89. fillColor: "rgba(225,225,225,0.2)",  
  90. strokeColor: "Crimson",  
  91. pointColor: "blue",  
  92. pointStrokeColor: "HotPink",  
  93. pointHighlightFill: "",  
  94. pointHighlightStroke: "rgba(220,220,220,1)",  
  95. data: chartData1  
  96. }, {  
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. using System.Text;  
  10. using System.Configuration;  
  11. using System.IO;  
  12. using System.Web.Services;  
  13. public partial class TagIndexdemo : System.Web.UI.Page  
  14. {  
  15. protected void Page_Load(object sender, EventArgs e)  
  16. {  
  17. }  
  18. [WebMethod]  
  19. public static List<string> getChartData()  
  20. {  
  21. var returnData = new List<string>();  
  22. var Con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["demoConnectionString2"].ConnectionString);  
  23. Con.Open();  
  24. SqlCommand cmd = new SqlCommand();  
  25. cmd.CommandType = CommandType.StoredProcedure;  
  26. cmd.CommandText = "ProCreateTagIndex1 ";  
  27. //cmd.Parameters.AddWithValue("@FromDate", FromDate);  
  28. //cmd.Parameters.AddWithValue("@ToDate", ToDate);  
  29. cmd.Connection = Con;  
  30. SqlDataAdapter adapter = new SqlDataAdapter(cmd);  
  31. DataSet ds = new DataSet();  
  32. try  
  33. {  
  34. adapter.Fill(ds);  
  35. }  
  36. catch (Exception ex)  
  37. {  
  38. throw ex;  
  39. }  
  40. finally  
  41. {  
  42. Con.Close();  
  43. Con.Dispose();  
  44. }  
  45. var chartLabel = new StringBuilder();  
  46. var chartData = new StringBuilder();  
  47. var chartData1 = new StringBuilder();  
  48. var chartData2 = new StringBuilder();  
  49. var chartData3 = new StringBuilder();  
  50. var chartData4 = new StringBuilder();  
  51. chartLabel.Append("[");  
  52. chartData.Append("[");  
  53. chartData1.Append("[");  
  54. chartData2.Append("[");  
  55. chartData3.Append("[");  
  56. chartData4.Append("[");  
  57. foreach (DataRow row in ds.Tables[0].Rows)  
  58. {  
  59. chartLabel.Append(string.Format("'{0}',", row["DateAndTime"].ToString()));  
  60. chartData.Append(string.Format("'{0}',", row["TagIndex1"].ToString()));  
  61. chartData1.Append(string.Format("'{0}',", row["TagIndex2"].ToString()));  
  62. chartData2.Append(string.Format("'{0}',", row["TagIndex3"].ToString()));  
  63. chartData3.Append(string.Format(" '{0}',", row["TagIndex4"].ToString()));  
  64. chartData4.Append(string.Format("' {0}',", row["TagIndex5"].ToString()));  
  65. }  
  66. chartData.Length--; //For removing ','  
  67. chartData.Append("]");  
  68. chartData1.Length--; //For removing ','  
  69. chartData1.Append("]");  
  70. chartData2.Length--; //For removing ','  
  71. chartData2.Append("]");  
  72. chartData3.Length--; //For removing ','  
  73. chartData3.Append("]");  
  74. chartData4.Length--; //For removing ','  
  75. chartData4.Append("]");  
  76. chartLabel.Length--; //For removing ','  
  77. chartLabel.Append("]");  
  78. returnData.Add(chartLabel.ToString());  
  79. returnData.Add(chartData.ToString());  
  80. returnData.Add(chartData1.ToString());  
  81. returnData.Add(chartData2.ToString());  
  82. returnData.Add(chartData3.ToString());  
  83. returnData.Add(chartData4.ToString());  
  84. return returnData;  
  85. }  
  86. protected void Btnsubmit_Click(object sender, EventArgs e)  
  87. {  
  88. txtfromdate.Text = "";  
  89. txttodate.Text = "";  
  90. }  
  91. }

Answers (1)