jsxgraph is a cross-platform, cross-browser javascript library that can generate general-purpose 2D graphics. The following custom pie chart uses standard jsxgraph functions (sector, line, point, text) to replace the provided standard pie chart to show the top ten countries using the BitTorrent protocol with appropriate labels and legends on a grid display.
1. Only two files (jsxgraphcore.js and jsxgraph.css) are required. sprintf.js is included in case C-styled printf statements are needed for debugging purposes. The javascript code is generated by WordPress shortcode (chart_top10) which is written in php. mathjax.js is not needed here since there is no mathematical symbol in the pie chart. To test mathjax functionality, display the x-axis or y-axis with the appropriate labels. To avoid file permission issues, do not use soft link (ln -s). The user coordinates should be used for mathematically oriented display since it follows the Cartesian coordinate system (quadrant III has both negative x- and y-coordinates). A grid system with the origin (0,0) at the center of the board can help the placement of various graphic elements on the board accurately. The board, or drawing board, is the entire window showing the graphic elements (pie chart, labels, and legends).
2. In a nutshell, this is how jsxgraph works. A HTML element (div) of class jxgbox is used as a container to hold the drawing board. The appearance of the board is customized here via standard CSS attributes: width and height, background color or image, border control, and default text font. Since “Bitstream Charter” is used as the default body font on all local computers and servers, the rendered web page as well as the pie chart may look slightly different if this font is unavailable and “Verdana” is used instead. Thus, it is important to check for unacceptable discrepancy in appearance when rendering these pages from computers outside the local network. The WordPress shortcode generates the required javascript to display the custom pie chart.
3. All shortcodes on this site are stored in the plugin source file shorthand.php. When updating the source code of shorthand.php by Notepad++, it is not necessary to deactivate/activate the plugin. If there are issues from the php server side, use php -l shorthand.php to make sure there is no syntax error. If there are Javascript issues due to incorrect code generation, use Tools.Web Developer.Web Console on Firefox for debugging. The Debugger tab of this tool shows the actual generated and highlighted Javascript code. This facility is very helpful to deal with complex Mathjax syntax using the $ delimiter.
4. add_shortcode, add_filter
5. javascript function (id,data,attributes)
6. attributes can include inline functions. Note the use of fillOpacity and strokeOpacity. Bullets in the pie chart legend are drawn by the element Point with style [] (a square bullet). The intensity of the colors falls into the pastel spectrum due to the use of opacity.