Grabbing data from HTML Tables to create charts

A lot of websites present data in the form of HTML tables. Some pages may provide charts representing the data or they may not. Do you want to create a chart from one such table? If so, read on. We show you how to create a chart from such a table with a few clicks.

For the purpose of this example, we choose a Wikipedia page which contains a table which we want to create a chart from. Here is the Wikipedia page entitles List of cities by murder rate

Click here to get started.

Fetch table HTML

Enter the webpage URL into the URL field and click the Go button () at the end to fetch the web page HTML. The web page is parsed for HTML tables and Pick table field is filled in. Select a table from the select box and the HTML for the table is filled in the Enter HTML box.

Table data to CSV

After the table HTML is filled in the Enter HTML box, click the Get CSV button. Data from the table is then extracted and filled into the CSV box. The Table Header and Table Rows fields contain CSS selectors to extract table headers from the header row, and the table data from the rest of the table.

Once the CSV has been parsed, you can save the CSV to a file by clicking the Save CSV button.

Or you can click the Fill Grid button to edit the CSV in the grid editor or create a chart.

Edit CSV in the grid editor

The grid editor provides a tabular view of the data and supports a number of features including:

  • Editing data.
  • Sorting data.
  • Editing or adding new columns.
  • Merging data from another source.
  • Join data from another using a common column.

Our purpose now is to create a chart. Before we do that, we need to sort by the column Homicides per 100,000 per year in ascending order. So click on that column to sort the data as shown.

After the data is sorted, click the create chart button.

Click here to learn how to use the grid editor to cleanup and massage your data.

Creating the chart

The data is now installed into the chart editor. Here you can edit the data if required (maybe change labels, etc). To create the chart:

  • Choose the X Column. For our case it is City.
  • Choose the Y Column (or the value column). In our case, it is Homicides per 100,000 per year.
  • Select the Orientation from the dropdown and set it to Vertical.
  • Click the Draw button to render the chart.
  • The chart appears in the canvas below as shown.

Next we configure the chart.

Configuring the chart

ArgonStudio provides an extensive configurator for the chart which allows you to tweak any aspect of the chart that you can think of. In this article, we will show only the basic minimum needed to configure our current chart, to keep things simple. Using the instructions here, you can play around with the other configuration options and familiarize yourself with it.

Click the bars to open the configuration menu.

The configuration GUI is shown..

Since some of the city names are truncated at the left, we need to change the left grid offset. Click chart, followed by grid, and change left to 35%. Click Apply Changes and Close Panel at the bottom of the configurator.

We can now see that the left offset is adjusted so all the city names are visible without being truncated.

Next let us adjust the series labels.

Open the configurator, click Series, followed by label and change formatStr to <%=sprintf("%.1f", arg.value)%>.

Change position to right from the dropdown.

Click style and change color to #000000.

Finally, click Apply Changes to apply.

The chart now looks like this.

Let us now add a slider along the y-axis and increase the bar widths. The slider allows the user to zoom and pan along that axis.

Open the configurator, click on yAxis followed by axisSlider.

Turn on the slider by checking the show checkbox.

Adjust the start slider to around 70%.

Click Apply Changes.

Let us now add title and sub-title to our chart.

Click on Title and change Text to Cities with the highest homicide rates.

Click on Subtext and change it to Murder rate per 100,000 population in 2019.

Click on Apply Changes and Close Panel.

Our final chart is now ready.

Summary

In this article, we grabbed data from a Wikipedia page and created a chart in a few clicks. These include:

  • Choosing a table from the Wikipedia page.
  • Convert the data there-in to CSV.
  • Open the CSV data in the grid editor.
  • Make changes to the data if needed.
  • Open the grid data in the chart editor.
  • Create a chart and configure it.

We hope to have piqued your interest in exploring more. Thank you.

See Also