The line graph

The line graph presents quantitative data over time, similar to the area graph. Each data series (each line) is color coded. Commonly used to compare multi-series data (multiple lines).


A few points about the line graph:

  • The X axis must be datetime data, when configuring for the line graph, only SharePoint datetime list columns are available for X
  • The Y axis must be numeric data (otherwise comparison is impossible), only SharePoint numeric list columns (include currency columns) are available for Y
  • The line graph supports multi-series, meaning multiple lines can be rendered in the same graph
  • The lines graph supports live data updates from SharePoint, meaning when the underlying SharePoint list data changes, the graph will gracefully update itself

Here is an example of a single-series line graph (see below example live):


Here is an example of a multi-series line graph (see below example live):


DateTime Grouping

Sometimes instead of plotting datetime data row by row, where each row of data is a dot on the line graph, you want to group datetime data. The visualizer can group datetime data on one of these levels: Year, Quarter, Month, Week, Day, Hour, Minute.

Once datetime data is grouped, the line graph can show one of these values: Minimum, Maximum, Average, Median, Sum, First, Last, Row Count, Unique values.

Consider the following example.

First we have a SharePoint list  holding the temperature measurement of three U.S. cities over time.


Now, what if we want to create a line graph, where it shows the average temperature weekly? to do so, use the following configuration:


The result as follows (see the below example live):


Visual range

When rendering, the visualizer will determine the visual range on the Y axis from data, from example, if the minimum and maximum value from your data is 20 and 80, respectively, then the line graph’s Y axis will begin at 20 and end at 80.


Users have the option to override this range to be a more inclusive range, in the above example, users can set the range to be, say between 0 and 100.


Please note, the visualizer will take into account both range user inputted and the data range from data, and use the most inclusive range.

Line shapes

You can adjust the shape of the line in the configuration panel.


These shapes are supported:

Linear (default)


Linear Closed


Step before


Step after



Basis open


Basis closed






Cardinal open


Cardinal closed



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s