X+Y graphs (Datacurve)

The Area Graph and Line Graph are similar in that they both display one or multipe datacurves in a graph containing an x- and a y-axis. For this reason these two graphs are similar in their configuration and the attributes used when defining the graph's appearance in the layout.

For both these types you can choose to use only one saved search or using multiple saved searches. This chapter will describe how you create an x+y search as well as include some useful tips for the two graph types.

Creating saved searches

When you create your graph searches, make sure of the following:

  • Make sure to set a search title that makes it easy for you and everybody else to know that this search is used in a graph. Make also sure that the name is easy to remember as you will add it to your dataset record in a later step.

  • Assign your search an internal id.

  • The search must be set to Public.

For area and line graphs the search(es) used must contain at least two columns, one labelled x and the other one labelled y. This is because the graph requires these two as parameters when generating the datacurve and all its data points.

As shown in the below example you must use the summary label if you set the Summary Type to either Sum, Count, Maximum, Minimum or Average. If you use Group or not use any summary type you must set the custom label field.

You can include more columns in your search if you want but these will not automatically be printed in the graph. Best practice is to only include the required columns.

If you create a multi search you need to make sure that you format the x- and y columns in the same way in all searches. If you for example have a date as x in one search you cannot have it as date/time in another search etc.

Area Graph

Below you will find the default attributes set for this graph type as well as an image example image of the rendered graph.

Area Graph ( single search )

<areagraph
width="400"
height="200"
align="center"
yaxis-label="y-axis label"
xaxis-label="x-axis label"
xaxis-rotate="45"
xaxis-formatter="date(yyyy-MM-dd)"
zwall-grid="horizontal"
zwall-border-color="#e8e8e8"
color-engine="[GRAPHNAME]:hue=random,luminosity=light"
>
<#if [GRAPHNAME]?has_content>
<#list [GRAPHNAME] as curve>
<datacurve name="${curve.name}" marker="circle">
<#list curve.data as item>
<sample x="${item.x}" y="${item.y}"></sample>
</#list>
</datacurve>
</#list>
</#if>
</areagraph>

Area Graph ( multi search )

<areagraph
width="400"
height="200"
align="center"
yaxis-label="y-axis label"
xaxis-label="x-axis label"
xaxis-rotate="45"
xaxis-formatter="date(yyyy-MM-dd)"
zwall-grid="horizontal"
zwall-border-color="#e8e8e8"
cumulative="true"
color-engine="[GRAPHNAME]:hue=random,luminosity=light"
>
<#if [SEARCH1]?has_content>
<datacurve name=[TITLE1] >
<#list [SEARCH1] as item>
<sample x="${item.x}" y="${item.y}" ></sample>
</#list>
</datacurve>
</#if>
<#if [SEARCH2]?has_content>
<datacurve name=[TITLE2] >
<#list [SEARCH2] as item>
<sample x="${item.x}" y="${item.y}" ></sample>
</#list>
</datacurve>
</#if>
...
</areagraph>

Line Graph

Below you will find the default attributes set for this graph type as well as an image example image of the rendered graph.

Line Graph ( single search )

<linegraph
width="400"
height="200"
align="center"
yaxis-label="y-axis label"
xaxis-label="x-axis label"
xaxis-rotate="45"
xaxis-formatter="date(yyyy-MM-dd)"
zwall-grid="horizontal"
zwall-border-color="#e8e8e8"
color-engine="[GRAPHNAME]:hue=random,luminosity=light"
>
<#if [GRAPHNAME]?has_content>
<#list [GRAPHNAME] as curve>
<datacurve name="${curve.name}" marker="circle">
<#list curve.data as item>
<sample x="${item.x}" y="${item.y}"></sample>
</#list>
</datacurve>
</#list>
</#if>
</linegraph>

Line Graph ( multi search )

<linegraph
width="400"
height="200"
align="center"
yaxis-label="y-axis label"
xaxis-label="x-axis label"
xaxis-rotate="45"
xaxis-formatter="date(yyyy-MM-dd)"
zwall-grid="horizontal"
zwall-border-color="#e8e8e8"
display-key="boxed-bottom"
color-engine="[GRAPHNAME]:hue=random,luminosity=light"
>
<#if [SEARCH1]?has_content>
<datacurve name=[TITLE1] marker="circle" >
<#list [SEARCH1] as item>
<sample x="${item.x}" y="${item.y}" ></sample>
</#list>
</datacurve>
</#if>
<#if [SEARCH2]?has_content>
<datacurve name=[TITLE2] marker="circle" >
<#list [SEARCH2] as item>
<sample x="${item.x}" y="${item.y}" ></sample>
</#list>
</datacurve>
</#if>
...
</linegraph>

Useful tips and attributes

  • Marker (Line graph only): The attribute marker located within the <datacurve> element is set to "circle" in the default code. Each data point in the graph will be displayed as a circle. You can change this attribute to other values such as "none", "line", "square", "diamond", "octagon", "uptriangle", "downtriangle". You can also add a prefix (e.g. "big circle") to change its appearance further. Read more about the marker attribute here.

  • Xaxis - and yaxis-formatter: Depending on what type of data you display in your graph you might want to format the x- and y axes. This can be done using the xaxis-formatter and the yaxis-formatter attributes. In the default code the x-axis is formatted as a date using the date() format and specified the date format within the parentheses. Other formats are for example integer(), currency() and percentage(). Read more about these attributes here.

  • Zwall: The zwall is the background of the graph. In the default code it has gray horizontal lines to easier be able to read the graph. In addition to the default setting, you can change the zwall-grid attribute so that it also displays vertical lines ("horizontal and vertical") or only "vertical".