HighChat dynamically binds data records and highchat bindings

HighChat dynamically binds data records and highchat bindings

Recently, I started to perform graphic operations and struggled for a long morning. I had no idea how to bind the highchat dynamic data. I tried multiple times and found that

1. The data on the X axis is in an array format. When I transfer the data from the background to the foreground, js uses arrays to process the data. If I assign values to chat, no error will be reported,

2. The data on the Y axis is different from that on the X axis. After array processing, the data cannot be displayed. Later, I added brackets [] in the background and uploaded the data to the foreground. Then, after processing the data with eval (), the foreground will be able to display the data.

3. eval has the computing function. At the beginning of the X axis, I used eval to perform operations on the time and found that the time was reduced. The format is, and the format is 1998.

The following is my background and foreground program logic:

1. Background MVC Controller

1  public ActionResult Index()2         {3             return View();4         }5         public ActionResult GetAllReport()6         {7             var result = new { key = "2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02,2017-01-02", value1 = "[9,23,24,54,67,1,23,45,23,444,55,89]", value2 = "[99,89,78,67,76,75,49,47,21,32,33,55]" };8             return Json(result);9         }

 

2. Front-end:

@ {Layout = null ;}<! DOCTYPE html> 

In addition, there are some small processes.

1. When two broken lines are repeated, data must be displayed when you move the cursor up.

tooltip: {shared: true}

2. Remove the highchat.com URL

credits: { enabled: false}

 

3. When refreshing data, clear the last line chart.

function clearTable() {   var series = chart.series;   if (series.length > 0) {         series[0].remove(false);     }}