Show Sidebar Hide Sidebar

Time Series Graphs in Plotly 2.0

Create a graph that illustrates data points at consecutive time intervals.

Step 1

Try an Example

A time series graph is a great way to evaluate patterns and behavior in data over time.

After selecting 'Line plot' under 'Chart Type', you can check out an example before adding your own data. Clicking the 'try an example' button will show what a sample chart looks like after adding data and playing with the style. You'll also see what labels and style attributes were selected for this specific chart, as well as the end result.

Example after

You can also use the data featured in this tutorial by clicking on 'Open This Data in Plotly' on the left-hand side. It'll open in your workspace.

Open data

Step 2

Add Data

Head to Plotly’s new online workspace and add your data. You have the option of typing directly in the grid, uploading your file, or entering a URL of an online dataset. For this tutorial, we will use the New Zealand Weather dataset, which can be found here. Simply, copy the URL and navigate back the workspace, select 'Import' and then the 'By URL' tab. Paste the URL in the available bix. It is important to note, that Plotly accepts .xls, .xlsx, or .csv files. For more information on how to enter your data, see this tutorial.

Import data main

When your data consists of dates, it's important to format them in a specific way, otherwise Plotly won't recognize them as such. To enter dates directly in the grid, you’ll need to use these formats: yyyy-mm, yyyy-mm-dd; yyyy-mm-dd HH or yyyy-mm-dd HH:MM:SS (if your data consists of time). Note that the hour must be a number between 00 and 23, with hours 12 through 23 reserved for PM. You'll notice in the first column that we've set our dates as date-month (typing January 2000 as 2000-01, for example). For more detailed information on how to enter dates and times in the grid, and how to change the format displayed on your graph, visit this page.

Step 3

Create Chart

After adding your own data, go to GRAPH on the left-hand side, then 'Create'. Choose 'Line plot' under 'Chart type'.

Choose chart main

Click on GRAPH on the left-hand side to add your x-axis and y-axis to your line plot. After selecting ‘Line plot', you should then fill out the X and Y dropdown to create the plot.

Adding x and y axis

To add additional traces, click '+Trace' and enter the new Y value. Repeat accordingly.

Multiple Traces

This will create a raw time series plot, as seen below.

Raw chart

Step 4

Style

You can choose your colors, text position, or typeface. Click on STYLE on the left-hand side to play around with the style of your chart.

To change the color of your lines, the line thickness and line type, click on ‘Traces’ under the same STYLE tab. Note that certain colors and typeface are only available with a PRO subscription. Click here to upgrade!

Color panel

Right below that color section is 'Values Shown on Hover'. Plotly is all about interative charts, and although the x-axis shows only the year, you can hover over the plot to see the values of each month. Depending on what values you want to appear when you hover, can click on the 'X', 'Y', or 'Name'.

Hover values

Now, lets style the Axes. Navigate to'Axes' under STYLE and then select the 'Tick Labels' panel. Here, select 'Custom' in the same section, and enter the number of markers you want to show on your plot.

Hover values

To change the range of your axes, visit 'Axes' under STYLE, and add the unix timestamps in the 'X-MIN' and 'X-MAX' fields under 'Range'.

Hover values

To add a title to your plot, you can type it directly on the title by double-clicking it.

Type directly title

The same can be done for the axis labels, and legend.

Type directly axis

Another option is to visit the 'Layout' section under STYLE, click on 'Text' and enter your title in the box, as shown below.

Type in layout panel

Step 5

Save and Share

Your chart is now done! Click SAVE on the left-hand side.

Save main

After giving your file a name, select your PLOT and DATA as 'Public' or 'Private'. For more information on how sharing works, including the difference between private, public and secret sharing, visit this page.

Save pop-up

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.