Highcharts using simple example and asynchronous dynamic reading data _javascript techniques

Highcharts is a library of graphics written in pure JavaScript that can easily and easily add interactive graphs to Web sites or Web applications, and is available free of charge for personal learning, personal web sites, and non-commercial use. The chart types supported by Highcharts are graphs, area, histogram, pie, scatter, and composite graphs.

Part One: Load two JS libraries between head.

<script src= "Html/js/jquery.js" ></script>

Can download to http://www.hcharts.cn/, have related tutorials and use documentation.

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

Part II: JS code

Defines a highcharts variable with the initial value of NULL var ochart = null; Defines the layout environment//Layout Environment of Ochart: x axis, Y axis, data display, icon title var ooptions = {//Set Chart association display block and graphic style chart: {renderto: ' container ',//Set displayed page Block//type: ' line '//Set display mode type: ' column '},////Icon title: {text: ' Graph show example ',//Set caption//text:null,//SET NULL not Display title},//x axis xaxis: {title: {text: ' X-axis title '}, Categories: [' Out of Line ', ' Feb ', ' ' Mar ', ' Apr ', ' may ', ' June ', ' may '
  , ' Aug ', ' Sep ', ' Oct ', ' Nov ', ' Dec '},//y axis yaxis: {title: {text: ' Y-axis title '},//Set y-axis title off},//Data column series: [{ 
DATA:[120,360,560,60,360,160,40,360,60,230,230,300]}]};
 $ (document). Ready (function () {ochart = new Highcharts.chart (ooptions);
Add the 2nd data column asynchronously Loadserie_ajax (); 
}); 
  Reads the data asynchronously and loads it into the chart function Loadserie_ajax () {ochart.showloading (); 
   $.ajax ({url: ' ajax/get_value.aspx ', type: ' POST ', DataType: ' json ', async:false,//sync process to process the newly added series ContentType: "application/x-www-form-urlencoded; Charset=utf-8 ", Success:function (RntdATA) {var oseries = {name: ' Second ', data:rntData.rows1};
   Ochart.addseries (oseries);
  }
  }); 
Ochart.hideloading ();  }

Part III: C # code

Response.Clear ();
Response.Write ("{\" rows1\ ": [10,20,30,40,50,200,70,100,90,200,100,60]}");
Response.End (); 
 The data format for the output is {"Rows1": [10,20,30,40,50,200,70,100,90,200,100,60]} 
 

Part IV: HTML page code

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

Here's a piece of code for you to share. About Highcharts asynchronous fetch data

Page asynchronous Code

$ (function () {var chart_validatestatics; $ (document). Ready (function () {var options_validatestatics = {chart: {renderto: ' Container_validatestati CS ', type: ' column '}, Title: {text: ' Check ticket Analysis '}, subtitle: {text: ' tourol.cn '} , Xaxis: {}, YAxis: {title: {text: ' Number '}}, Plotoptions: {bar: {data  Labels: {enabled:true}}}, tooltip: {formatter:function () {return ' <b> '
     + this.x + ' </b><br/> ' + this.series.name + ': ' + this.y + ' person '; }, 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);
  });
 });  });

Notice here that the x-axis array is defined, and when you define the y-axis data, you push the values corresponding to the x-axis to the array, otherwise it will not show up.

Corresponding in Ajaxhandler, the string is spliced and returned.

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 ();