Charts
We have provided a default chart template that can be used anywhere. In our standard application, a chart is visible when clicking a Chart type property in the property list. A dialog will show up, displaying the chart. The chart can be further extended by customizing UBIKChart.xaml. However, we have made sure to support complex data structures from the chart, and to allow for most of the custom presentation data to come from the server side.
Contents
Chart properties
The chart receives its data from a property containing a ChartData object. This object is packed with customizable data that the chart template binds to. This data is received from the server. However, you may also customize the chart template to your liking to override certain values. The image on the right can help clarify some of these properties.
Here is a breakdown of all the date, and how it is represented in the UI:
ChartData
- Header (string): title of the chart
- PrimaryAxis (ChartAxis): the X-axis
- SecondaryAxis (ChartAxis): the Y-axis
- Series (list of ChartValueSeries): all line series visible on the chart
- Thresholds (list of ChartThreshold): all horizontal thresholds visible on the chart
ChartAxis
- Header (string): the label of the axis
- Interval (double): the interval between gridlines on the axis
- DateTimeIntervalType (int): the interval type in case of a date axis. The following values are possible:
- Auto = 0,
- Milliseconds = 1,
- Seconds = 2,
- Minutes = 3,
- Hours = 4,
- Days = 5,
- Months = 6,
- Years = 7
- LabelFormat (string): the format string to define how value labels are formatted. See Label formatting
- Minimum (object): the minimum value to display on the axis
- Maximum (object): the maximum value to display on the axis
ChartValueSeries
- Name (string): the name of the series (will be shown in the legend)
- Color (int): the color of the line
- Items (list of ChartItem): the list of data points on the line
ChartItem
- XValue (object): the X value of the data point
- YValue (object): the Y value of the data point
ChartThreshold
- Value (object): the value of the threshold (on the Y-axis)
- Color (int): the color of the threshold line
Label formatting
The ChartAxis object contains a property "LabelFormat" that allows you to customize how the value labels on the axes are presented. This special format string only applies to numbers and dates. Some examples of what you could do what the format string:
| Input | Format string | Output |
|---|---|---|
| 5.5 | "##.000" | 5.500 |
| 01/05/2017 16:00:00 | "yyyy" | 2017 |
| 01/05/2017 16:00:00 | "dd/MM/yyyy" | 01-05-2017 |
See here for how to format numeric objects, and here for how to format dates.
Interactivity
You can zoom in on the chart by using the pinch zoom gesture on touch-screen devices, or by using the scroll wheel on your mouse. After zooming, you can pan around the chart by simply pressing and dragging. Note that for larger data sets, the performance might suffer when zooming and panning.
Using a Chart
A chart can be used by creating a custom meta property of type Chart and assigning it to a MetaClass via the RelationEditor. An object of type ChartData can be assigned to this property.
