Designing Charts

How do I edit chart properties?
In general, to edit properties for a chart or the elements it comprises:

1. Use the Outline to select a chart, series, axis renderer, or plot area.
2. Use the Property Inspector to edit properties for the selected element.

For detailed information about each chart property, see the Chart Properties reference.

How do I change the data hover text?
The hover text for a data point is called a datatip.

A datatip in DGLux5

To define whether datatips are shown for multiple series simultaneously, select the chart in the Outline, and use the Datatip Mode property.

Multiple datatip mode

To define other aspects of datatips, first select the series in the Outline, and then:

• Enable or disable datatips using the Show Datatips property.

• Change datatip text using the Datatip property.

  

  Use the text formatting tags that are listed in the Series Properties reference.

You can also specify a symbol to use for datatips. This symbol is rendered similarly to a repeater. This example shows you how to create this effect.

1. Create a symbol.

2. Type the symbol name in the Datatip Renderer field.

   

3. Create symbol parameters, and bind the symbol parameters to String blocks inside dataflow for the symbol. Use Concatenate blocks to create the strings that you want to appear in the final datatip.

   

4. Bind the outputs of the dataflow to component properties inside the symbol.

   

5. Exit symbol editing mode, and in the Outline, select the datatip renderer. Then, bind table columns and series properties to the renderer properties.

   
   

   This creates a datatip that is a custom symbol instead of the default datatip style.

   

How do I style a line or area series?
First, in the Outline, select the series.

• Style the line and fill using the Fill and Stroke properties.
• Style the markers by selecting a value for Markers and then editing the properties that appear.

For more information, see Series Properties.

How do I style a column or bar series?

This video shows you how to customize a column series.

Video Tutorial: Customize Column Chart Series

More video tutorials are here.

First, in the Outline, select the series.

• Style the columns or bars using the Fill and Stroke properties.
• Specify a symbol to use for columns or bars using the Renderer property.

Additionally, for column series:

• In the Advanced properties, use the columnWidthRatio property to change column width.
• Use the Column Series Offset property to move columns to the left and right by a portion of the maximum column width.

For more information, see Series Properties.

How do I animate a chart?
To make a series animate whenever its source table's data loads or its date range changes:

1. In the Outline, select the series.
2. Set the Series Animation property to your preferred animation type.
3. For greater customization, edit the other series animation properties.

For more information, see Series Properties.

How do I change the range or type of an axis?
To change the range of an axis:

1. In the Outline, select the axis renderer.
2. In the Property Inspector, set the Auto Adjust property to FALSE.

3. Either set Base At Zero to FALSE, or set a specific range in the units of the axis using the Min and Max properties.

   These are different from the read-only Axis Minimum and Axis Maximum properties.

To change the type of an axis, select the axis renderer in the Outline, and then use the Axis Type property.

You can also switch the minimum and maximum of the axis using the Inverted property.

For more information, see Axis Properties.

How do I change where labels or ticks appear on an axis?
To change the intervals between labels or ticks:

1. In the Outline, select the axis renderer.
2. In the Property Inspector, set the Auto Adjust property to FALSE.
3. Use the Major Interval property for placement of labels and major ticks.
4. Use the Minor Interval property for placement of minor ticks.

How do I edit and format the text in the axis title and labels?
First, in the Outline, select the axis renderer.

To edit and style the axis title:

• Use the Title property to enter a title for the entire axis.
• Use the top group of font styling properties to style the axis title.
• For a vertical axis, use the Vertical Axis Title Alignment property to determine which way the text faces.

To format and style the axis labels:

• Use the Format String property to specify a label format. For example, the string "0.00 meters" ensures that labels have two digits after the decimal and include the units "meters." See Scripting and Syntax for more information.
• If a title is defined, there are two groups of font styling properties in the Property Inspector. Use the lower of the two groups to style the axis labels.
• Use the Label Gap property to control the space between labels and the axis.
• Use the Label to Edge Gap property to control the space between labels and the edge of the component.
• Use the Label Rotation property to rotate labels.

How do I style axis lines?
To style the axis lines for a chart, select the axis renderer and use the Axis Stroke Color, Axis Stroke Style, and Axis Stroke Weight properties.

How do I zoom a chart?
You can zoom your chart, or you can enable the user to zoom in by dragging a marquee and zoom out by clicking. This does not work if your chart has a category axis.

1. In the Outline, select the plot area.

   

2. To trigger zooming based on an event, specify minimum and maximum values in the units of the axes, and then use the zoom triggers.

   

3. To enable the user to zoom, select a Zoomer Mode. See Plot Area Properties for more details.

   

4. To style the marquee that the user drags, use the Zoomer Line and Zoomer Area properties.

   

   The user can zoom in by dragging, and zoom out by clicking on the chart.

How do I synchronize the zoom areas of two charts?
You can synchronize the zoom areas of two charts, so that zooming one causes the other to zoom to the same axis ranges. As with all chart zoom effects, this does not work with category axes.

To synchronize two charts' zoom areas:

1. Follow the steps in How do I zoom a chart? to enable zooming for the charts.
2. In the Outline, select the plot area for one of the charts.

3. To synchronize horizontal zooming, hover over each of the following three properties until a blue dot appears, and then double-click each of the blue dots:

   • Horiz Zoom Minimum
   • Horiz Zoom Maximum
   • Horiz Zoom Trigger

   The properties are added to a small binding dialog.

   

4. In the Outline, select the plot area for the other chart.

5. Bind the properties in the small binding dialog (for the first chart) to the same properties in the Property Inspector (for the second chart).

   

6. Conversely, bind the properties in the Property Inspector to the same properties in the small binding dialog.

   

7. To synchronize vertical zooming, repeat steps 3–6 for the vertical zoom properties.

The charts are now synchronized. Zooming one of the charts causes the other to zoom to the same axis ranges.

Synchronized chart zooming

How do I create a custom item renderer?
Similar to a repeater, a custom item renderer takes a symbol and uses it to represent each bar, column, or marker in a chart.

To create a simple custom item renderer:

1. Create the symbol:

   1. Insert a text component on the Stage.

      

   2. Convert the text component to a symbol, and name it rendererSym.

      
      

   3. Right-click the symbol, and select Edit Properties.

      

   4. Add a textarea parameter to the symbol, and bind it to the Text property of the text component. If you want, add a placeholder such as Value.

      
      
      

2. Create the chart:

   1. Insert a chart on the Stage.

      

   2. Open dataflow for the chart, and add a Table block.

      
      

   3. Select the Table block, and click the button next to the data property to open the table.

      

   4. Drag a table column header to the empty chart component.

      

   5. Create a column series.

      You can use the data that is already in the Table block. Use "v1" for the y-axis and "row" for the x-axis.

      
      

   6. In the Outline, select the series, and for the Renderer property, enter rendererSym.

      

      Instances of the symbol replace the chart's columns.

   7. In the Outline, select the "Item Renderer" node.

      

   8. Drag the "v1" table column header to the textarea property.

      

      Values from the column replace the placeholder text.

      

Alternatively, you can create a data mapping that assigns strings to a property depending on number ranges. For example, in the images below, the string "Low" is assigned when the value is 1 or lower, the string "Medium" when the value is above 1 and less than or equal to 2, and so on. For more information, see Bindings.

How do I save a chart for re-use?
To make a chart available for use in other projects, save it as a widget. See Widget Palette for more information.

How do I make a chart that compares different date ranges?
To overlay series for different data and time ranges, such as last year's data and this year's data, use Compare Mode. Alternatively, to compare ranges that are not supported in Compare Mode, you can use a category axis and column mapping.

Method 1: Compare Mode
These steps show one way to configure a chart to use Compare Mode:

1. Insert a blank chart.
2. Drag the data metric from the Metrics panel onto the chart. Configure the axes as appropriate, selecting datetime for one of them. Click OK.
3. Drag the same data metric onto the chart a second time. Check Use existing axis for both axes, and click OK.

4. Open dataflow for the chart.

   The dataflow includes two Load History blocks. One of them may be covering the other.

5. Select a timeRange for each of the two Load History blocks.

   These time ranges are the ranges to be compared. Ensure that the ranges are the same range type. For example, each range could be a day, or each range could be a month.

6. In the Outline, select the datetime axis.

7. In the Property Inspector, for the Compare Mode property, specify the appropriate Compare Mode type:

   • None: Series with different dates and times are not aligned.
   • Hour: For hour ranges, times within the hour are aligned. For longer ranges, times of day are aligned, so you can compare midnight with midnight.
   • Day: Date ranges are aligned, so you can compare "day one" from different ranges.
   • Week: Days of the week are aligned, so you can compare Mondays with Mondays.
   • Month: Days of the month are aligned, so you can compare firsts of the month.
   • Year: Days of the year are aligned, so you can compare January first with January first.

Method 2: category axis and column mapping
To use a range that is not supported by Compare Mode, create a custom comparison chart using a category axis and column mapping. See this thread in the DGLogik user forum for an example. To create a custom range:

1. Load a table that includes data for all of the dates.
2. Using a Column Mapping block, create a column representing the category. For example, if you wanted to compare days in groups of 10, this column would hold the numbers 1 through 10.
3. Create Filter or Select Rows blocks for each series, and filter the output of the Column Mapping block into separate tables for each series.

4. Create one chart series from each Filter output table.

   Use a category axis instead of a datetime axis. For the category axis, use the column you created.

How do I change the data that a chart series is using?
If the data uses existing axes:

1. Open dataflow for the chart.
2. In the Outline, select the series.
3. Bind the appropriate table from dataflow to the Data Source property for the series.
4. If the column names are different, type the correct column names for the X Field and Y Field properties.
5. Ensure the correct axes are selected for the Horiz Axis and Vert Axis properties.

In most cases, for example if you have just manipulated a table in dataflow, the data uses existing axes. However, if the data does not use existing axes, delete the old series and create a new one as described in Chart.

How do I use a master series to make the number of series dynamic?

A series repeater lets you work with a variable number of series. It also lets you create series formatting based on series index.

Video Tutorial: Series Repeater

Another series repeater tutorial is here. More video tutorials are here.

To create and style a chart whose number of series changes based on the source table:

1. When you create a series, check Dynamic.
2. In the Outline, click the "Series" node that is the parent of the "Master_Series" node.
3. In the Property Inspector, for Type, select Overlaid.
4. In the Outline, open the dataflow for the "Master_Series" node.
5. Configure a Case block:
   1. Add a Case block to the dataflow.
   2. Add one case n value for each series index number expected.
   3. Set the case n values to the series indexes: 0, 1, 2….
   4. Bind values for a formatting property, such as Color blocks, to the Case block's then n properties.
   5. Bind the Case block's output property to the relevant property of the master series, such as Stroke Color.
6. If you want, repeat step 5 with additional properties.

7. In the Master Series properties, click the Invoke trigger for the Update Repeater property.

   Now, each series in the chart has its own color.

See this video and this video for more information.

How do I create a bar min repeater? A bar min repeater allows a single bar to have multiple minimum and maximum values, giving the appearance of a stopping and starting bar. The following image shows an example of a bar min repeater.

To create a bar min repeater:

1. Insert a chart component.
2. As shown in the images below, create a table that has the following columns with sample data:
   1. category
   2. minimum
   3. maximum
3. Add the series:
   1. Drag a table column to the chart.
      1. For Select series, choose Bar Series.
      2. For the Y-axis, specify a Category Axis and the category table column name.
      3. For the X-axis, specify a Linear Axis and the maximum table column name.
   2. With the series selected in the Outline, set the Min Field property to the minimum table column name.

The following images demonstrate how to create a bar min repeater:

How do I enable the user to select which series to display?
There are several ways to enable the user to select which series to display. This is one example:

1. Create a chart with a dynamic number of series.
2. Create a component for the user to interact with, such as a List component.
3. For the List component’s Options property, list the descriptors for each series, in the same order as the series indexes.
4. Open dataflow for the Master Series, and create an If block:
   • Add the If block.
   • Bind the Series Index property of the master series to the block's input 1 property.
   • Bind the Selected Index property of the list element to the block’s input 2 property.
   • Set op to “equals”.
   • For then, type the string "TRUE".
   • For else, type the string "FALSE".
5. Bind the block’s output property to the Visible property of the master series.

6. In the master series properties, click Invoke to update the series repeater.

   Now, selecting an item in the list component displays that item's series in the chart.

How do I enable the user to select a range for a datetime axis?

There are several ways to enable the user to select a range for the datetime axis. For example, if your table comes from a block with a timeRange property, such as the Load History or Multi-Histories block:

1. Create a date range picker component for the user to interact with.
2. Bind the Value property of the date range picker to the timeRange property of the block.

Video Tutorial: Bind Date Range to Chart This video shows how to create a binding between a date range picker and a chart.

You must also make sure the table gets loaded. You can do this by setting an interval value for the block that loads your table, or by doing the following:

1. Create a Hub block with one input property.
2. Bind the timeRange property of the block that loads your table to the input 0 property of the Hub block.
3. Bind the onChange property of the Hub block to the invoke property of the block that loads your table.