locked
How to add multiple charts using Chart.js in ASP.NET (web application)? RRS feed

  • Question

  • Hi all,

    I am creating a front-end application on ASP.NET web application using chart.js charting tool.

    I was able to plot one chart using data I have in SQL server. It look like this:

    This is the code I used to plot the chart above

    protected void Page_Load(object sender, EventArgs e)
            {
                //Connect to the SQL server
                string myConnection = ConfigurationManager.ConnectionStrings["DataBaseConnectionString"].ConnectionString;
                SqlConnection con = new SqlConnection(myConnection);
                String query = "SELECT TOP (1000)[Engine_Hours],[Local_Time_Seconds] FROM [DADLoggerTable].[dbo].[DADLoggerTable]";
                SqlCommand cmd = new SqlCommand(query, con);
                DataTable tb = new DataTable();
                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=\"100%\" height=\"40\"></canvas>";
                    chart += "<script>";
                    chart += "new Chart(document.getElementById(\"line-chart\"), { type: 'line', data: {labels: [";
    
    
                    //Select the first 460 data points
                    for (int i = 0; i < 460; 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: \"#3e95cd\",fill: true}"; // Chart color
                    chart += "]},options: { title: { display: true,text: 'Engine Hours (hr)'} }"; // Chart title
                    chart += "});";
                    chart += "</script>";
    
                    //Render the chart
                    ltChart.Text = chart;
                }
            }

    I want to be able to place charts on the top of each other and next to each other like those ones below.

    I would much appreciate any idea to get this working.

    Thank you in advance.

    Sami


    Sami Arja



    • Edited by samiarja Friday, June 12, 2020 7:59 AM text editing
    • Moved by CoolDadTx Friday, June 12, 2020 1:17 PM ASP.NET related
    Friday, June 12, 2020 7:56 AM

All replies

  • Please use the following forum 

    https://forums.asp.net/37.aspx/1?C+


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange

    Friday, June 12, 2020 11:08 AM