USER INTERFACE Edit
The idea of an interactive pie chart began while thinking of an online budgeting tool. With a given amount of money, how could the user allocate the money into different sections? One solution is an interactive pie chart.
Charts are an excellent way of visualizing useful data, however, most charts are created from spreadsheets or similar tables, which require significant manual data entry by the user. An interactive chart which allows the user to graphically edit and update the chart data, would be easier, more intuitive, and therefore more useful. This report and the accompanying class presentation describe this graphical interaction of the pie chart. The concepts of the interaction applied here can also be applied to graphically edit bar charts, line graphs, etc.
For our implementation, two methods exist to edit the pie chart. The primary method is direct manipulation of the chart using the mouse, while the second method is to manipulate the chart by editing values in an accompanying table. Both methods access the same data, so a change to the chart using the mouse will change values in the table and vice versa.
Direct Chart ManipulationEdit
Create a New SliceEdit
To create a new slice, the user only has to double click with the mouse, at which point a dialog box will pop up to ask for a label for the slice. After clicking OK, the slice will appear from the horizontal until the location of the double click. If a previous slice already exists, the new slice will appear from the edge of the previous slice to the location of the double click.
Change Size of SliceEdit
To change the size of a slice, the user only has to click on the edge of that slice and drag it around the chart to make it bigger or smaller as desired.
To remove an existing slice, the user right clicks on the slice. A dialog box will pop up to confirm removal of the selected slice. After doing so, the slice percentage will transfer to another slice.
The first column in the table shows the slice names. All the elements of the column are editable. A change made to an element in the column will be reflected in the chart when the user deselects the element or clicks the Update Chart button. The second column in the table shows the slice percentages or sizes. These can be entered and edited at will, and the application checks to make sure that the percentages sum to 100%. If they do not, the user is prompted to re-enter until the values are consistent. The table information also automatically updates any time the graphical chart is changed.
Clicking Save will submit the form information to a designated CGI script on the server. The current implementation sends the chart information to a PHP file that displays the time of submission and prints out the slice labels and values. This is a basic example, but in a given implementation, the developer would have the ability to process the data as desired.
Not essential to the implementation but also compatible with the code is the use of an input XML file to load saved data and a PHP or other CGI script to process or save the chart information from the form.
XML [Optional] Edit
PHP [Optional] Edit
The URL for a PHP or CGI script can also be passed to initPieChart(), telling the application what server side script to call to process the form once the user decides to save the chart information. This script is called when the user clicks the Save button below the form. The picture shown to the above right indicates the result of a sample PHP file written to print out the chart information.
The saveData.php shown above is one possible way of integrating with the server side, given that most of the application is purely browser side. Using a PHP script or some similar CGI server side script, the chart/form information can be submitted and processed in whatever way desired. Unfortunately, however, there is no way to 'save' or 'submit' the graphics of the chart because everything is drawn within the HTML canvas on the client side. Only the data contained in the form is sent to the server. One way of possibly 'saving' the graphical information is to have additional form fields containing the colors and relative positions of the slices, but this would complicate the user interface more. The current implementation and encapsulation is intended to be highly interactive for a user primarily on the client side.
The biggest strength of this interaction is how easy and intuitive it is for the user. Traditional pie charts are usually created out of spreadsheets or tables with data input by the user, but in the most natural interaction, the user should be able to dynamically change the chart as he or she sees fit. This interaction allows the user to make changes with simple mouse clicks and drags, without having to enter in data, while also giving the user this option. No mental math is required when the user graphically changes the size of slices, which helps facilitate the interaction.
In terms of the graphics, the current implementation does not use proprietary technology such as Flash or Silverlight. This reduces the overhead to the developer and does not require the user to download software to be able to view the interactive pie chart. As stated before, mouse interactions can be done using the basic event handlers, and data from the chart can easily be connected to a table. The canvas element will be a part of the HTML 5 standard, so eventually, this interactive pie chart will be available to all browsers.
One weakness of the implementation is that the form component is currently slightly inefficient. In order to accurately reflect any graphical changes made by the user, the script currently removes all rows in the form, and then dynamically regenerates them with HTML to include all the correct chart information. This is somewhat inefficient; however, the latency is completely invisible to the user and therefore is negligible.
As mentioned previously, another weakness of this interaction is that to 'save' the graphical information for later use is difficult because of browser side nature of the implementation. Textual information such as the names and values of the slices can be saved and submitted through a CGI script, but the graphics themselves, including the color and positioning of the slices, are difficult to save because everything is done within the HTML canvas.
POSSIBLE IMPROVEMENTS Edit
Multiple Charts Edit
The current implementation uses one pie chart and one table. It may be possible to have a scenarios where a user may want to have multiple pie charts which could relate to the same data. A possible improvement could be to modify the interaction between chart and table so that multiple charts could be used on the same data.
Value Assignment to Slices Edit
Currently the value assigned to each slice in the chart is a percentage. For the case of using a pie chart to allocate funds for a budget, it would be useful to allow the pie chart to display values for both percentages and dollar amounts and have both be editable elements.
Customizable Options Edit
There is currently one way in which the pie chart works. Ideally, a developer or user would be able to modify the chart to meet their needs. One example of customizing the pie chart is the way slice deletion works. Currently, deleting a slice adds the removed slice percentage to another slice. It may be the developers desire to have a portion of the pie chart be unallocated. Another customizable feature could be the colors used in the chart. Currently, colors are randomly generated.