Highcharts uses simple examples and asynchronous Dynamic Data Reading, while highcharts Asynchronously

Highcharts uses simple examples and asynchronous Dynamic Data Reading, while highcharts Asynchronously

Highcharts is a graph library written in pure JavaScript. It is easy and convenient to add interactive charts on websites or web applications, it is also free for personal learning, personal websites, and non-commercial use. HighCharts supports the following chart types: graph, region chart, bar chart, pie chart, scatter chart, and comprehensive chart.

Part 1: Load two JS libraries between headers.

<script src="html/js/jquery.js"></script><script src="html/js/chart/highcharts.js"></script> 

You can go to the http://www.hcharts.cn/download, there are related tutorials and instructions.

Good English can go to the official website: http://www.highcharts.com/

Part 2: JS Code

// Define a Highcharts variable. The initial value is nullvar oChart = null; // define the layout environment of oChart // composition of the layout environment: X axis, Y axis, data display, icon title var oOptions = {// set the chart Association display block and Graphic Style chart: {renderTo: 'Container ', // set the displayed page block // type: 'line' // set the display mode type: 'column'}, // The icon title: {text: 'chart display example', // set the title // text: null, // set null to not display the title}, // X axis xAxis: {title: {text: 'X axis question '}, categories: ['Jan', 'feb', 'mar ', 'apr', 'may', 'jun', 'jul ', 'up', 'up', 'oct', 'nov', 'dec ']}, // y axis yAxis: {title: {text: 'Y axis title '}, // set the Y axis title to close}, // data column series: [{data: [120,360,560, 60,360,160, 40,360, 60,230,230,300]}; $ (document ). ready (function () {oChart = new Highcharts. chart (oOptions); // asynchronously add 2nd data columns LoadSerie_Ajax () ;}); // asynchronously read data and load it to the Chart function LoadSerie_Ajax () {oChart. showLoading (); $. ajax ({url: 'ajax/get_value.aspx ', type: 'post', dataType: 'json', async: false, // the newly added series contentType can be processed only after synchronous processing: "application/x-www-form-urlencoded; charset = UTF-8", success: function (rntData) {var oSeries = {name: "Article 2", data: rntData. rows1}; oChart. addSeries (oSeries) ;}}); oChart. hideLoading ();}

Part 3: C # code

Response. clear (); Response. write ("{\" rows1 \ ": [10, 20, 30, 40, 50,200, 70,100, 90,200,100, 60]}"); Response. end (); the output data format is {"rows1": [10, 20, 30, 40, 50,200, 70,100, 90,200,100, 60]}. The output data format is {"rows1 ": [50,200, 70,100, 90,200,100, 50,200, 70,100, 60], "rows2": [90,200,100, 60]}

Part 4: HTML page code

<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>

I will share with you a piece of code about highcharts asynchronous data acquisition.

Asynchronous Page code

$ (Function () {var chart_validatestatics; $ (document ). ready (function () {var options_validatestatics = {chart: {renderTo: 'iner iner _ validatestatics ', type: 'column'}, title: {text: 'ticket analytics '}, subtitle: {text: 'tourol. cn '}, xAxis :{}, yAxis: {title: {text: 'Students }}, plotOptions: {bar: {dataLabels: {enabled: true }}}, tooltip: {formatter: function () {return '<B>' + this. x + '</B> <B R/> '+ this. series. name + ':' + this. y + 'people' ;}}, credits: {enabled: false}, series: [{name: "ticket user", width: 3}]} $. get ("/ajaxhandler/dataupdate. ashx? Operate_type = validatestatics ", function (data) {var xatrnames = []; var yvalidators = []; for (var I = 0; I <data. rows. length; I ++) {xatrnames. push ([data. rows [I]. atrname]); yvalidators. push ([data. rows [I]. atrname, parseInt (data. rows [I]. nums)]);} alert (xatrnames + yvalidators); options_validatestatics.xAxis.categories = xatrnames options_validatestatics.series [0]. data = yvalidators; chart_validatestatics = new Highcharts. chart (options_validatestatics );});});});

Note: After the x-axis array is defined, when defining the y-axis data, you must also push the corresponding value on the X-axis to the array. Otherwise, the data cannot be displayed.

In ajaxhandler, concatenate the string and return it.

string json = "{\"rows\":[";  for (int i = 0; i < datas.Rows.Count; i++)  {   json += "{\"atrname\":\"" + datas.Rows[i]["name"] + "\",\"nums\":\"" + datas.Rows[i]["nums"] + "\"},";  }  json = json.TrimEnd(',');  json += "]}";  context.Response.Write(json);  context.Response.Flush();  context.Response.End(); 

Articles you may be interested in:

• Pure JAVASCRIPT chart animation plug-in Highcharts Examples
• Highcharts demo of a very practical Javascript Statistical Chart
• How to dynamically generate charts using JQuery Highcharts
• Analysis of jquery's js chart component highcharts
• JQuery. Highcharts. js
• PHP + mysql + Highcharts generate pie chart
• Summary of the use of HighCharts chart controls in ASP. NET WebForm (all)