Skip to main content
Windward

Chart Tag Reference

Overview  

Chart Tag: <wr:chart ... >

 

The chart tag allows you to visually present the data stored in your data source in a variety of formats. Charts are a necessary and effective way for communicating this numerical data. The chart tag lets you create a variety of charts: column, bar, line, pie, scatter, doughnut and bubble.

 

The use of Windward's data selection wizards are available to make creating your chart easier.  

 

The look of the chart is highly customizable. You can include a title, create labels and axis titles, choose colors, include legends, format text and other objects, and add other options. Windward works with native Microsoft Office charts allowing you make use of features available to customizing and presenting your data in a tool with which you are already familiar.

 

Latest New Features

Version 12

  • Enhanced charting fidelity for PDF, HTML, and Printer output

 

Version 11

  • Charts in the template that are not chart tags but rather are just plain old office charts are now carried over to the output. If the output is the matching file type, it's an Office chart. If the format is not Office, it's a rendered PDF chart.

Back to top

Using the Chart Tag

This section contains information about how to access this Tag, what kinds of charts can be made, and includes links to videos, sample templates, examples or tutorials, and blog articles.

 

The Chart Tag button is accessible in the AutoTag tab of your MS Ribbon:

Chart Tag Icons

(v14 and earlier; v15)

Tag Default Color*

The Chart Tag simply inserts a chart, there is no [Tag] form.

AutoTag Ribbon Properties Interface*

Edit Chart Data allows you to launch the chart data selection window

  

Here are a few examples of some of the charts you can create:

 

3 Kinds of Charts  

In your template, there are three kinds of chart objects that can be used.

Office Chart Tags  

Office Chart Tags are AutoTags that look and behave like a Microsoft Office chart. These tags are only available in Word 2007+ DOCX templates. The output of an Office Chart Tag is an Office chart for DOCX, and a bitmap image for other formats.

Native Charts  

Native Charts are regular Microsoft Office charts. These tags are only available in Word and Excel 2007+ DOCX and XLSX templates. The output of a Native Chart is an Office chart if the report file format is the same as the template file format. Otherwise the output is a bitmap image.

Classic Chart Tags  

The Chart Tag has existed since long before there was support for Office Chart Tags and Native Charts, and it is still an option. It is the only option in Excel templates. The output of a Classic Chart Tag is always a bitmap image. The editor for Classic Chart Tags is the same as the advanced editor for Office Chart Tags, but it also contains formatting pages.

Common Uses

  • Visualizing data source data
  • Dynamically update charts and graphs each time a report is run
  • Charts are native Microsoft charts when output to Microsoft Office formats (DOCX, XLSX, and PPTX). Style can be adjusted but data will not change.

Back to top

Common Troubleshooting

The hybrid nature of the Office chart tag combined with the limitations of Office programmability sometimes leads to limitations and behaviors that are not intuitive. Here is a list of such things.

Set in the Tag Editor Instead of the Office chart   

There are some things which could normally be set in the Office chart, but MUST be set in the tag editor instead. If you set them in the Office chart, the value may appear to be ignored, or an error message may be given. Here is a list of these items:

  • Chart type

  • Plot data

  • Secondary axis, or axis side

See Also  

 

 

Back to Top

 

Advanced Uses

Multiple Graph Selects 

Refer to the usage and syntax section below for definition of the different graph sections.  Multiple graph selects can be used for a few reasons. One reason may be that you want to combine line and column graphs. In this case, you can use graph0 selects for the column, and graph1 selects for the line.

 

Another reason might be that you want to specify different options or formatting for certain sets of data. For example, you might want the bars to use the left y-axis, and the lines to use the right y-axis with a different scale setting.

 

Finally, you may want to merge data from different parts of a database. Typically, a view can be setup, or a different transformation of XML can be applied so that multiple sets of graph selects aren’t needed. However, if for some reason one of those two things cannot be done, it may be possible to merge the data by using multiple graph selects. For any set of selects in the chart tag, if the graph{n}-type matches and the axis settings are not different, the graphs will be plotted together; producing, for example, a single clustered column chart using data from more than one table. However, the data0 values must be equal if you want two values to fall into the same cluster – each unique data0 value is a separate category.

Repeating Categories: Values Sum By Category 

For category charts (column, bar, line, area, pie, doughnut), values are summed by category if any categories occur more than one time. For example, the following two tables are equivalent when the values are summed by category:

 

Raw chart data

chartData
category value
Category 1 10
Category 2 5
Category 2 15
Category 3 30

 

After applying summation by category

chartData
category value
Category 1 10
Category 2 20
Category 3 30

 

 

Back to Top

 

Tag Limitations

Office Chart Tags 

For an Office chart that is an AutoTag Chart Tag:

  • Word 2007+ DOCX templates only.
  • For DOCX output, the chart will copy across as is (with updated data).
  • For non-DOCX output, the chart will be rendered as a bitmap chart. See Support for Microsoft Office Charts.
  • When updating the tag in a Word table, a duplicate sub-table will be generated. This is a Word bug.
  • Chart settings (e.g. currency symbols) are hard coded in the template and cannot be changed dynamically at run time.
  • For detailed support information, see Support for Microsoft Office Charts.

Native Office Charts 

An Office chart that is not a chart tag will be handled as follows:

  • Word and Excel 2007+ DOCX and XLSX only.
  • DOCX->DOCX and XLSX->XLSX only.
    • For DOCX->DOCX and XLSX->XLSX, the chart will copy across as is.
    • For non-DOCX output, the chart will be rendered as a bitmap chart. See Support for Microsoft Office Charts.
  • AutoTags can only be used in XLSX templates on the same sheet as the chart.

Detailed list of what is and is not supported by Windward for charts in Microsoft Office

 

Deprecated Features

 

 

Back to Top

 

Advanced Definition

A ChartTag represents a single chart, which may contain multiple graphs. Some kinds of graphs can be combined, like column with column, or column with line. Other kinds, like pie and scatter, cannot. Graphs contain one or more series, which contain plot points – the data to be graphed. Each plot point is represented by the data markers appropriate to the graph – a bar in a bar chart, a point in a scatter chart, or a wedge in pie chart.

 

Since we can have multiple graphs, some attributes can occur multiple times, for example, we can have graph0-type for the first graph, and graph1-type for the second graph. For these kinds of attributes, we substitute a {n} in this documentation when we are referring to the attribute set as a whole, e.g., graph{n}-type.  

 

Back to top

Properties Tab

  • Datasource Section
    • datasource
      • Specifies the data source where the series in the selected chart where retrieve its data.
  • Standard Section
    • description
      • Enter notes and details here to description how the tag operates
    • enabled
      • Turns the tag on or off. When turned off the template will run normally but not execute this tag at runtime. Useful for debugging.
    • nickname
      • Allows you to specify a friendly name for the tag to be displayed in the template.

Back to top

Attributes in the Properties Tab

ChartTags have four select attributes that determine what data to use and how to use it. (See image below for reference)

 

  • graph{n}-select (#3)
    • This is the primary select for the entire graph data set (typical for SQL), or for the series only (sometimes used for XML).
  • graph{n}-series-select (#4)
    • This selects the series name field. One series is generated per name. If a name occurs twice, the associated plot data is merged into a single series.
  • graph{n}-rows-select (#5)
    • This is the secondary select. With SQL you usually don’t need it, and even with XML, you can sometimes adjust the XML so that you don’t need it. But it can be useful with XML if the plot points are nested under each series, in which case you need to select each series with graph{n}-select, and then you select each plot point under that series with graph{n}-rows-select. It’s like a nested foreach.
  • graph{n}-data{m}-select
    • This selects plot point coordinate fields. The {m} refers to the coordinate, for example graph0-data0-select for x, graph-0-data1-select for y.

AutoTag Interface  

The diagrams show how the query attributes map to the classic editor controls. See the table below for further details.

Remember that you can use the built in wizards to help you select the right data, to filter what data is returned, or even sort the order in which the data is presented.

Versions 14 and earlier
Versions 15 and later

 

In the following attribute definitions, {n} is the graph index. The first graph must be graph0, the second graph1, and so on. {m} is the coordinate index. The first coordinate must be data0, the second data1, and so on.

#1: Add Chart

Use this button to add another chart to be layered on your initial chart.

#2: Chart Type Use this button to change the Type of chart. Do not use MS Office's Chart Tools for this! It can adversely affect the output of your chart.
#3: graph{n}-select  

The primary select for graph{n}. The data that you want available to the x and y axis must be included in this data set.

 

It can be referenced as ${series}. To reference a SQL field, use ${series.fieldname}. To reference an XML element, use ${series.childNodeName} or ${series}/path/nodename.

  • A Typical SQL Example  

<wr:chart graph0-type="column" graph0-select="SELECT seriesName, category, value FROM chartData" graph0-series-select="${series.seriesName}" graph0-data0-select="${series.category}" graph0-data1-select="${series.value}" />

  • Typical XML Example  

<wr:chart graph0-type="column" graph0-select="/chartData/points" graph0-series-select="${series.seriesName}" graph0-data0-select="${series.category}" graph0-data1-select="${series.value}" />XML Points Grouped by Series

  • XML Points Grouped by Series 

<wr:chart graph0-type="column" graph0-select="/chartData/series" graph0-series-select="${series}/@name" graph0-rows-select="${series.point}" graph0-data0-select="${data.category}" graph0-data1-select="${data.value}" />

#4: graph{n}-series-select  

Selects the series name field. One series will be created for each unique series-name identified. If a series-name is encountered multiple times, the associated plot points are merged into a single series. If unspecified, all plot points will be merged into a single, unnamed series.

#5: graph{n}-rows-select (Optional) This is a special, secondary select, typically used when XML plot points are grouped by series. When used, it functions the same way as the graph{n}- select, but the series name is selected directly from the graph{n}-select, and then the coordinates are selected from graph{n}-rows-select. Referenced in other select attributes as ${data}.
#6: graph{n}-data{m}-select   Selects the plot point coordinate values. Drag and drop from your primary select in the data pane.
#7: data type (x axis) Select the type of data in your data source for #6. AutoTag will try and guess the type, but it is better to manually set the type of data.
#8: Switch axis left to right Click this button to change where your axis line appears for the x axis. This can be the right or left side of the graph.
#9: graph{n}-data{m}-select   Selects the plot point coordinate values. Drag and drop from your primary select in your data pane.
#10: data type (y axis) Select the type of data in your data source for #9. AutoTag will try and guess the type, but it is better to manually set the type of data.
#11:  Switch axis top to bottom Click this button to change where your axis line appears for the y axis. This can be the top or bottom border of the graph.

 

 

Back to Top

Usage and Syntax Examples

The following three examples show how to use the main select attributes defined in the AutoTag Interface image above.

Simple SQL Example 

Here’s a simple SQL example. We have the following table:

chartData
category value
Category 1 10
Category 2 20
Category 3 30

 

And we have the following tag to plot this chart data:

<wr:chart graph0-type="column" graph0-select="SELECT category, value FROM chartData" graph0-data0-select="${series.category}"graph0-data1-select="${series.value}" />

This chart tag generates the following column chart:

 

 

As you can see, graph{n}-select selects the whole data set, and it is referred to as ${series}, and you can further select fields from that series by using ${series.fieldname}.

 

Back to Top

Simple XML Example 

Let’s do the same thing with XML data. Here’s the XML document:

<chartData>
  <point>
    <category>Category 1</category>
    <value>10</value>
  </point>
  <point>
    <category>Category 2</category>
    <value>20</value>
  </point>
  <point>
    <category>Category 3</category>
    <value>30</value>
  </point>
</chartData>

 

Here’s the chart tag:

<wr:chart graph0-type="column" graph0-select="/chartData/point" graph0-data0-select="${series.category}" graph0-data1-select="${series.value}" />

Same result as the SQL example:

 

Multiple Series Example 

When there’s multiple series, you need to use the graph{n}-series-select to identify the series field. Here’s an example SQL table with multiple series of plot data:

chartData
seriesName category value
Series 1 Category 1 10
Series 1 Category 2 20
Series 1 Category 3 30
Series 2 Category 1 8
Series 2 Category 2 16
Series 2 Category 3 24

 

Here’s the chart tag we would use:

<wr:chart graph0-type="column" graph0-select="SELECT seriesName, category, value FROM chartData" graph0-series-select="${series.seriesName}" graph0-data0-select="${series.category}" graph0-data1-select="${series.value}" />

And here’s the chart we get:

 

 

Back to Top

Example of Using graph{n}-rows-select 

Now let’s do an example where we need both graph{n}-select and graph{n}-rows-select to get XML plot points nested by series. Here’s our XML document:

<chartData>
  <series name="Series 1">
    <point>
      <category>Category 1</category>
      <value>10</value>
    </point>
    <point>
      <category>Category 2</category>
      <value>20</value>
    </point>
    <point>
      <category>Category 3</category>
      <value>30</value>
    </point>
  </series>
  <series name="Series 2">
    <point>
      <category>Category 1</category>
      <value>8</value>
    </point>
    <point>
      <category>Category 2</category>
      <value>16</value>
    </point>
    <point>
      <category>Category 3</category>
      <value>24</value>
    </point>
  </series>
</chartData>

 

Since the points are nested by series, we can’t use a single select to iterate over all points. We need one select to iterate over each series, and then another one to iterate over the points in that series. Here’s the chart tag:

<wr:chart graph0-type="column" graph0-select="/chartData/series" graph0-series-select="${series}/@name" graph0-rows-select="${series.point}" graph0-data0-select="${data.category}" graph0-data1-select="${data.value}" />

 

We added the graph0-series-select this time, since we have multiple series. Since the series name is an XML attribute, we use the slash notation. For elements, we can still use dot notation, as long as they’re directly under the parent element. The plot points live under the series, so graph0-rows-select uses the ${series} variable. The plot points themselves are now selected by graph0-rows-select, so the graph{n}-data{m}-select use ${data} to get them.

 

And here’s our resulting chart:

 

 

 

 

Back to Top

Supported Chart Types 

Type

Subtype

area

  • standard

  • stacked

  • 100-stacked

bar

  • standard (alias clustered)

  • clustered

  • stacked

  • 100-stacked

bubble

  • standard

column

  • standard (alias clustered)

  • clustered

  • stacked

  • 100-stacked

doughnut

  • standard

  • exploded

line

  • standard

pie

  • standard

  • exploded

scatter (alias xy)

  •  

xy

  • markers

Related Articles

See these articles for further information:

 

See these articles for Tag-Specific information.