[ASP.NET] Highcharts combines Asp.net to realize dynamic data stock graph display examples

The specific application market for this example is that I need to read the price of a commodity from the database regularly, and then display it on the web page as a graph, similar to the price trend chart of trading instruments in stocks.

I use asp.net, combined with the Highcharts plugin implementation in jQuery, the plugin can support many types of graphics, but they are static, and the examples provided need to be transformed, interested friends can go to the Highcharts official website to see (http://www.highcharts.com/), which provides a lot of demos, to be honest, to realize my needs, I should use Highstock, However, after looking at the dynamic-update example of Highcharts, I can also realize that my requirements interface is more concise, so this article uses the dynamic-update model in Highcharts, and the graphics type is spline. The final effect map is as follows (the price of Pinqijin is updated every 10 seconds, and a point is added to the line graph every 10 seconds):

Achieve step gathering:

Create a new website with VS and create a asp.net page DynamicUpdate.aspx, the page code is as follows:

Highcharts property renderTo indicates display containers,

events represents the event that the container needs to register, where load means that it occurs after the loading is completed, here a js timer is set in the load, which occurs once every 10 seconds, and the code in it is to request the latest GOLD from the dataupdate.ashx file of the ajaxhandler folder in the same root directory as the DynamicUpdate.aspx page through ajax in jQuery The price data of the variety, here is why I add randomCode + "=" + oldrandomCode in the ajax URL because adding a random number can avoid caching, and flag=1 is because my dataupdate.ashx file wants to accept multiple requests from different ajax, so use flag to distinguish it

xAxis represents the collection of attributes defined for the x-axis of the container, type represents the displayed text type, optional, here I fill in the time type, here note that the default for the instance is GMT time, you can also use UTC time, but we generally use Beijing time, (GMT or UTC) + 8 hours = Beijing time, so when we use ajax to get the time is Beijing time, we should subtract 8 hours from the hour (here I also want to share an experience, How to convert server time to js time that can be used by the .getTime() method, that is, subtract the server time from 1970-1-1, convert the remaining days to milliseconds, and then assign a value to the newly initialized time through the setTime method in js, I found that the result obtained by getTime() is incorrect to initialize a js time directly in js in the form of new Date (year, month, day, hour, minute, second, millisecond) with getTime(), As for why 1970-1-1 is subtracted, it is because the definition of the getTime() method is to get the number of milliseconds from the current time from 1970-1-1), when the x-axis is not displayed as a time or you need to define it yourself, it can also be defined by the categories attribute, tickPixelInterval represents the density of the x-axis, and labels is used to format the display format of the x-axis

yAxis represents a collection of attributes defined for the y-axis of the container, which is roughly the same as the attributes of the x-axis, but in Highcharts it is not possible to define the fixed value of the y-axis through categories, the y-axis of Highcharts is automatically generated based on the given coordinate point data, which depends on the data sub-attribute of the series attribute, for example, when you assign a value to data The maximum value is 300, and the minimum value is 100. Then the display of the y-axis will be between 100 and 300, or you can also set the max or min attribute of yAxis

series represents the collection of all curves displayed in the container, here I only show one curve, name represents the name of the curve, data represents the collection of a series of coordinate points of the curve, x is in front, y is behind, it is a js array, in this case, because the x-axis shows time, so the x property of the array object must be set to time, but in Highcharts it is not directly assigned time to the x-axis, Instead, the number of milliseconds between 1970-1-1 and a certain time is assigned to the x-axis to represent this time, so the getTime() method must be used, the form of the y-axis coordinate point must be y = small number * integer form, and I didn't understand why Highcharts had to do this, because the price data of the variety in this example is generally about the same, so I had to divide by 200 when obtaining the data, and then multiply by 200 when assigning a value to the y-axis.

<%= jsonstr %> in the page code is the initial data I need to get from the server to initialize the graph, the cs generation of the page

Among them, the TabMerPrice table is the variety price information table, TMPTime time, TMPPrice price, TMPTime time interval is ten seconds, I use a database job to generate the record of the table, which happens once every ten seconds

AddHours(-8) is to convert the time to Beijing time, and the generated data format is json format

The dataupdate.ashx code looks like this:

This is the rough implementation of step aggregation, which can realize the real-time display of server-side data with a graph similar to the stock format

HighCharts演示.zip (48.69 KB, Number of downloads: 1)