Example pie chart display


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


Creating a new slice

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.


Removing a slice

Remove SliceEdit

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.

Table EditingEdit

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.


Sample PHP server script


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.


The whole interaction is implemented in Javascript and HTML, often using the Javascript to dynamically generate HTML. Javascript is used to handle the mouse events, create a PieChart object, and dynamically generate and update the HTML used to display the data table/form. HTML is used to create the canvas element which draws within the browser and the accompanying form.

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.

Javascript Edit

Javascript is used to handle the mouse events such as double click, single click, right click, mouse move and mouse up, which all trigger graphical changes with the chart, as described previously. Furthermore, the calculations for the pie chart, such as the angles and borders of the slices, are done with a Pie Chart object created within Javascript.

Javascript is also used to dynamically generate and update the HTML for the form displayed at the bottom of the page. In order to accurately reflect any changes within the graphical chart, the Javascript accesses the form through the DOM, removes all the rows and then regenerates them with the updated values.


The two main HTML components are the canvas and the form. The graphical chart is drawn on the HTML canvas, which is cleared and redrawn every 20 ms to accurately reflect all changes made by the user. The form is generated dynamically within the Javascript file as soon as the first slice is created, and updates accordingly, as described above.

XML [Optional] Edit

The current implementation allows the user to pass the Javascript initPieChart() function an XML file that already contains pie chart data. The pie chart would then be created from this default data, and the user could then change it accordingly. The use of an XML file is completely optional, and without it, the pie chart defaults to having no slices. Currently, the XML file must be formatted with the correct tags of <name> and <percent>, which tell the Javascript file how and what to use as the chart data.

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 interaction is encapsulated as a Javascript file, and the pie chart information can be sent to a server through the HTML form at the bottom and processed by a CGI script. To use the chart, the user must first include the Javascript file, pieChart.js, in the HTML header, call initPieChart(), and then declare an empty canvas tag. To both integrate with the server and to upload existing chart data, initPieChart() can be called with three parameters: input XML file, output CGI server script, and desired radius of pie chart. The default for the first two parameters is an empty string (do nothing), and the default radius is 120 pixels. The following code snippet shows how easy it is to re-use the application and include it in a short HTML file:

<script type="text/javascript" src="pieChart.js"></script>
<body onLoad="initPieChart('data.xml', '', 120);">
<canvas id="canvas"></canvas>

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.

Another strength of this implementation is how easy it is to develop and encapsulate because the data processing in the browser was coded in Javascript. The user only needs to include the Javascript file in the HTML header and make a call to initPieChart() in order to display the interactive graphical pie chart on the page. The interaction is client side so no data needs to be fetched while the user is interacting with the chart. No refreshes are required and the interaction can proceed smoothly. For further server interaction, parameters can be passed to initPieChart() indicating what scripts to call.


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.

Lastly, the current implementation may have some browser compatibility issues. The script was tested and runs correctly on Firefox, but because it's HTML and Javascript dependent, it may not work on all browsers, and in fact does not work at all on IE which does not currently have support for the canvas tag.


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.

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.