Jqplot, a jquery drawing plugin for this JavaScript framework

Because the project needs to do the function of the report, so learned how to use Jqplot this drawing plug-in

Combining Ajax technology to dynamically interact with background data

It took three or four days to the fore and the aft.

Feel it will come out to say also can.

My background template is bootstrap, there are jqplot templates in the template, I look at the source code. The source code has been modified to form what is now,

1<script>2     /*3 template Name:color admin-responsive Admin Dashboard template build with Twitter Bootstrap 3.2.04 version:1.4.05 Author:sean Ngu6 Website:http://www.seantheme.com/color-admin-v1.4/7     */8     9     Ten</script> One<script> A $.ajax ({ -Type: ' POST ', -DataType: ' JSON ',//JSON Object theURL: "Ticket!result.action", -Data:NULL, - success:function (response, status, XHR) { -                 //var s = ""; +var a = []; - $.each (response,function (index, value) { +                     //alert (index); Aa[index+1]= This; at                     //alert (this); -                     }) - App.init ();  -var blue= "#348fe2", bluelight= "#5da5e8", bluedark= "#1993E4", aqua= "#49b6d6", aqualight= "#6dc5de", aquadark= "#3a92ab" , green= "#00acac", greenlight= "#33bdbd", greendark= "#008a8a", orange= "#f59c1a", orangelight= "#f7b048", orangedark= "# C47d15 ", dark=" #2d353c ", grey=" #b6c2c9 ", purple=" #727cb6 ", purplelight=" #8e96c5 ", purpledark=" #5b6392 ", red=" #ff5b57 "; -var handleinteractivechart=function () -                 { in"Use Strict"; - function e (e,t,n) to                 { +$ (' <div id= ' tooltip ' class= ' flot-tooltip ' > ' +n+ ' </div> '). css ({top:t-45,left:e-55}). AppendTo ("Body"). FadeIn (200)} -                 if($ ("#interactive-chart"). length!==0) the                 { *                 //Sales $var t=[[1,a[1]],[2,a[2]],[3,a[3]],[4,a[4]],[5,a[5]],[6,a[6]],[7,a[7]],[8,a[8]],[9,a[9]],[10,a[10]],[11,a[11]],[ 12,a[12]]];Panax Notoginseng                 //Gold Discount -                 //var n=[[1,0.10],[2,0.6],[3,0.10],[4,0.12],[5,0.18],[6,0.20],[7,0.25],[8,0.23],[9,0.24],[10,0.25],[11,0.18], [12,0.30],[13,0.25],[14,0.25],[15,0.30],[16,0.27],[17,0.20],[18,0.18],[19,0.31],[20,0.23]]; the                 //Silver Discount +                 //var p=[[1,0.30],[2,0.16],[3,0.11],[4,0.2],[5,0.28],[6,0.10],[7,0.15],[8,0.23],[9,0.14],[10,0.15],[11,0.28], [12,0.20],[13,0.15],[14,0.15],[15,0.20],[16,0.17],[17,0.10],[18,0.28],[19,0.21],[20,0.23]]; A                 //Adult the                 //var q=[[1,1],[2,1],[3,1],[4,1],[5,1],[6,1],[7,1],[8,1],[9,1],[10,1],[11,1],[12,1],[13,1],[14,1],[15,1],[ 16,1],[17,1],[18,1],[19,1],[20,1]]; +                 //Children -                 //var q1=[[1,0.5],[2,0.5],[3,0.5],[4,0.5],[5,0.5],[6,0.5],[7,0.5],[8,0.5],[9,0.5],[10,0.5],[11,0.5],[12,0.5], [13,0.5],[14,0.5],[15,0.5],[16,0.5],[17,0.5],[18,0.5],[19,0.5],[20,0.5]]; $                 //one year of data, it takes a year. $var r=[[1, "January"],[2, "February"],[3, "March"],[4, "April"],[5, "May"],[6, "June"],[7, "July"],[8, "August"],[9, "September"],[10, "October"],[11, "November"],[ 12, "December"]]; -$.plot ($ ("#interactive-chart"), [{data:t,label: "Sales Statistics", Color:blue,lines:{show:true, fill:false, Linewidth:2},points:{show:true, Radius:3,fillcolor: "#fff"},shadowsize:0}, -                                             ], the{xaxis:{ticks:r,tickdecimals:0,tickcolor: "#ddd"}, -Yaxis:{ticks:10,tickcolor: "#ddd", min:0,max:10000},WuyiGrid:{hoverable:true, clickable:true, Tickcolor: "#ddd", Borderwidth:1,backgroundcolor: "#fff", BorderColor: "#ddd"},legend:{labelboxbordercolor: "#ddd", Margin:10,nocolumns:1,show:true}}); thevar i=NULL; -$ ("#interactive-chart"). Bind ("Plothover"), Function (t,n,r) { Wu$ ("#x"). Text (N.x.tofixed (2)); -$ ("#y"). Text (N.y.tofixed (2)); About                 if(R) $                 { -                 if(i!==R.dataindex) -                 { -I=R.dataindex; A$ ("#tooltip"). Remove (); +var s=r.datapoint[1].tofixed (2); thevar o=r.series.label+ "" +s;e (r.pagex,r.pagey,o)} -              $                 } the                 Else{ the$ ("#tooltip"). Remove (); theI=NULL the                 } - T.preventdefault ()})}; invar dashboard=function () {"Use strict"; the                 return{init:function () {Handleinteractivechart ();}}} () the dashboard.init (); About                  the                  the             }, the error:function () { +Alert ("Load Failed"); -             } the     Bayi         }) the              the              -</script>

Jqplot, a jquery drawing plugin for this JavaScript framework