Using amCharts to Create Beautiful Wireshark Visualizations
In this post, we’re taking a look at a method for improving the visual appeal of the Wireshark IO Graph. The IO Graph in Wireshark is fantastic for getting the bare information out of the tool to communicate to others. In some cases though, we need to provide that data in a more visually appealing manner. We’ll be using an online tool called amCharts to create our graphs using data form Wireshark.
There are several other online charting tools like amCharts. I encourage you to give some of these a shot too:
What is amCharts?
AmCharts is an advanced charting library that will suit any data visualization need. Our charting solution include Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid charts as well as Gauges.
Our charts is a completely standalone and independent library, which doesn’t require any 3rd party includes. You can download, try and even use our charts for free. Check chart demos to see all the charts in action.
AmCharts allows us to quickly upload any type of CSV data to be displayed. In our case, we’ll be using output from Wireshark. The interface of amCharts then gives us endless flexibility to modify and present our data.
Wireshark IO Graph vs. amCharts
Let’s take a look at the below screenshots. These charts display the same information – the count of HTTP packets sent, as well as the count of TCP retransmissions.
As we can see, the default display of data out of the Wireshark IO Graph is not ideal. It’s limited in presentation options, and honestly is an overwhelming amount of buttons and knobs. The amCharts chart, however, is clean, concise, and easy to read.
Creating a Chart
In this example, we will be creating the chart above using AmCharts. The purpose of this chart is to visualize the representation between TCP retransmissions and HTTP throughput. In the case of this issue, there was a bad wire causing the connection to incur significant packet loss. For this scenario, management wants to have an explanation of what happened and why there was customer impact. We want to present all of the data to them, but we want to do it simply.
To get a useful chart out of amCharts, there are three main steps we need to follow:
- Use the Wireshark IO Graph to find the data you want to present
- Copy the data to amCharts
- Tweak the amCharts display
We’ll work through each step above to get to a point where you have a chart you can share with your team.
We will be working off the data in this capture file. Feel free to work along with your own data.
Note:The data uploaded to amCharts will not contain any sensitive data. The output from Wireshark is exclusively tabular data that will not contain any additional information.
1. Use the Wireshark IO Graph to Find Your Data
We’re going into this on the assumption that you’re familiar enough with the Wireshark IO Graph to decide that you need something better. We’re going to skip over the process of creating a basic chart in Wireshark, but for a primer, you can take a look at this page.
- Open the IO Graph
- Apply the display filters you’re interested in. In this case, they are:
- Select the Copy button
Once we select the Copy button, Wireshark copies the CSV output to our clipboard. We’ll use this to paste the data to AmCharts.
2. Copy the Data to amCharts
In this step, we will take the data that’s been copied from Wireshark, open a new amChart project, and paste the copied data into the graph.
- Navigate to live.amcharts.com and select Make a Chart
- You will be asked what type of chart to create. Let’s choose Line from the Line grouping
- The default line chart and data will open and look like this:
- Remove each of the columns in the data area:
- Select the import button and paste the data copied from Wireshark to amCharts
- Update the names of the columns – This is mostly for organization
At this point, the data has been uploaded to amCharts. The next step is to modify the configuration of the data to be represented how we would like.
3. Configure the amCharts Display Options
In this step, we’ll focus on getting the data displayed in amCharts.
- Navigate to General Settings>Category field then select Time. With this step, we’re telling the chart to use the Time column for the X axis.
- Next, navigate to the Graphs folder on the left and select AmGraph-1.
- Select AhGraph-2 and follow similar steps as step 2.
- Change the Title to TCP Retransmissions
- Expand the Data Fields and scroll down to Value Field and select TCP Retransmissions.
Now we have a basic chart! Your chart should look similar to the one below. As you can see, there are still a few things we want to change – namely the chart titles.
- Chart Title is configured under the Titles folder.
- The Axis Title is configured under the Value Axis folder then Value Axis-1.
At this point, we have a basic chart showing the relevant information we need. Already, this chart is much more easy on the eyes than the default output form the Wireshark IO Graph.
There are numerous options for configuring the display of a chart. Once you’re at this point, it comes down to display preferences. In the next section, I’ll show some examples of charts created using data from packet captures. Hopefully these will give some inspiration!
Here are a couple examples of charts that can be created using packet capture data exported from Wireshark.