HTML5: Use rgraph to draw a line chart (2)

Source: Internet
Author: User

As mentioned above, showcheckbox (canvasid, jsonresult)

 Function showcheckbox (canvasid, jsonresult) {J = 4;// J is the position where the DIV is inserted, <span>, <br/>, <br/>, and <br/>  VaR Parentitem = Document. getelementbyid (canvasid). parentnode; // obtain the DIV  VaR Spacediv = Document. createelement ( "  Div  "  ); Spacediv. innerhtml = " <Br/>  "  ; Parentitem. insertbefore (spacediv, parentitem. childnodes [  3  ]); // Add <br/> to Div  For (I = 0 ; I <jsonresult. length; I ++ ) {Name = "  CB  " + (I + 1  ); Cb = Document. createelement ("  Input  "  ); Cb. Type = "  Checkbox  "  ; Cb. ID = Name; CB.  Checked = True  ; Cb. onclick = Freshowrgraph; // Add the onclick event CB. Value = 1 ; Name = "  LB  " + (I + 1  ); Lb = Document. createelement ( "  Label  "  ); Lb. ID = Name; lb. innerhtml = Jsonresult [I]. datatitle; parentitem. insertbefore (CB, parentitem. childnodes [J ++]); // Insert checkbox parentitem. insertbefore (LB, parentitem. childnodes [J ++ ]); // Insert label} showrgraph (canvasid, jsonresult,  Null  );}
 Function freshowrgraph () {ID = Arguments [ 0  Pai.tar get. ID; // get the checkbox ID  VaR CB = Document. getelementbyid (ID );
// Check whether If (Cb. value = 1 ) {CB. Checked = False ; Cb. Value = 0 ;} Else If (Cb. value = 0 ) {CB. Checked = True ; Cb. Value = 1 ;} VaR DIV = arguments [ 0 Pai.tar get. parentelement; // because the div id is div1 in sequence, and the div2... line ID is also line1, line2..., you can find the line index through the DIV index value. = Div. Id. substring ( 3 ); VaR Datas = eval ( " Line " + Index + " Jsonobj " ); // Eval (OBJ) VaR Sourcedatas = New Array (); // if this row does not exist, each datas change will affect the source data, so that the data can only be changed less, instead of starting from scratch. VaR Colorindexs = New Array (); // color array, save the line color For ( VaR I = 0 ; I <datas. length; I ++ ) {Name = " CB " + (I +1 ); Try { If (Document. getelementbyid (name). value = 1 ) {Sourcedatas. Push (datas [I]); colorindexs. Push (I );}} Catch (E) {}} lineid = " Line " + Index; line =Document. getelementbyid (lineid); showrgraph (lineid, sourcedatas, colorindexs );}

 

Obviously, showgraph (canvasid, jsonresult, colorindexs) is the key.CodeInsert a checkbox to each Div. It is worth noting that the selection of the insert position and the value determine whether to check the checkbox (perspiration, ignorance). In addition, The onclick event is set for the checkbox, the second code

The eval () function in the second section of the Code is a powerful feature (once again less ignorant), For details, see the http://www.w3school.com.cn/js/jsref_eval.asp, the eval in the second section of the Code in the above uses the reflection-based mechanism to get a JSON object

You know, next time we will detail showrgraph (canvasid, jsonresult, colorindexs)

 

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.