การสร้าง Graph โดยใช้ XHTML CSS

สร้าง Graph กับ xhtml + css ผมลองนั่งคิด หาวิธีการ และจนกระทั่งทดลองทำ ใช้กลยุทต่าง ๆ ที่พอจะมีหาได้สะสมมาจากการทำงาน ประยุคเข้าไปให้มันใช้งานได้คงเคยเห็นมาบ้างแล้วการสร้าง Graph กับ css มีบทความให้เห็นกันอยู่มากพอสมควร อาจจะใช้ java script เข้าช่วยบ้างในบางแทคนิค แต่ก็ยังรู้สึกว่า มันค่อนข้างที่จะซับซ้อนมาก ทำความเข้าใจยากมากกับ Code ของหลาย ๆ ท่าน ผมก็เลยคิดหาทางสร้างขึ้นมาใหม่ตัวหนึ่ง ซึ่งคิดว่าน่าจะเป็น Code ง่าย ๆ ที่ผมเองพอจะทำได้ และ ลองเอามาแนะนำ เผื่อเอาไปต่อยอดความคิด ประยุคใช้เผื่อจะเกิดความคิดใหม่ ๆ ในงานของเรา เป็นการคิดนอกกรอบต่อยอดไปเรื่อย ๆ ครับ

ส่วนใหญ่ที่ผ่านมาเราจะเห็นเป็นการนำเอารูปภาพสำเร็จมาวางแล้วใช้ attribute alt หรือ title เป็นตัวขยายความบ่งบอกความหมายของรูปนั้น ๆ หรือ ใช้ flash หรือ Ajax, Javascript อย่างที่เกริ่นไว้ข้างต้น (อนาคตอันใกล้ Flash จะสามารถมองเห็นได้ด้วย Search Engine แล้ว ถ้าเป็นความจริง Flash Web Designer ก็คงจะได้เฮกันล่ะครับ) แต่ผมมุ่งประเด็นไปตรงที่ว่า หากทำให้ Graph สื่อช้อมูลได้ตรงประเด็นจริง ๆ รับรู้ข้อมูลได้จริง ๆ อ่านค่าได้จริง ว่าในแต่ละข้อมูลนั้นได้เปรียบเทียบกันแล้วเป็นอย่างไร และถ้าหากว่าวันใดวันหนึ่ง file css หายไป การเรียงของข้อมูล และการให้ข้อมูลจะยังคง ปะติดปะต่อ เหมือนเดิม หรือเปล่า ไม่ใช้เป็นแค่รูปภาพที่แสดงขึ้นมาเฉย ๆ ไม่ได้บอกข้อมูล หรือรายละเอียดแต่อย่างได (ก็คือความเป็น semantic นั่นแหละ) ทำให้ข้อมูลเป็นประโยชน์ที่สุด มีประสิทธิภาพที่สุด ในการให้ข้อมูลแก่บุคคลทั่วไปที่ค้นหาข้อมูล ทั้งนี้จะได้ในเรื่องความเป็น Accessibility ในการให้ข้อมูล รายละเอียดต่าง ๆ ที่สามารถเข้าดูข้อมูลได้หลาย User ได้หลาย ๆ ทาง และรับรู้ข้อมูลได้เหมือน ๆ กัน ไม่ว่าจะเป็นการเข้าดูกับอุปกรณ์ อิเล็กทรอนิคต่าง ๆ ก็จะได้ข้อมูลที่ตรงกับความต้องการ และตรงกับการสื่อของผู้ส่งสาร (ดีไหมครับ ^^”)

บางคนก็บอกว่าไม่ต้องทำขนาดนั้นหรอก แต่ในความตั้งใจ หรือว่าหัวดื้อของผม คิดอยู่ว่าต้องทำให้ได้ ต้องมีคนให้ความสำคัญบ้างละ หรือไม่ก็ถือว่าเป็นกรณีศึกษาให้กับตัวเอง ทุกวันนี้รู้สึกว่าผมจะโดนใช้ให้ทำแต่เรื่องเดิม ๆ เลยอยากอ่านอะไรใหม่ ๆ ลองอะไรใหม่ ๆ บ้างก็ว่ากันไป งานที่มีคุณภาพ เป็นตัวบ่งบอกประสิทธิภาพ การทำงานของตัวเราเอง

ทีนี้มาดู code กันครับว่า ผมปรุงแต่งอะไรอย่างไร เพื่อน ๆ พี่ ๆ น้อง ๆ ช่วยแนะนำเพิ่มเติมด้วยนะครับ

ขอบพระคุณสำหรับ โอกาสแรกใน ThaiCSS ครับ

<div id="wrapper">
  <h1 title="Graph">Graph <span>Create Graph with xhtml + css</span></h1>
  <div id="graph">
    <ul id="rateGraph">
      <li><em>200</em></li>
      <li><em>150</em></li>
      <li><em>100</em></li>
      <li><em>50</em></li>
    </ul><!-- end rateGraph -->
    <ul id="type">
      <li>type1</li>
      <li>type2</li>
    </ul><!-- end type -->

    <dl>
      <dt>graph result</dt>
      <dd>
        <ul id="detailsGraph">
          <li>
            <em>col 1</em><br />
            <span class="rate50"><strong>type1</strong> 50</span>
            <span class="rate100"><strong>type2</strong> 100</span>
          </li>
          <li>
            <em>col 2</em><br />
            <span class="rate75"><strong>type1</strong> 75</span>
            <span class="rate150"><strong>type2</strong> 150</span>
          </li>
          <li>
            <em>col 3</em><br />
            <span class="rate120"><strong>type1</strong> 120</span>
            <span class="rate75"><strong>type2</strong> 75</span>
          </li> 
          <li>
            <em>col 4</em><br />
            <span class="rate100"><strong>type1</strong> 100</span>
            <span class="rate170"><strong>type2</strong> 170</span>
          </li>
        </ul><!-- end detailsGraph -->
      </dd>
    </dl>
  </div><!-- end graph -->
</div><!-- end wrapper -->

Click เพื่อชมตัวอย่างครับ Graph Page