Read the database data and display it on Highcharts

It can be seen that the horizontal ordinate data in the chart is a static number of data, so we just read from the database we want to the horizontal ordinate values, and then dynamically assigned to the chart on the line.

X-axis:

Xaxis: {categories: [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday '], the coordinate value of the//x axis title: {text: ' Week Number '},//x axis coordinate title}

Y-Axis:

YAxis: {title: {text: ' Number of people '},//y axis coordinates title
}

Main Title:

Title: {text: ' Chart main title '},//Chart main title

Subtitle:

Subtitle: {text: ' Chart sub-title '},//Chart subtitle

Y-Axis data:

series:[{Name: ' Number ', data: [20, 40, 30, 90, 100, 60, 50]}

These values we can get data from the database, and then dynamically bound up, where the background code is most commonly used in the StringBuilder, through it to piece together the data to be bound

X-axis:

Xaxis: {categories: <%= xaxiscategories%>, coordinate value of//x axis title: <%= Xtitle%>,//x axis coordinate title}

Y-Axis:

YAxis: {title:<%=ytitle%>,//y axis coordinates title}

Main Title:

Title: <%=title%>,//Chart main title

Subtitle:

Subtitle: <%=subtitle%>,//Chart subtitle

Y-Axis data:

Series:<%= seriesdata.tostring ()%>

Here's how to get the x-axis, y-axis, and caption:

public string xaxiscategories = ""; X-Axis public StringBuilder seriesdata = new StringBuilder (); Y-Axis public string title = ""; Chart title

...

Title get

title = "{text: '" + "<font color=red>" +site_name + "</font>" + "'}"; The red marked part is obtained from the database dynamically, how to get, what to get, according to you need, you should understand

X-Axis acquisition:

StringBuilder xaxiscategories = new StringBuilder ();

Xaxiscategories.append ("[");

...

foreach (DataRowView drv in DS. Tables[0]. DefaultView)

{Xaxiscategories.append ("'"); Xaxiscategories.append (drv["week number"] = = null? "0": drv["week number"].      ToString ()); Xaxiscategories.append ("',");

}

Xaxiscategories = Xaxiscategories.replace (",", "", Xaxiscategories.length-1, 1). Append ("]"). ToString (); Here is the last extra comma (,) removed

Y-Axis acquisition:

StringBuilder yaxiscategories = new StringBuilder ();

...

foreach (DataRowView drv in DS. Tables[0]. DefaultView)

{Yaxiscategories.append (drv["number"] = = null? "0": drv["number"].      ToString ()); Yaxiscategories.append (",");

}

Seriesdata.append ("[{name: ' Number ', type: ' Spline ', data: ["); Seriesdata.append (Yaxiscategories.replace (",", "", Yaxiscategories.length-1, 1)); Remove the last comma (,) seriesdata.append ("]}]");

Read the database data and display it on Highcharts