• View
• Edit
• History
• Print

JavaScript - Charting and Tooltips

Introduction: In this tutorial, you study 3 jQuery plugins and use them to make some useful charts and tooltips for a web page. The following shows a screen shot of the web page that you shall accomplish in this tutorial.

Activity One: Tooltips

• Get the HTML code for this activity: HTML code for your further work
• Study the jQuery plugin called BeautyTips.
• Add the required code in the HTML so that the navigation bar will behave as shown below:
  • The background color for the tooltips is rgb(253,246,190).
  • The font size for the tooltips is 15px.
  • The width is 70, stroke width is 2 and stroke color is #2F2922.

Activity Two: Charting with Highcharts

• Continue to use the HTML code you have after Activity One.
• Study the jQuery plugin called Highcharts.
• Add the required code in the HTML so that a column chart like the following will be shown.

• The chart will be rendered within the following element in the HTML code:

    <div id="chart-container" style="width: 100%; height: 200px;margin-bottom:10px;">
    </div>

• The following are some parameters for the chart:

      text: '大學聯招「computing」課程 分校統計'
      categories: ['港大','中大','科大','理大','城大','浸大','嶺大','公大','教院']
      data: [0,0,0,2,1,1,0,1,0]

Activity Three: Charting with jQuery Sparklines

• Continue to use the HTML code you have after Activity Two.
• Study the jQuery plugin called Sparklines.
• Add the required code in the HTML so that some bullet charts will be rendered based on the given numbers in the list.

    <li><span class="bullet">67,139,403,337,236</span> JA1626</li>
    <li><span class="bullet">62,169,457,376,274</span> JA2448</li>
    <li><span class="bullet">21,38,114,85,59</span> JA3325</li>
    <li><span class="bullet">106,220,489,409,314</span> JA3868</li>
    <li><span class="bullet">47,93,226,166,126</span> JA9707</li>

• The following are some parameters for the bullet chart.
  { type: 'bullet',width: '220px',targetColor: '#f30', performanceColor: '#5e8bc0', rangeColors: ['#eee','#ddd','#ccc'] }

Activity Four: Tooltips that display image

• Continue to use the HTML code you have after Activity Three.
• Add the required code in the HTML so that the following link will behave as shown below:
  • The tooltip will display the image (source http://img.overview.hk/jupas/bullet-chart-explain.png).

Resources and References

• BeautyTips | jQuery Plugins

• Highcharts - Interactive JavaScript charts for your webpage

• jQuery Sparklines