Your First Chart > Simple Sales Chart
In this section we will show you how to create a single series column chart to show a company's sales for the last quarter of 2008. The following table shows the data which we are going to use for the chart.
| Month |
Sales |
| October | $75,000 |
| November | $78,000 |
| December | $82,000 |
Configuring chart data
The following steps will guide you through the process of configuring chart data.
- Create a blank html page in the root directory of your Dreamweaver site and name it 'chart.html'. It is not mandatory to name it 'chart.html' - you can use a name of your choice. Now, click on the 'Insert Simple Chart' button which is located on the FusionCharts toolbar, this will launch the user interface for configuring a simple chart.
- Now, we need to configure data for our chart. This is done in the 'Data Grid' tab. The 'Data Grid' tab contains a table of sample data - delete the sample data by clicking on the 'Reset data' button.
- Use the 'Add column' button to create columns for your data table. Since our data table contains two columns; so, you would need to click the 'Add column' button twice in order to create two new columns. Notice that two columns with column index 'A' and 'B' have been created.
- Use the 'Add row' button to create rows for your data table. We would need 3 rows for our table - note, that the data table shown above contains 4 rows, but we will only be creating 3 rows, this is because column headings are not to be added in the FusionCharts data source table. The new rows that you have created will be numbered '1', '2' and '3' respectively.
- Now that the table is ready, we can begin entering data, click on the first cell of the first row and type in 'October', press the tab key on your keyboard to move to the next cell and enter the value '75000'. Fill in the remaining two rows by referring to the data table (above). Please do not enter any non-numeric characters such as '$' or ',' in column 'B'.
- Now that the table is ready it is time to classify the columns into Categories and Series. In our case column 'A' is the 'Categories' column as it will be plotted along the X axis of the chart, and column 'B' is the 'Series' column. Select column 'A' by clicking on the column index and then click the 'Add as categories' button - to designate it as a categories column. Now, select column 'B' and then click the 'Add as series' button to designate it as a series.
- In the 'Defining data to be plottedSection of the 'Data Grid' screen, you can provide a name for your Series columns. Name the Series column as 'Sales'.