JS generates a bar chart

First load the JS file: <SCRIPT src = "/script/jquery-1.3.2.min.js" type = "text/JavaScript"> </SCRIPT>

JS file to be loaded: <SCRIPT src = "/script/highcharts. js" type = "text/JavaScript"> </SCRIPT>

JS generates a bar chart

Foreground. aspx

View code

<DivID= "Chartbar"Style= "Width: pixel PX; Height: 250px; float: left"> </Div><DivID= "Chartpie"Style= "Width: 200px; Height: 250px; float: left"> </Div>
 

JS

View code

<SCRIPT type = "text/JavaScript"> VaR  Chart; $ (  Function  (){  //  =================== Age distribution bar chart ======================              VaR Line1 = <% = mantotal %>; //  Substatistical 1 Data              VaR Line2 = <% = femantotal %>; //  Substatistics 2 Data  Chart = New  Highcharts. Chart ({chart: {renderto: 'Chartbar' , Type: 'Column' }, Title: {text: 'Age distributions' }, Subtitle: {text: '' }, Credits: {enabled:  False  //  Remove the link from the official website. }, Xaxis: {categories: <% = Xaxisstr %> }, Yaxis: {min: 0 , Title: {text: 'Number of students (persons )' }}, Legend: {layout: 'Signature' , Backgroundcolor: '# Ffff' , Align: 'Left' , Verticalalign: 'Top', X: 300 , Y: 30 , Floating:  True  , Shadow:  False  }, Tooltip: {formatter:  Function  (){  Return '<B>' + This . Series. Name + ': </B>' + This . Y + 'people' ;}}, Plotoptions: {Column: {pointpadding: 0.2 , Borderwidth: 0 , Shadow:  False  }}, Series: [{Name: Male' , Data: line1}, {Name: Female' , Data: line2}]});}) </SCRIPT>

Backend. aspx. CS

View code

         Protected   String Mantotal = String  . Empty;  Protected   String Femantotal = String  . Empty;  Protected   String Xaxisstr = String . Empty;  Protected   Void Page_load ( Object  Sender, eventargs e) {binddistribution ();}  ///   <Summary>          ///  Inspection personnel distribution  ///   </Summary>          Private   Void  Binddistribution () {system. Data. datatable dt = Ds. Tables [ 0  ]; Stringbuilder SB1 = New  Stringbuilder (); stringbuilder sb2 = New  Stringbuilder (); stringbuilder sb3 = New  Stringbuilder ();  For ( Int I = 0 ; I <DT. Rows. Count- 1 ; I ++) {Sb1.appendformat (  "  {0 },  " , DT. Rows [I] [ "  Male count  "  ]. Tostring (); sb2.appendformat (  "  {0 },  " , DT. Rows [I] [ "  Female count  "  ]. Tostring (); sb3.appendformat ( "  '{0 }',  " , DT. Rows [I] [ "  Age Group  "  ]. Tostring ();} mantotal = "  [  " + Sb1.tostring (). trimend ( '  ,  ' ) + "  ] "  ; Femantotal = "  [  " + Sb2.tostring (). trimend ( '  ,  ' ) + "  ]  "  ; Xaxisstr = "  [  " + Sb3.tostring (). trimend ('  ,  ' ) + "  ]  "  ;} 

Note: Obtain dt from the database:

Shows the generation chart.

JS generate pie chart

Foreground. aspx File

View code

<DivID= "Chartpie"Style= "Width: 200px; Height: 250px; float: left"> </Div>
 

JSCode

View code

<SCRIPT type = "text/JavaScript"> VaR  Chart; $ (  Function  (){  // =================== Age distribution pie chart ==========================              VaR Data = [<% = percentagestr %> ];  VaR Piechart = New  Highcharts. Chart ({chart: {renderto: 'Chartpie' , Plotbackgroundcolor:  Null  , Plotborderwidth:  Null  , Plotshadow:  False }, Title: {text: 'Gender distribution fig' }, Tooltip: {formatter:  Function  (){  Return '<B>' + This . Point. Name + '</B>:' + This . Percentage + '%' ; }}, Credits: {enabled:  False }, Plotoptions: {pie: {allowpointselect:  True  , Shadow:  False  , Cursor: 'Pointer' , Datalabels: {enabled:  False  }, Showinlegend:  True }}, Series: [{type: 'Pie' , Name: 'Gender distribution fig' , Data: Data}]});}) </SCRIPT>

 

Backend. aspx. CS

View code

         Protected   String Percentagestr = String  . Empty; Protected   Void Page_load ( Object  Sender, eventargs e) {binddistribution ();}  ///   <Summary>          ///  Inspection personnel distribution  ///   </Summary>          Private   Void  Binddistribution () {system. Data. datatable dt = Ds. Tables [ 0 ];  For ( Int I = 0 ; I <DT. Rows. Count- 1 ; I ++ ) {Percentagestr = "  ['Male ',  " + Dt. Rows [DT. Rows. Count- 1 ] [ "  Male count  " ]. Tostring () +"  ], ['Female ',  " + Dt. Rows [DT. Rows. Count- 1 ] [ "  Female count  " ]. Tostring () + "  ]  "  ;} 

Note: dt is the same as dT used to generate a bar chart.

 

From: http://www.cnblogs.com/endora/archive/2012/12/21/endora22.html