Making chart information with Jschart

Source: Internet
Author: User
Tags httpcontext

This use Jschart do, but there is a problem, is the cue point because the scroll bar sliding will be absolute positioning, resulting in the cue point where the need to prompt not coincident, temporarily found no solution, egg pain ...

dictionary<string, object> result = new dictionary<string, object> ();            list<data> Data = new list<data> ();            Result. ADD ("Access", Getdata_exec (All_amount));            Result. ADD ("Pay", GetList (GetTable (Sql_pay), Optiontype, Day));            Result. ADD ("Received", GetList (GetTable (sql_received), Optiontype, Day));            Result. ADD ("Payable", GetList (GetTable (sql_payable), Optiontype, Day));            Result. ADD ("Receivable", GetList (GetTable (sql_receivable), Optiontype, Day));            JavaScriptSerializer JSS = new JavaScriptSerializer ();            String str = JSS. Serialize (result);            HttpContext.Current.Response.Clear ();            HttpContext.Current.Response.Write (str);            HttpContext.Current.Response.End ();
function Paintchart () {if ($ ("#startTime"). Val () >$ ("#endTime"). Val () | |        ($ ("#startTime"). Val () >getnowformatdate ("Month") &&$ ("#startTime"). Val () >getnowformatdate ())            {layer.msg ("Please enter the correct time");        Return        } var BeginTime =$ ("#startTime"). Val ();        var EndTime = $ ("#endTime"). Val ();        var optiontype=$ (' input[name= ' Optiontype "]:checked '). Val ();        Begintime= "2016-01-01"; $.ajax ({url: '/webui_index.aspx?method=getdata ', type: ' POST ', data: {Begintime:begint IME, Endtime:endtime,optiontype:optiontype}, DataType: "JSON", Cache:false, Async:fals                E, success:function (obj) {var myArray0 = new Array ();                var myArray1 = new Array ();                var myArray2 = new Array ();                var myArray3 = new Array (); $ (Obj.pay). each (function () {Myarray0.push ([This.time, THis.amount]);                });                $ (obj.received). each (function () {Myarray1.push ([This.time, This.amount]);                });                $ (obj.payable). each (function () {Myarray2.push ([This.time, This.amount]);                });                $ (obj.receivable). each (function () {Myarray3.push ([This.time, This.amount]);                });            Linepaint ("Statistical graph table", MyArray0, MyArray1, MyArray2, MyArray3, "Access", "Login", "Download", "register", "Chartcontainer");            }, Error:function (JQXHR, Textstatus, Errorthrown) {layer.msg (jqxhr.responsetext);    }        }); }//Linear, Contrast function linepaint (title, MyArray0, MyArray1, MyArray2, MyArray3, Legend0, Legend1, Legend2, Legend3,        divID) {var linechart = new Jschart (divID, ' line ');        Linechart.setdataarray (MyArray0, legend0);        Linechart.setdataarray (MyArray1, LEGEND1); Linechart.setdataarray (MYArray2, Legend2);        Linechart.setdataarray (MyArray3, Legend3); Linechart.setlinecolor (' #FF0000 ', legend0);  //Note: The color of the first line   Linechart.setlinecolor (' #00FF00 ', legend1); nbsp;//Note: Color of the second line    linechart.setlinecolor (' #0000ff ', legend2);  //Note: The color of the 3rd line Linechart.setlinec Olor (' #ff6a00 ', legend3);  //Note: The color of the 4th line linechart.setsize (720,);  //Note: Width 500, height:300  Linecha Rt.settitle (title);  //Chart title    linechart.settitlefontsize (15);//Chart title size     Linech Art.setlegendshow (true);  //display legend   linechart.setlegendposition (' right top '); //Legend Display location (        can be relative position or coordinate)     Linechart.setaxisnamex ("Time");        Linechart.setaxisnamecolorx ("#ff0000");        Linechart.setaxisnamecolory ("#ff0000");        Linechart.setaxisnamey ("Number of times");        Linechart.setgraphextend (TRUE);        Linechart.settextpaddingleft (Linechart.setintervalstarty) (-100); LiNechart.setaxispaddingleft (50);        Linechart.setaxispaddingright (50);        Linechart.settooltipopacity (0);        Linechart.settooltipfontsize (18);        Linechart.setaxispaddingbottom (40);        Linechart.settextpaddingbottom (10);        Linechart.setintervalstarty (0);        Linechart.setflagradius (4);        Linechart.settooltipborder ("1px solid #000");        Linechart.setaxiscolor (' #8420CA ');        Linechart.setaxisvaluescolor (' #949494 ');        Linechart.setaxispaddingleft (100);        Linechart.setaxispaddingright (120);        Linechart.setaxispaddingtop (50);        Linechart.setaxispaddingbottom (40);        Linechart.setaxisvaluesdecimals (3);        Linechart.setaxisvaluesnumberx (10);        Linechart.setshowxvalues (FALSE);        Linechart.setgridcolor (' #C5A2DE ');        Linechart.setlinewidth (2);        Linechart.setflagcolor (' #9D12FD ');        Linechart.setflagradius (4); for (var i = 0; i < myarray0.length; i++) {Linechart.settooltip ([myarray0[I][0], legend0 + "" + myarray0[i][1], legend0]);            Linechart.settooltip ([myarray1[i][0], Legend1 + "" + myarray1[i][1], legend1]);            Linechart.settooltip ([myarray2[i][0], Legend2 + "" + myarray2[i][1], legend2]);        Linechart.settooltip ([myarray3[i][0], Legend3 + "" + myarray3[i][1], Legend3]);    } linechart.draw (); };

Cases

Making chart information with Jschart

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.