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

[samiarja]

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["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

Continue reading...