How to add a drop down list in a line chart to change using chartJS in ASP.NET web application

• Question

• 

  

  0

  Sign in to vote

  I am developing a web application dashboard using ASP.NET web application template.
  
  The current application connects to the SQL server. For visualization, I use chart.JS line chart.
  
  To give you a bit of context, I have data from the last 2 years about temperature and engine hours that need to be visualized in a line chart, but I want the user to have more control on the dashboard by adding a drop-down list, so then they can select data from last 24 hours, 7 days, 1 month, 6 months and so forth.
  
  Using chartJS I was only able to make a line chart but I wasn't able to implement the dropdown list, therefore, I would much appreciate the suggestions and help to go around this issue which I have been dealing with since a while.

  Dashboard.aspx.cs
  

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Configuration;
  using System.Data.SqlClient;
  using System.Data;
  using FusionCharts.DataEngine;
  using FusionCharts.Visualization;
  using Newtonsoft.Json;
  using System.Web.Services;
  using System.Web.Script.Services;
  using System.Text;
  
  namespace SW53400206
  {
      public partial class WebForm1 : System.Web.UI.Page
      {
          private int[] data;
  
          public ChartJsDataModel Model { get; set; }
          public ChartJsDataModel Model2 { get; set; }
          public ChartJsDataModel Model3 { get; set; }
          public ChartJsDataModel Model4 { get; set; }
          protected void Page_Load(object sender, EventArgs e)
          {
              if (!IsPostBack)
                  ShowData();
  
          }
         
          private void ShowData()
          {
              //Connect to the SQL server
              string myConnection = ConfigurationManager.ConnectionStrings["DataBaseConnectionString"].ConnectionString;
              SqlConnection con = new SqlConnection(myConnection);
              String query = "SELECT* FROM DADLoggerTable";
              SqlCommand cmd = new SqlCommand(query, con);
              DataTable tb = new DataTable();
              StringBuilder str = new StringBuilder();
  
              try
              {
                  con.Open();
  
                  SqlDataReader dr = cmd.ExecuteReader();
                  tb.Load(dr, LoadOption.OverwriteChanges);
                  con.Close();
              }
              catch { }
              //Check if there is data in the datatable
              if (tb != null)
              {
                  //Specify chart type
                  String chart = "";
                  chart = "<canvas id=\"line-chart\" width=\"120%\" height=\"30\"></canvas>";
                  chart += "<script>";
                  chart += "new Chart(document.getElementById(\"line-chart\"), { type: 'line', data: {labels: [";
  
                  // A line chart for engine hours
                  for (int i = 0; i < tb.Rows.Count; i++)
                      chart += i.ToString() + ",";
                  chart = chart.Substring(0, chart.Length - 1);
  
                  chart += "],datasets: [{ data: [";
  
                  //Select data from the database and add to chart
                  String value = "";
                  for (int i = 0; i < tb.Rows.Count; i++)
                      value += tb.Rows[i]["Engine_Hours"].ToString() + ",";
                  value = value.Substring(0, value.Length - 1);
                  chart += value;
  
                  chart += "],label: \"Engine Hours\",borderColor: \"#4287f5\",fill: true}"; // Chart color
                  chart += "]},options: { title: { display: false,text: 'Engine Hours (hr)'} }"; // Chart title
                  chart += "});";
                  chart += "</script>";
  
                  //Render the chart
                  Literal1.Text = chart;
  
  
                  // A line chart for methane value
                  String Linechart = "";
                  Linechart = "<canvas id=\"bubble-chart\" width=\"120%\" height=\"30\"></canvas>";
                  Linechart += "<script>";
                  Linechart += "new Chart(document.getElementById(\"bubble-chart\"), { type: 'line', data: {labels: [";
  
  
                  //Select the first 460 data points5
                  for (int i = 0; i < tb.Rows.Count; i++)
                      Linechart += i.ToString() + ",";
                  Linechart = Linechart.Substring(0, Linechart.Length - 1);
  
                  Linechart += "],datasets: [{ data: [";
  
                  //Select data from the database and add to chart
                  String value2 = "";
                  for (int i = 0; i < tb.Rows.Count; i++)
                      value2 += tb.Rows[i]["Methane_Value"].ToString() + ",";
                  value2 = value2.Substring(0, value2.Length - 1);
                  Linechart += value2;
  
                  Linechart += "],label: \"Methane_Value\",borderColor: \"#eff542\",fill: true}"; // Chart color
                  Linechart += "]},options: { title: { display: false,text: 'Methane_Value'} }"; // Chart title
                  Linechart += "});";
                  Linechart += "</script>";
  
                  //Render the chart
                  Literal2.Text = Linechart;
  
          
                   // A line chart for T1
                  String barchart = "";
                  barchart = "<canvas id=\"bar-chart\" width=\"120%\" height=\"30\"></canvas>";
                  barchart += "<script>";
                  barchart += "new Chart(document.getElementById(\"bar-chart\"), { type: 'line', data: {labels: [";
  
  
                  //Select the first 460 data points
                  for (int i = 0; i < tb.Rows.Count; i++)
                      barchart += i.ToString() + ",";
                  barchart = barchart.Substring(0, barchart.Length - 1);
  
                  barchart += "],datasets: [{ data: [";
  
                  //Select data from the database and add to chart
                  String value3 = "";
                  for (int i = 0; i < tb.Rows.Count; i++)
                      value3 += tb.Rows[i]["T1"].ToString() + ",";
                  value3 = value3.Substring(0, value3.Length - 1);
                  barchart += value3;
  
                  barchart += "],label: \"T1 (Celsius)\",borderColor: \"#4bf542\",fill: true}"; // Chart color
                  barchart += "]},options: { title: { display: false,text: 'T1 (Celsius)'} }"; // Chart title
                  barchart += "});";
                  barchart += "</script>";
  
                  //Render the chart
                  Literal3.Text = barchart;
                }
           }
      }
  }

  
  

  Dashboard.aspx
  

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dashboard.aspx.cs" Inherits="SW53400206.WebForm1" %>
  <%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
  
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
  <form id="form1" runat="server">
  
         <table align="center">
          <tr valign="top">
          <td style="width: 50%;">
          <div style="width:1000px;"><asp:Literal ID="Literal1" runat="server"></asp:Literal></div>
          </td>
          <td style="width: 50%;">
          <div><asp:Literal ID="Literal2" runat="server"></asp:Literal> </div>
          </td>  
         </tr>
          </table>
  
         <table align="center">
          <tr valign="top">
          <td style="width: 50%;">
          <div style="width:1000px;"><asp:Literal ID="Literal3" runat="server"></asp:Literal></div>
          </td>
         </tr>
          </table>
  
  </form>
  </body>
  </html>

  That's how the line chart looks like with this code:

  

  ---

  Sami Arja

  • Moved by Dave PatrickMVP Thursday, August 27, 2020 12:26 PM looking for forum

  Thursday, August 27, 2020 10:23 AM