Making chart information with Jschart

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