Dynamically creating chart series with Logi Info

2015, Jul 17    

Before getting stuck straight into creating a chart from the wizard, its best to get the SQL datasource working with a Data-table.
This has the advantage on actually seeing the data you’re working with, and you can tune the query before getting the chart involved.
Once it’s working and you’re seeing data, then throw it to the top of the page inside a LocalData item.

Once you’re happy with the datasource, add a DataLinkLayer underneath it so you can reference it from the chart.

Now, create something that looks like this in the designer.
Logi-DynamicSeries-DesignTree
The important part to take notice of is the datalayers and the filters beneath them.

  • The repeater datalayer uses a DeDuplicate Filter (De-dupe to just what you want the series label to be, in my case it was the column “Label”).
  • The series datalayer uses a Compare Filter (You’re comparing the column you used in the De-Dupe filter to whatever the repeater provides to the series).

Here’s the designer XML so you can see how it all hangs together.

<Body>
		<ChartCanvas
			BackgroundColorTransparency="3"
			ChartCaption="Disk"
			>
			<ChartYAxis
				AxisCaption="%"
			/>
			<RepeatElements
				ID="rptDiskSeries"
				>
				<DataLayer
					LinkedDataLayerID="dllDisk"
					Type="Linked"
					>
					<CompareFilter
						CompareType="="
						CompareValue="%"
						DataColumn="Units"
					/>
					<DeDuplicateFilter
						DataColumns="Label"
					/>
				</DataLayer>
				<Series
					ChartXDataColumn="SampleDT"
					ChartXDataColumnType="DateTime"
					ChartYDataColumn="AvgDataValue"
					LegendLabel="@Repeat.Label~"
					Type="Area"
					>
					<Quicktip>
						<QuicktipRow
							Value="@Chart.AvgDataValue~"
						/>
					</Quicktip>
					<DataLayer
						LinkedDataLayerID="dllDisk"
						Type="Linked"
						>
						<CompareFilter
							CompareType="="
							CompareValue="@Repeat.Label~"
							DataColumn="Label"
						/>
					</DataLayer>
				</Series>
			</RepeatElements>
		</ChartCanvas>
	</Body>