Time Series Graphs & Eleven Stunning Ways You Can Use Them

Many graphs use a time series, meaning they measure events over time. William Playfair (1759 - 1823) was a Scottish economist and pioneer of this approach. Playfair invented the line graph. The graph below–one of his most famous–depicts how in the 1750s the Brits started exporting more than they were importing.







This post shows how you can use Playfair’s approach and many more for making a time series graph. To embed Plotly graphs in your applications, dashboards, and reports, check out Plotly Enterprise.







1. Shaving Trends By Year

2. Tracking Temperature Data in Montreal & San Francisco

3. Economic Indicators Over Time

4. Major League Baseball Subplots

5. Airline Passengers In Small Multiples

6. Seasonal Boxplots

7. Error Bars For Monthly Snowfall

8. A Birthday Heatmap

9. An Hourly View Of 311 Calls

10. Tracking UK Election Results

11. A 3D Graph

Sharing & Deploying Plotly

First we’ll show an example of a standard time series graph. The data is drawn from a paper on shaving trends. The author concludes that the “dynamics of taste”, in this case facial hair, areTime is on the x-axis. The y-axis shows the respective percentages of men’s facial hair styles.You can click and drag to move the axis, click and drag to zoom, or toggle traces on and off in the legend. The temperature graph below , made with Python, shows how Plotly adjusts data from years to nanoseconds as you zoom. The first timestamp is 2014-12-15 08:55:13.961347, which is how Plotly formats dates. That is, `yyyy-mm-dd HH:MM:SS.ssssss`. Now that’s drilling down.One of the special things about Plotly is that you can translate plots and data between programming lanuguages, file formats, and data types. For example, the multiple axis plot below uses stacked plots on the same time scale for different economic indicators. This plot was made using ggplot2’s time scale . We can convert the plot into Plotly, allowing anyone to edit the figure from different programming languages or the Plotly web app.We have a time series tutorial that explains time series graphs, custom date formats, custom hover text labels, and time series plots in MATLAB Python , and R Another way to slice your data is by subplots . These histograms were made with R and compare yearly data. Each plot shows the annual number of players who had a given batting average in Major League Baseball.You can also display your data using small multiples , a concept developed by Edward Tufte . Small multiples are “illustrations of postage-stamp” size. They use the same graph type to index data by a cateogry or label. Using facets , we’ve plotted a dataset of airline passengers . Each subplot shows the overall travel numbers and a reference line for the thousands of passengers travelling that month.To show how values in your data are spaced over different months, we can use seasonal boxplots . The boxes represent how the data is spaced for each month; the dots represent outliers. We’ve used ggplot2 to make our plot and added a smoothed fit with a confidence interval. See our box plot tutorial to learn more.We can use a bar chart with error bars to look at data over a monthly interval. In this case, we’re using R to make a graph with error bars showing snowfall in Montreal.Our next four plots are not stricly time series plots, but they do show other approaches to visualizing data about time. The heatmap below shows the percentages of people’s birthdays on a given date, gleaned from 480,040 life insurance applications. The x-axis shows months, the y-axis shows the day of the month, and the z shows the % of birthdays on each date.Below we’re showing the most popular hourly reasons to call 311 in NYC , a number you can call for non-emergency help. The plot is from our pandas and SQLite guide We can also show a before and after effect to examine changes from an event. The plot below, made in an IPython Notebook , tracks Conservative and Labour election impacts on Pounds and Dollars.We can also use a 3D chart to show events over time. For example, our surface chart below shows the UK Swaps Term Structure with historical dates along the X axis, the Term Structure on the Y axis, and the swap rates over the Z Axis. The message: rates are lower than ever. At the long end of the curve we don’t see a massive increase. This example was made using cufflinks , a Python library by Jorge Santos . For more on 3D graphing see our Python R , and web tutorials The plot is interactive. Click and drag to spin or toggle to zoom.If you liked this post, please consider sharing. We’re @plotlygraphs , or email us at feedback at plot dot ly. We have tutorials that show how to make and embed graphs in your website, blog, or apps. To learn more about how companies are using Plotly Enterprise across different industries, see our customer stories