locked
How to add a drop down menu for each chart in ASP.NET web pages? RRS feed

  • Question

  • User-1313071134 posted

    Hi all,

    I am creating a front-end application using ASP.NET web application.

    The data are retrieved using SQL queries in C#. For visualization, I use chart.JS charts.

    I want the user to have more control on the dashboard by adding a drop-down menu. The current drop down menu works for all the charts, I wasn't able to implement it for each individual ones.

    Below is the Dashboard.aspx.cs (sorry it is long code, that's because I have 20 charts visualized)

    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;
    using System.Diagnostics;
    
    namespace SW53400206
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            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)
                {
                    BindDropDownList();
                    PopulateData(SelectDuration.SelectedValue);
                }
    
            }
            static string Accelerometer_X_Axis_Data = "0";
            static string Accelerometer_Y_Axis_Data = "1";
            static string Accelerometer_Z_Axis_Data = "2";
            static string Gyroscope_X_Axis_Data = "3";
            static string Gyroscope_Y_Axis_Data = "4";
            static string Gyroscope_Z_Axis_Data = "5";
            static string Accelerometer_Magnitude = "6";
            static string Temperature_Data = "7";
            static string Methane_Value = "8";
            static string Charger_Temperature_Scrubber_1 = "9";
            static string Charger_Temperature_Scrubber_2 = "10";
            static string Charger_Temperature_Scrubber_3 = "11";
            static string Charger_Temperature_Scrubber_4 = "12";
            static string Charger_Temperature_Scrubber_5 = "13";
            static string Battery_Temperature = "14";
            static string Battery_Output_Voltage = "15";
            static string Battery_Input_Voltage = "16";
            static string Battery_IS_Current = "17";
            static string Battery_Alternator_Voltage = "18";
            static string Engine_Hours = "19";
            static string Sensor_Temperature = "20";
    
            private void ShowData(DataTable tb)
            {
                if (tb != null)
                {
                    //Accelerometer_X_Axis_Data
                    String chart = "";
                    chart = "<canvas id=\"line-chart\" width=\"120%\" height=\"40\"></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++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Accelerometer_X_Axis_Data)
                            chart += i.ToString() + ",";
                    chart = chart.Substring(0, chart.Length - 1);
                    chart += "],datasets: [{ data: [";
                    String value = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Accelerometer_X_Axis_Data)
                            value += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value.Length > 0)
                    {
                        value = value.Substring(0, value.Length - 1);
                    }
                    chart += value;
                    chart += "],label: \"Accelerometer_X_Axis_Data\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart += "]},options: { title: { display: true,text: 'Accelerometer_X_Axis_Data', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart += "});";
                    chart += "</script>";
                    //Render the chart
                    Literal1.Text = chart;
    
    
                    //Accelerometer_Y_Axis_Data
                    String chart2 = "";
                    chart2 = "<canvas id=\"line-chart2\" width=\"120%\" height=\"40\"></canvas>";
                    chart2 += "<script>";
                    chart2 += "new Chart(document.getElementById(\"line-chart2\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Accelerometer_Y_Axis_Data)
                            chart2 += i.ToString() + ",";
                    chart2 = chart2.Substring(0, chart2.Length - 1);
                    chart2 += "],datasets: [{ data: [";
                    String value2 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Accelerometer_Y_Axis_Data)
                            value2 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value2.Length > 0)
                    {
                        value2 = value2.Substring(0, value2.Length - 1);
                    }
                    chart2 += value2;
                    chart2 += "],label: \"Accelerometer_Y_Axis_Data\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart2 += "]},options: { title: { display: true,text: 'Accelerometer_Y_Axis_Data', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart2 += "});";
                    chart2 += "</script>";
                    //Render the chart
                    Literal2.Text = chart2;
    
    
                    //Accelerometer_Z_Axis_Data
                    String chart3 = "";
                    chart3 = "<canvas id=\"line-chart3\" width=\"120%\" height=\"40\"></canvas>";
                    chart3 += "<script>";
                    chart3 += "new Chart(document.getElementById(\"line-chart3\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Accelerometer_Z_Axis_Data)
                            chart3 += i.ToString() + ",";
                    chart3 = chart3.Substring(0, chart3.Length - 1);
                    chart3 += "],datasets: [{ data: [";
                    String value3 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Accelerometer_Z_Axis_Data)
                            value3 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value3.Length > 0)
                    {
                        value3 = value3.Substring(0, value3.Length - 1);
                    }
                    chart3 += value3;
                    chart3 += "],label: \"Accelerometer_Z_Axis_Data\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart3 += "]},options: { title: { display: true,text: 'Accelerometer_Z_Axis_Data', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart3 += "});";
                    chart3 += "</script>";
                    //Render the chart
                    Literal3.Text = chart3;
    
                    //Gyroscope_X_Axis_Data
                    String chart4 = "";
                    chart4 = "<canvas id=\"line-chart4\" width=\"120%\" height=\"40\"></canvas>";
                    chart4 += "<script>";
                    chart4 += "new Chart(document.getElementById(\"line-chart4\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Gyroscope_X_Axis_Data)
                            chart4 += i.ToString() + ",";
                    chart4 = chart4.Substring(0, chart4.Length - 1);
                    chart4 += "],datasets: [{ data: [";
                    String value4 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Gyroscope_X_Axis_Data)
                            value4 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value4.Length > 0)
                    {
                        value4 = value4.Substring(0, value4.Length - 1);
                    }
                    chart4 += value4;
                    chart4 += "],label: \"Gyroscope_X_Axis_Data\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart4 += "]},options: { title: { display: true,text: 'Gyroscope_X_Axis_Data', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart4 += "});";
                    chart4 += "</script>";
                    //Render the chart
                    Literal4.Text = chart4;
    
                    //Gyroscope_Y_Axis_Data
                    String chart5 = "";
                    chart5 = "<canvas id=\"line-chart5\" width=\"120%\" height=\"40\"></canvas>";
                    chart5 += "<script>";
                    chart5 += "new Chart(document.getElementById(\"line-chart5\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Gyroscope_Y_Axis_Data)
                            chart5 += i.ToString() + ",";
                    chart5 = chart5.Substring(0, chart5.Length - 1);
                    chart5 += "],datasets: [{ data: [";
                    String value5 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Gyroscope_Y_Axis_Data)
                            value5 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value5.Length > 0)
                    {
                        value5 = value5.Substring(0, value5.Length - 1);
                    }
                    chart5 += value5;
                    chart5 += "],label: \"Gyroscope_Y_Axis_Data\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart5 += "]},options: { title: { display: true,text: 'Gyroscope_Y_Axis_Data', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart5 += "});";
                    chart5 += "</script>";
                    //Render the chart
                    Literal5.Text = chart5;
    
                    //Gyroscope_Z_Axis_Data
                    String chart6 = "";
                    chart6 = "<canvas id=\"line-chart6\" width=\"120%\" height=\"40\"></canvas>";
                    chart6 += "<script>";
                    chart6 += "new Chart(document.getElementById(\"line-chart6\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Gyroscope_Z_Axis_Data)
                            chart6 += i.ToString() + ",";
                    chart6 = chart6.Substring(0, chart6.Length - 1);
                    chart6 += "],datasets: [{ data: [";
                    String value6 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Gyroscope_Z_Axis_Data)
                            value6 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value6.Length > 0)
                    {
                        value6 = value6.Substring(0, value6.Length - 1);
                    }
                    chart6 += value6;
                    chart6 += "],label: \"Gyroscope_Z_Axis_Data\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart6 += "]},options: { title: { display: true,text: 'Gyroscope_Z_Axis_Data', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart6 += "});";
                    chart6 += "</script>";
                    //Render the chart
                    Literal6.Text = chart6;
    
                    //Accelerometer_Magnitude
                    String chart7 = "";
                    chart7 = "<canvas id=\"line-chart7\" width=\"120%\" height=\"40\"></canvas>";
                    chart7 += "<script>";
                    chart7 += "new Chart(document.getElementById(\"line-chart7\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Accelerometer_Magnitude)
                            chart7 += i.ToString() + ",";
                    chart7 = chart7.Substring(0, chart7.Length - 1);
                    chart7 += "],datasets: [{ data: [";
                    String value7 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Accelerometer_Magnitude)
                            value7 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value7.Length > 0)
                    {
                        value7 = value7.Substring(0, value7.Length - 1);
                    }
                    chart7 += value7;
                    chart7 += "],label: \"Accelerometer_Magnitude\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart7 += "]},options: { title: { display: true,text: 'Accelerometer_Magnitude', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart7 += "});";
                    chart7 += "</script>";
                    //Render the chart
                    Literal7.Text = chart7;
    
                    //Temperature_Data
                    String chart8 = "";
                    chart8 = "<canvas id=\"line-chart8\" width=\"120%\" height=\"40\"></canvas>";
                    chart8 += "<script>";
                    chart8 += "new Chart(document.getElementById(\"line-chart8\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Temperature_Data)
                            chart8 += i.ToString() + ",";
                    chart8 = chart8.Substring(0, chart8.Length - 1);
                    chart8 += "],datasets: [{ data: [";
                    String value8 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Temperature_Data)
                            value8 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value8.Length > 0)
                    {
                        value8 = value8.Substring(0, value8.Length - 1);
                    }
                    chart8 += value8;
                    chart8 += "],label: \"Temperature_Data\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart8 += "]},options: { title: { display: true,text: 'Temperature_Data', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart8 += "});";
                    chart8 += "</script>";
                    //Render the chart
                    Literal8.Text = chart8;
    
                    //Methane_Value
                    String chart9 = "";
                    chart9 = "<canvas id=\"line-chart9\" width=\"120%\" height=\"40\"></canvas>";
                    chart9 += "<script>";
                    chart9 += "new Chart(document.getElementById(\"line-chart9\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Methane_Value)
                            chart9 += i.ToString() + ",";
                    chart9 = chart9.Substring(0, chart9.Length - 1);
                    chart9 += "],datasets: [{ data: [";
                    String value9 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Methane_Value)
                            value9 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value9.Length > 0)
                    {
                        value9 = value9.Substring(0, value9.Length - 1);
                    }
                    chart9 += value9;
                    chart9 += "],label: \"Methane_Value\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart9 += "]},options: { title: { display: true,text: 'Methane_Value', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart9 += "});";
                    chart9 += "</script>";
                    //Render the chart
                    Literal9.Text = chart9;
    
                    //Charger_Temperature_Scrubber_1
                    String chart10 = "";
                    chart10 = "<canvas id=\"line-chart10\" width=\"120%\" height=\"40\"></canvas>";
                    chart10 += "<script>";
                    chart10 += "new Chart(document.getElementById(\"line-chart10\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_1)
                            chart10 += i.ToString() + ",";
                    chart10 = chart10.Substring(0, chart10.Length - 1);
                    chart10 += "],datasets: [{ data: [";
                    String value10 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_1)
                            value10 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value10.Length > 0)
                    {
                        value10 = value10.Substring(0, value10.Length - 1);
                    }
                    chart10 += value10;
                    chart10 += "],label: \"Charger_Temperature_Scrubber_1\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart10 += "]},options: { title: { display: true,text: 'Charger_Temperature_Scrubber_1', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart10 += "});";
                    chart10 += "</script>";
                    //Render the chart
                    Literal10.Text = chart10;
    
                    //Charger_Temperature_Scrubber_2
                    String chart11 = "";
                    chart11 = "<canvas id=\"line-chart11\" width=\"120%\" height=\"40\"></canvas>";
                    chart11 += "<script>";
                    chart11 += "new Chart(document.getElementById(\"line-chart11\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_2)
                            chart11 += i.ToString() + ",";
                    chart11 = chart11.Substring(0, chart11.Length - 1);
                    chart11 += "],datasets: [{ data: [";
                    String value11 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_2)
                            value11 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value11.Length > 0)
                    {
                        value11 = value11.Substring(0, value11.Length - 1);
                    }
                    chart11 += value11;
                    chart11 += "],label: \"Charger_Temperature_Scrubber_2\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart11 += "]},options: { title: { display: true,text: 'Charger_Temperature_Scrubber_2', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart11 += "});";
                    chart11 += "</script>";
                    //Render the chart
                    Literal11.Text = chart11;
    
                    //Charger_Temperature_Scrubber_3
                    String chart12 = "";
                    chart12 = "<canvas id=\"line-chart12\" width=\"120%\" height=\"40\"></canvas>";
                    chart12 += "<script>";
                    chart12 += "new Chart(document.getElementById(\"line-chart12\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_3)
                            chart12 += i.ToString() + ",";
                    chart12 = chart12.Substring(0, chart12.Length - 1);
                    chart12 += "],datasets: [{ data: [";
                    String value12 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_3)
                            value12 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value12.Length > 0)
                    {
                        value12 = value12.Substring(0, value12.Length - 1);
                    }
                    chart12 += value12;
                    chart12 += "],label: \"Charger_Temperature_Scrubber_3\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart12 += "]},options: { title: { display: true,text: 'Charger_Temperature_Scrubber_3', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart12 += "});";
                    chart12 += "</script>";
                    //Render the chart
                    Literal12.Text = chart12;
    
                    //Charger_Temperature_Scrubber_4
                    String chart13 = "";
                    chart13 = "<canvas id=\"line-chart13\" width=\"120%\" height=\"40\"></canvas>";
                    chart13 += "<script>";
                    chart13 += "new Chart(document.getElementById(\"line-chart13\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_4)
                            chart13 += i.ToString() + ",";
                    chart13 = chart13.Substring(0, chart13.Length - 1);
                    chart13 += "],datasets: [{ data: [";
                    String value13 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_4)
                            value13 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value13.Length > 0)
                    {
                        value13 = value13.Substring(0, value13.Length - 1);
                    }
                    chart13 += value13;
                    chart13 += "],label: \"Charger_Temperature_Scrubber_4\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart13 += "]},options: { title: { display: true,text: 'Charger_Temperature_Scrubber_4', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart13 += "});";
                    chart13 += "</script>";
                    //Render the chart
                    Literal13.Text = chart13;
    
                    //Charger_Temperature_Scrubber_5
                    String chart14 = "";
                    chart14 = "<canvas id=\"line-chart14\" width=\"120%\" height=\"40\"></canvas>";
                    chart14 += "<script>";
                    chart14 += "new Chart(document.getElementById(\"line-chart14\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_5)
                            chart14 += i.ToString() + ",";
                    chart14 = chart14.Substring(0, chart14.Length - 1);
                    chart14 += "],datasets: [{ data: [";
                    String value14 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Charger_Temperature_Scrubber_5)
                            value14 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value14.Length > 0)
                    {
                        value14 = value14.Substring(0, value14.Length - 1);
                    }
                    chart14 += value14;
                    chart14 += "],label: \"Charger_Temperature_Scrubber_5\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart14 += "]},options: { title: { display: true,text: 'Charger_Temperature_Scrubber_5', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart14 += "});";
                    chart14 += "</script>";
                    //Render the chart
                    Literal14.Text = chart14;
    
                    //Battery_Temperature
                    String chart15 = "";
                    chart15 = "<canvas id=\"line-chart15\" width=\"120%\" height=\"40\"></canvas>";
                    chart15 += "<script>";
                    chart15 += "new Chart(document.getElementById(\"line-chart15\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_Temperature)
                            chart15 += i.ToString() + ",";
                    chart15 = chart15.Substring(0, chart15.Length - 1);
                    chart15 += "],datasets: [{ data: [";
                    String value15 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_Temperature)
                            value15 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value15.Length > 0)
                    {
                        value15 = value15.Substring(0, value15.Length - 1);
                    }
                    chart15 += value15;
                    chart15 += "],label: \"Battery_Temperature\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart15 += "]},options: { title: { display: true,text: 'Battery_Temperature', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart15 += "});";
                    chart15 += "</script>";
                    //Render the chart
                    Literal15.Text = chart15;
    
                    //Battery_Output_Voltage
                    String chart16 = "";
                    chart16 = "<canvas id=\"line-chart16\" width=\"120%\" height=\"40\"></canvas>";
                    chart16 += "<script>";
                    chart16 += "new Chart(document.getElementById(\"line-chart16\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_Output_Voltage)
                            chart16 += i.ToString() + ",";
                    chart16 = chart16.Substring(0, chart16.Length - 1);
                    chart16 += "],datasets: [{ data: [";
                    String value16 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_Output_Voltage)
                            value16 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value16.Length > 0)
                    {
                        value16 = value16.Substring(0, value16.Length - 1);
                    }
                    chart16 += value16;
                    chart16 += "],label: \"Battery_Output_Voltage\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart16 += "]},options: { title: { display: true,text: 'Battery_Output_Voltage', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart16 += "});";
                    chart16 += "</script>";
                    //Render the chart
                    Literal16.Text = chart16;
    
                    //Battery_Input_Voltage
                    String chart17 = "";
                    chart17 = "<canvas id=\"line-chart17\" width=\"120%\" height=\"40\"></canvas>";
                    chart17 += "<script>";
                    chart17 += "new Chart(document.getElementById(\"line-chart17\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_Input_Voltage)
                            chart17 += i.ToString() + ",";
                    chart17 = chart17.Substring(0, chart17.Length - 1);
                    chart17 += "],datasets: [{ data: [";
                    String value17 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_Input_Voltage)
                            value17 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value17.Length > 0)
                    {
                        value17 = value17.Substring(0, value17.Length - 1);
                    }
                    chart17 += value17;
                    chart17 += "],label: \"Battery_Input_Voltage\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart17 += "]},options: { title: { display: true,text: 'Battery_Input_Voltage', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart17 += "});";
                    chart17 += "</script>";
                    //Render the chart
                    Literal17.Text = chart17;
    
                    //Battery_IS_Current
                    String chart18 = "";
                    chart18 = "<canvas id=\"line-chart18\" width=\"120%\" height=\"40\"></canvas>";
                    chart18 += "<script>";
                    chart18 += "new Chart(document.getElementById(\"line-chart18\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_IS_Current)
                            chart18 += i.ToString() + ",";
                    chart18 = chart18.Substring(0, chart18.Length - 1);
                    chart18 += "],datasets: [{ data: [";
                    String value18 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_IS_Current)
                            value18 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value18.Length > 0)
                    {
                        value18 = value18.Substring(0, value18.Length - 1);
                    }
                    chart18 += value18;
                    chart18 += "],label: \"Battery_IS_Current\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart18 += "]},options: { title: { display: true,text: 'Battery_IS_Current', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart18 += "});";
                    chart18 += "</script>";
                    //Render the chart
                    Literal18.Text = chart18;
    
                    //Battery_Alternator_Voltage
                    String chart19 = "";
                    chart19 = "<canvas id=\"line-chart19\" width=\"120%\" height=\"40\"></canvas>";
                    chart19 += "<script>";
                    chart19 += "new Chart(document.getElementById(\"line-chart19\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_Alternator_Voltage)
                            chart19 += i.ToString() + ",";
                    chart19 = chart19.Substring(0, chart19.Length - 1);
                    chart19 += "],datasets: [{ data: [";
                    String value19 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Battery_Alternator_Voltage)
                            value19 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value19.Length > 0)
                    {
                        value19 = value19.Substring(0, value19.Length - 1);
                    }
                    chart19 += value19;
                    chart19 += "],label: \"Battery_Alternator_Voltage\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart19 += "]},options: { title: { display: true,text: 'Battery_Alternator_Voltage', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart19 += "});";
                    chart19 += "</script>";
                    //Render the chart
                    Literal19.Text = chart19;
    
                    //Engine_Hours
                    String chart20 = "";
                    chart20 = "<canvas id=\"line-chart20\" width=\"120%\" height=\"40\"></canvas>";
                    chart20 += "<script>";
                    chart20 += "new Chart(document.getElementById(\"line-chart20\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Engine_Hours)
                            chart20 += i.ToString() + ",";
                    chart20 = chart20.Substring(0, chart20.Length - 1);
                    chart20 += "],datasets: [{ data: [";
                    String value20 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Engine_Hours)
                            value20 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value20.Length > 0)
                    {
                        value20 = value20.Substring(0, value20.Length - 1);
                    }
                    chart20 += value20;
                    chart20 += "],label: \"Engine_Hours\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart20 += "]},options: { title: { display: true,text: 'Engine_Hours', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart20 += "});";
                    chart20 += "</script>";
                    //Render the chart
                    Literal20.Text = chart20;
    
                    //Engine_Hours
                    String chart21 = "";
                    chart21 = "<canvas id=\"line-chart21\" width=\"120%\" height=\"40\"></canvas>";
                    chart21 += "<script>";
                    chart21 += "new Chart(document.getElementById(\"line-chart21\"), { type: 'line', data: {labels: [";
                    // A line chart for engine hours
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Sensor_Temperature)
                            chart21 += i.ToString() + ",";
                    chart21 = chart21.Substring(0, chart21.Length - 1);
                    chart21 += "],datasets: [{ data: [";
                    String value21 = "";
                    for (int i = 0; i < tb.Rows.Count; i++)
                        if ((tb.Rows[i]["SensorId"].ToString()) == Sensor_Temperature)
                            value21 += tb.Rows[i]["SensorValue"].ToString() + ",";
                    if (value21.Length > 0)
                    {
                        value21 = value21.Substring(0, value21.Length - 1);
                    }
                    chart21 += value20;
                    chart21 += "],label: \"Sensor_Temperature\",borderColor: \"#fc5c65\",fill: true}"; // Chart color
                    chart21 += "]},options: { title: { display: true,text: 'Sensor_Temperature', fontSize: 30},plugins: {datalabels: { display: false}}}"; // Chart title
                    chart21 += "});";
                    chart21 += "</script>";
                    //Render the chart
                    Literal21.Text = chart21;
                }
            }
            protected void PopulateData(string option)
            {
                string sql = "";
    
                if (option != null && option != "4")
                {
                    switch (option)
                    {
                        case "0":
                            sql += "SELECT * FROM [Fact].[ReadingsMinute] where DateId=0";
                            break;
                        case "1":
                            sql += "SELECT * FROM [Fact].[ReadingsHour] where DateId=0";
                            break;
                        case "2":
                            sql += "SELECT * FROM [Fact].[ReadingsDay] where DateId=0";
                            break;
                        //case "3":
                        //    sql += " WHERE [Local_Time] >= DATEADD(month, -6, GETDATE())";
                        //    break;
                        //case "4":
                        //    sql += " WHERE [Local_Time] >= DATEADD(year, -1, GETDATE())";
                        //    break;
                        default:
                            break;
                    }
                }
                ShowData(SelectFromDatabase(sql));
            }
            public DataTable SelectFromDatabase(string sql)
            {
                //Connect to the SQL server
                string myConnection = ConfigurationManager.ConnectionStrings["DataBaseConnectionString"].ConnectionString;
                SqlConnection con = new SqlConnection(myConnection);
                SqlCommand cmd = new SqlCommand(sql, con);
                DataTable tb = new DataTable();
                try
                {
                    con.Open();
                    SqlDataReader dr = cmd.ExecuteReader();
                    tb.Load(dr, LoadOption.OverwriteChanges);
                    con.Close();
                }
                catch (Exception e)
                {
                    Debug.WriteLine(e.Message);
                }
    
                return tb;
            }
    
            protected void SelectDuration_SelectedIndexChanged(object sender, EventArgs e)
            {
    
                PopulateData(SelectDuration.SelectedValue);
            }
    
            protected void BindDropDownList()
            {
                SelectDuration.Items.Add(new ListItem { Text = "Last minute", Value = "0", Selected = true });
                SelectDuration.Items.Add(new ListItem { Text = "Last hour", Value = "1" });
                SelectDuration.Items.Add(new ListItem { Text = "Last day", Value = "2" });
                //SelectDuration.Items.Add(new ListItem { Text = "Last 6 months", Value = "3" });
                //SelectDuration.Items.Add(new ListItem { Text = "Last 1 year", Value = "4" });
                //SelectDuration.Items.Add(new ListItem { Text = "All", Value = "5" });
            }
    
            public class ChartJsDataModel
            {
                public string[] labels { get; set; }
                public Dataset[] datasets { get; set; }
    
            }
    
            public class Dataset
            {
                public string label { get; set; }
                public string[] backgroundColor { get; set; }
                public string borderColor { get; set; }
    
                public int[] data { get; set; }
            }
        }
    }

    and this is the Dashboard.aspx

    <form id="form1" runat="server">
            
            <%-- Image --%>
            <table align="center">
            <tr valign="top">
            <td style="width: 100%;">
             <asp:Image ID="Image1" style="text-align:center; width: 2000px; height: 150px;" runat="server" ImageUrl="~/images/naut.svg" />
            </td>
          </tr>
            </table>
    
            <%-- Title --%>
            <table align="center">
            <tr valign="top">
            <td style="width: 100%;">
             <h1 style="text-align:center;font-size:60px;">Online Dashboarding System - SW53400206</h1>
            </td>
          </tr>
            </table>
    
            <%-- drop down menu --%>
            <table align="center">
            <tr valign="top">
                <td style="width: 100%;">
            <asp:DropDownList ID="SelectDuration" style="text-align:center; width: 700px; height: 50px;" runat="server" OnSelectedIndexChanged="SelectDuration_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
             </td>
                    </tr>
            </table>
    
            <%-- A multi-line chart --%>
            <%--<table align="center">
            <tr valign="top">
            <td style="width: 20%;">
            <div style="width:700px;"><asp:Literal ID="Literal1" runat="server"></asp:Literal> </div>
            </td>
            </tr>
            </table>--%>
    
            <%-- Acc chart --%>
            <table align="center">
            <tr valign="top">
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal1" runat="server"></asp:Literal></div>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal2" runat="server"></asp:Literal> </div>
            </td>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal3" runat="server"></asp:Literal></div>
            </td>
            </td></table>
    
            <%-- Gyro chart --%>
            <table align="center">
            <tr valign="top">
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal4" runat="server"></asp:Literal></div>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal5" runat="server"></asp:Literal> </div>
            </td>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal6" runat="server"></asp:Literal></div>
            </td>
            </td></table>
    
             <%-- other chart --%>
            <table align="center">
            <tr valign="top">
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal7" runat="server"></asp:Literal></div>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal8" runat="server"></asp:Literal> </div>
            </td>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal9" runat="server"></asp:Literal></div>
            </td>
            </td></table>
    
            <%-- Charger_Temperature_Scrubber_ chart --%>
            <table align="center">
            <tr valign="top">
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal10" runat="server"></asp:Literal></div>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal11" runat="server"></asp:Literal> </div>
            </td>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal12" runat="server"></asp:Literal></div>
            </td>
            </td></table>
    
            <%--  chart --%>
            <table align="center">
            <tr valign="top">
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal13" runat="server"></asp:Literal></div>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal14" runat="server"></asp:Literal> </div>
            </td>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal15" runat="server"></asp:Literal></div>
            </td>
            </td></table>
    
            <%--  chart --%>
            <table align="center">
            <tr valign="top">
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal16" runat="server"></asp:Literal></div>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal17" runat="server"></asp:Literal> </div>
            </td>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal18" runat="server"></asp:Literal></div>
            </td>
            </td></table>
    
            <%--  chart --%>
            <table align="center">
            <tr valign="top">
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal19" runat="server"></asp:Literal></div>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal20" runat="server"></asp:Literal> </div>
            </td>
            <td style="horizontal-align: top;">
            <div style="width:700px;"><asp:Literal ID="Literal21" runat="server"></asp:Literal></div>
            </td>
            </td></table>
        
    
        </form>

    How to implement the drop-down for every single charts? I would appreciate any help.

    Kind regards,

    Sami

    Monday, October 26, 2020 12:12 AM

Answers

  • User-1330468790 posted

    Hi samiarja,

     

    That is what I mentioned => UpdatePanel Class.

    It will take some controls, like button or drop down list as an asynchronous trigger to partially refresh the page.

     

    In your case, you could put the chart in different update panels. When you change the selected value, you will not refresh the whole page and only refresh one update panel.

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 26, 2020 10:34 AM

All replies

  • User-1330468790 posted

    Hi samiarja,

     

    I have read your codes and found that the logic of the current design is:

    • Select data from database uniformly for three kinds of chart data: minute, hour and day
    • Filter the data for the charts using SensorId (21 predefined strings)
    • Populate the filtered data for each chart in the method => private void ShowData(DataTable tb)

      

    If you want to separate each data binding process, you should add 21 drop down lists for charts and each drop down list should implement

    • change event
    • select data from database for the target chart ( where condition with SensorId)
    • bind data for chart 

    For the given page, I can see a possibility to simplify the chart binding. For example, you could construct a method, void BindChart(string literalID, DataTale tb). If you have any custom style, you could add them as a parameter or parameter array to the method.

      

    Regarding the concern about chart conflicts, each literal control has a View state which is enabled for all server controls by default so the values will be retained in the next post back. You could simply focus on the target chart (in a literal control).

    Another way would be using UpdatePanel to do an asynchronous postback which will only partial refresh the page for the target chart.

       

    Best regards,

    Sean

    Monday, October 26, 2020 3:38 AM
  • User-1313071134 posted

    Hi Sean,

    Thanks for your answer.

    What about page refresh, If I have a single drop-down menu for each chart, I am concerned that the whole page will load. Ultimately I want each chart to update on it own without affecting the whole webpage. How to overcome this issue?

    Kind regards,

    Sami

    Monday, October 26, 2020 5:26 AM
  • User-1330468790 posted

    Hi samiarja,

     

    That is what I mentioned => UpdatePanel Class.

    It will take some controls, like button or drop down list as an asynchronous trigger to partially refresh the page.

     

    In your case, you could put the chart in different update panels. When you change the selected value, you will not refresh the whole page and only refresh one update panel.

     

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 26, 2020 10:34 AM