Making dynamic charts with the Highcharts plugin

Original: Make dynamic chart with Highcharts plugin

Recommend a JS plugin for drawing the chart highcharts, the specific operation can refer to the official website: http://www.hcharts.cn/

1. The following is the graphic effect I produced as follows, of course, the effect is far more than these, we can further study!

2. Let me explain how it's made.

First you need to download and introduce highcharts.js file <script src= ". /.. /scripts/highcharts.js "type=" Text/javascript "></script>

3. Background stitching the data required for the Hightchart, the data in the DataTable, the output area SF and the output of the work are two kinds of data in Highcharts respectively

  　　　　　　　　　 //Assemble data in a DataTable in a highcharts-recognizable format
StringBuilder categories =NewStringBuilder ();
　　　　　　　　　 //series_sf for output area SF data StringBuilder SERIES_SF=NewStringBuilder ();
　　//SERIES_WH output data for hours　　　　　　　 StringBuilder SERIES_WH=NewStringBuilder (); Dictionary<string,string> objdic =Newdictionary<string,string>(); //the numbers required to add highchartsx,y axes to the loop                 for(inti =2; I < table. Columns.count; i++)                {
　　　　　　　　　　　　//x-axis required by the  categories. AppendFormat (table. Columns[i]. ColumnName+",");

//y Axis output area SF required for the numbers                      if(string. IsNullOrEmpty (table. rows[0][i]. ToString ())) {series_sf. AppendFormat ("0,"); }                    Else{series_sf. AppendFormat (table. rows[0][i]. ToString () +","); //y  The required numbers for the output of the axis work                      if(string. IsNullOrEmpty (table. rows[2][i]. ToString ())) {Series_wh. AppendFormat ("0,"); }                    Else{series_wh. AppendFormat (table. rows[2][i]. ToString () +","); }                }                //Delete One of the most superfluous "," numbers                if(table. Columns.count >0) {categories. Remove (categories. Length-1,1); SERIES_SF. Remove (SERIES_SF. Length-1,1); Series_wh. Remove (SERIES_WH. Length-1,1); } objdic.add ("Categories", Categories.                ToString ()); Objdic.add ("SERIES_SF", SERIES_SF.                ToString ()); Objdic.add ("SERIES_WH", Series_wh. ToString ());

// convert to JSON format data, return to foreground interface                  returnCommon.JsonHelper.ToJson (Objdic);

4. Reception accepts data

{"Categories":"03/01,03/02,03/03,03/04,03/05,03/06,03/07,03/08,03/09,03/10,03/11,03/12,03/13,03/14,03/15,03/16,03/17,03/ 18,03/19,03/20",

"SERIES_SF":"0,0,0,50.94,0,47.60,8.72,0,0,8.00,0,62.96,50.94,101.88,25.47,0,0,52.50,25.47,0",

"SERIES_WH":"0.00,0.00,0.00,2.12,0.00,1.98,0.36,0.00,0.00,0.33,0.00,2.62,2.12,4.25,1.06,0.00,0.00,2.19,1.06,0.00"}

5. Bind and Load Highcharts

//Drawing Two hybrid images of y axes                    varOptions ={chart: {
　　　　　　　　　　　　　　　　 //Bind the chart to an element with ID container_day such as:<div id= "Container_day" style= "min-width:800px;height:400px;" ></div>  Renderto:'Container_day',
　　　　　　　　　　　　　　　　//Chart type Zoomtype:'XY'}, Title: {
 　　　　　　　　　　　　　　　　//The title of the chart text:'When you stop working, you produce-daily'}, Xaxis: {
　　　　　　　　　　　　　　　　The value of the//x axis is dynamically loaded in post categories: []}, Yaxi S: [{
　　　　　　　　　　　　　　　　The value of the//y axis is dynamically loaded in post labels: {style: { Color:'#89A54E'}}, Title: { Text:'Production of SF', Style: {color:'#89A54E'}}} , {title: { Text:'Work out', Style: {color:'#4572A7'}}, Labels: {style: { Color:'#4572A7'}}, opposite:true}], tooltip: {shared:true                        },
　　　　　　　　　　　　　　//Two y-axis category series: []}; //Obtain the x, Y axis value of the discount map$.post ("/pi/pdl_proctimeout_highcharts", {"bdate": $("#BDate"). Datebox ('GetValue'),"EDate": $("#EDate"). Datebox ('GetValue'),"Proccode": $("#ProcCode"). ComboBox ('GetValue')}, function (data) {varJSON = eval ("("+ Data +")"); //kidnapped fixed x axis                        varCategories = Json.categories.split (',');                        $.each (categories, function (ItemNo, item) {Options.xAxis.categories.push (item);                        }); //Kidnapped Y axis                        varSERIES_SF = Json.series_SF.split (','); varSERIES_WH = Json.series_WH.split (','); varSeries_0 ={data: []}; varSeries_1 ={data: []}; Series_0.name="Production of SF"; Series_0.color="#4572A7"; Series_0.type="column", $.each (SERIES_SF, function (ItemNo, item) {Series_0.data.push (PA                        Rsefloat (item));                        }); Series_1.name="Work out"; Series_1.color="#89A54E"; Series_1.type="Spline", Series_1.yaxis=1, $.each (SERIES_WH, function (ItemNo, item) {Series_1.data.push (par                        Sefloat (item));                        });                        Options.series.push (SERIES_0);                        Options.series.push (Series_1); varChart =NewHighcharts.chart (options); }); //End Post

Making dynamic charts with the Highcharts plugin