Chart Canvas

Example

This Chart Canvas chart includes:

Custom theme
Series.Area
Minimal attribute settings
Caption styling
Custom tick mark interval
Quicktip tooltip

<ChartCanvas ChartHeight="400" ChartWidth="640" ChartCaption="Basic Area Chart" ID="Chart_Area1" AutoQuicktip="False">
  <Series Type="Area" ChartYDataColumn="gacSaleAmount" ChartXDataColumn="tpcShipMonthAbbrev" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" ID="dlSalesDataXML" XMLFile="NW_SalesTotalsByAmount.xml" IdeDisplayStatus="Collapsed">
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonthAbbrev" TimePeriod="MonthAbbreviation" />
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonthName" TimePeriod="MonthName" />
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonth" TimePeriod="Month" />
      <GroupFilter GroupColumn="tpcShipMonth" DataType="Number" KeepGroupedRows="False" SortSequence="Ascending" IdeDisplayStatus="Collapsed">
        <GroupAggregateColumn AggregateColumn="SaleAmount" AggregateFunction="Sum" DataType="Number" ID="gacSaleAmount" />
      </GroupFilter>
    </DataLayer>
    <Quicktip IdeDisplayStatus="Collapsed">
      <QuicktipRow Caption="Month:" Value=" @Chart.tpcShipMonthName~" />
      <QuicktipRow Caption="Revenue:" Value="@Chart.gacSaleAmount~" Format="Currency" />
    </Quicktip>
  </Series>
  <ChartCaptionStyle AlignmentHorizontal="Left" />
  <ChartXAxis AxisCaption="Month" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid TickmarkPlacement="Center" />
  </ChartXAxis>
  <ChartYAxis AxisCaption="Revenue" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid TickInterval="5000" />
  </ChartYAxis>
</ChartCanvas>

This Chart Canvas chart includes:

Custom theme
Series.Area
Minimal attribute settings
Caption styling
Custom tick mark interval
Quicktip tooltip
Zoom Control lets you to "zoom-in" on data

<ChartCanvas ChartHeight="400" ChartWidth="640" ChartCaption="...with Zoom Control" ID="Chart_Area2" AutoQuicktip="False" ChartSubCaption="(select chart region by dragging)" IdeDisplayStatus="Collapsed">
  <Series Type="Area" ChartYDataColumn="gacSaleAmount" ChartXDataColumn="tpcShipMonthAbbrev" IdeDisplayStatus="Collapsed" Color="LightSalmon" AreaLineColor="Maroon">
    <DataLayer Type="XMLFile" ID="dlSalesDataXML" XMLFile="NW_SalesTotalsByAmount.xml" IdeDisplayStatus="Collapsed">
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonthAbbrev" TimePeriod="MonthAbbreviation" />
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonthName" TimePeriod="MonthName" />
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonth" TimePeriod="Month" />
      <GroupFilter GroupColumn="tpcShipMonth" DataType="Number" KeepGroupedRows="False" SortSequence="Ascending" IdeDisplayStatus="Collapsed">
        <GroupAggregateColumn AggregateColumn="SaleAmount" AggregateFunction="Sum" DataType="Number" ID="gacSaleAmount" />
      </GroupFilter>
    </DataLayer>
    <Quicktip IdeDisplayStatus="Collapsed">
      <QuicktipRow Caption="Month:" Value=" @Chart.tpcShipMonthName~" />
      <QuicktipRow Caption="Revenue:" Value="@Chart.gacSaleAmount~" Format="Currency" />
    </Quicktip>
  </Series>
  <ChartCaptionStyle AlignmentHorizontal="Center" FontWeight="Normal" />
  <ChartSubCaptionStyle FontWeight="Normal" FontSize="16" />
  <ChartXAxis AxisCaption="Month" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid TickmarkPlacement="Center" />
  </ChartXAxis>
  <ChartYAxis AxisCaption="Revenue" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid TickInterval="5000" />
  </ChartYAxis>
  <ZoomControl />
</ChartCanvas>

This Chart Canvas chart includes:

Custom theme
Series.Area
Plot area background color
Axis Caption, Label, and Grid styling
Custom tick mark interval
Quicktip tooltip
Drilldown (click data point to drill down)

<ChartCanvas ChartHeight="400" ChartWidth="640" ChartCaption="...with Drill-down" ID="Chart_Area2" PlotBackgroundColor="Khaki" PlotBackgroundColorTransparency="9" IdeDisplayStatus="Collapsed">
  <Series Type="Area" ChartYDataColumn="gacSaleAmount" ChartXDataColumn="tpcShipMonthAbbrev" Color="#9ACB00" AreaLineColor="DarkCyan" LineThickness="1" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" ID="dlSalesDataXML" XMLFile="NW_SalesTotalsByAmount.xml" IdeDisplayStatus="Collapsed">
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonthAbbrev" TimePeriod="MonthAbbreviation" />
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonthName" TimePeriod="MonthName" />
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonth" TimePeriod="Month" />
      <GroupFilter GroupColumn="tpcShipMonth" DataType="Number" KeepGroupedRows="False" SortSequence="Ascending" IdeDisplayStatus="Collapsed">
        <GroupAggregateColumn AggregateColumn="SaleAmount" AggregateFunction="Sum" DataType="Number" ID="gacSaleAmount" />
      </GroupFilter>
    </DataLayer>
    <Quicktip IdeDisplayStatus="Collapsed">
      <QuicktipRow Caption="Month:" Value=" @Chart.tpcShipMonthName~" />
      <QuicktipRow Caption="Revenue:" Value="@Chart.gacSaleAmount~" Format="Currency" />
    </Quicktip>
    <Action Type="Report" ID="actDrillDown" IdeDisplayStatus="Collapsed">
      <Target Type="Report" Report="ChartCanvas.DrillDownTarget" ID="trgReport" />
      <LinkParams PassedData="@Chart.tpcShipMonthName~" />
    </Action>
  </Series>
  <ChartCaptionStyle FontFamily="Arial" FontSize="24" AlignmentHorizontal="Center" FontWeight="Normal" />
  <ChartXAxis AxisCaption="Month" AxisLineColor="Gray" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid TickInterval="1" GridLineColor="Gray" GridLineThickness="1" TickmarkPlacement="Center" />
    <AxisCaptionStyle FontColor="Green" FontFamily="Arial" FontSize="16" FontWeight="Bold" />
    <AxisLabelStyle FontFamily="Arial" FontWeight="Normal" FontColor="Green" FontSize="14" />
  </ChartXAxis>
  <ChartYAxis AxisCaption="Revenue" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid GridLineColor="Gray" TickInterval="5000" GridLineThickness="1" />
    <AxisCaptionStyle FontColor="#505050" FontFamily="Arial" FontSize="16" FontWeight="Bold" />
    <AxisLabelStyle Format="$###,###" FontColor="#505050" />
  </ChartYAxis>
</ChartCanvas>

This Chart Canvas chart includes:

Custom theme
Series.Area
Plot area border, canvas background color
Data formatting, with Metric Prefix
Custom tick mark interval
Quicktip tooltip
Drilldown (click data value to drill down)
Resizer (hover to see resizing handles)

<ChartCanvas ChartHeight="400" ChartWidth="640" ChartCaption="...with Border, Background Color, and Resizing" ID="Chart_Area3" BorderColor="Gray" BackgroundColor="MintCream" PlotBackgroundColor="#FFFFFF" PlotBorderColor="Gray" PlotBorderThickness="1" SpacingRight="50">
  <Series Type="Area" ChartYDataColumn="gacSaleAmount" ChartXDataColumn="tpcShipMonthAbbrev" Color="#FFA500" AreaLineColor="DarkCyan" LineThickness="1" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" ID="dlSalesDataXML" XMLFile="NW_SalesTotalsByAmount.xml" IdeDisplayStatus="Collapsed">
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonthAbbrev" TimePeriod="MonthAbbreviation" />
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonthName" TimePeriod="MonthName" />
      <TimePeriodColumn DataColumn="ShippedDate" ID="tpcShipMonth" TimePeriod="Month" />
      <GroupFilter GroupColumn="tpcShipMonth" DataType="Number" KeepGroupedRows="False" SortSequence="Ascending" IdeDisplayStatus="Collapsed">
        <GroupAggregateColumn AggregateColumn="SaleAmount" AggregateFunction="Sum" DataType="Number" ID="gacSaleAmount" />
      </GroupFilter>
    </DataLayer>
    <Quicktip IdeDisplayStatus="Collapsed">
      <QuicktipRow Caption="Month:" Value=" @Chart.tpcShipMonthName~" />
      <QuicktipRow Caption="Revenue:" Value="@Chart.gacSaleAmount~" Format="Currency" />
    </Quicktip>
    <Action Type="Report" ID="actDrillDown" IdeDisplayStatus="Collapsed">
      <Target Type="Report" Report="ChartCanvas.DrillDownTarget" ID="trgReport" />
      <LinkParams PassedData="@Chart.tpcShipMonthName~" />
    </Action>
  </Series>
  <ChartCaptionStyle FontFamily="Arial" FontSize="20" AlignmentHorizontal="Center" FontWeight="Normal" />
  <ChartXAxis AxisCaption="Month" AxisLineColor="Gray" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid TickInterval="1" GridLineColor="Gray" GridLineThickness="1" TickmarkPlacement="Center" />
    <AxisCaptionStyle FontColor="Green" FontFamily="Arial" FontSize="16" FontWeight="Bold" />
    <AxisLabelStyle FontFamily="Arial" FontWeight="Normal" FontColor="Green" FontSize="16" OffsetY="20" />
  </ChartXAxis>
  <ChartYAxis AxisCaption="Revenue" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid GridLineColor="Gray" TickInterval="5000" GridLineThickness="1" />
    <AxisCaptionStyle FontColor="#505050" FontFamily="Arial" FontSize="16" FontWeight="Bold" />
    <AxisLabelStyle Format="$###mp" FontColor="#505050" />
  </ChartYAxis>
  <Note Note="Resizer element only works with Logi Info, not Logi Report" />
  <Resizer ResizerHandleStyle="Knob" MaxWidth="1024" MaxHeight="700" />
</ChartCanvas>

This Chart Canvas chart includes:

Custom theme
Two Series.Area data series
Plot area background color
Data labels
Legend filtering (click Legend item to toggle)

<ChartCanvas ChartHeight="400" ChartWidth="800" ChartCaption="...with Multiple Data Series and Legend Filtering" ID="Chart_Area4" PlotBorderThickness="1" PlotBackgroundColor="Cornsilk" AutoQuicktip="False" IdeDisplayStatus="Collapsed">
  <Series Type="Area" ChartYDataColumn="gacOrderCount2" ChartXDataColumn="calcEmployeeName2" Color="Blue" AreaLineColor="DarkCyan" LineThickness="1" ChartXDataColumnType="Text" LegendLabel="2012" ID="Series.Area2012" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" ID="dlOrderDataXML" XMLFile="NW_Orders.xml" IdeDisplayStatus="Collapsed">
      <Join ID="joinInner" JoinType="InnerJoin" IdeDisplayStatus="Collapsed">
        <MatchCondition LeftDataColumn="EmployeeID" RightDataColumn="EmployeeID" />
        <DataLayer Type="XMLFile" ID="dlEmployeeDataXML" XMLFile="NW_Employees.xml" />
      </Join>
      <Note Note="Note use of Logi's CXMLDate function when using date-related functions like Year()." />
      <Note Note="It reformats ISO formatted dates (yyyy-mm-dd) for use." />
      <ConditionFilter Condition="Year(CXMLDate(&quot;&quot;)) = &quot;2012&quot;" ID="fltYear2012" />
      <CalculatedColumn Formula="Left(Trim(&quot;&quot;),1) + &quot;. &quot; + Trim(&quot;&quot;)" ID="calcEmployeeName2" />
      <GroupFilter GroupColumn="LastName,FirstName" IdeDisplayStatus="Collapsed">
        <GroupAggregateColumn AggregateColumn="OrderID" AggregateFunction="Count" ID="gacOrderCount2" DataType="Number" />
      </GroupFilter>
      <SortFilter SortColumn="calcEmployeeName2" DataType="Text" />
    </DataLayer>
    <DataLabels />
  </Series>
  <Series Type="Area" ChartYDataColumn="gacOrderCount" ChartXDataColumn="calcEmployeeName" Color="BlueViolet" AreaLineColor="White" LineThickness="1" LegendLabel="2011" ID="Series.Area2011" Transparency="10" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" ID="dlOrderDataXML" XMLFile="NW_Orders.xml" IdeDisplayStatus="Collapsed">
      <Join ID="joinInner" JoinType="InnerJoin" IdeDisplayStatus="Collapsed">
        <MatchCondition LeftDataColumn="EmployeeID" RightDataColumn="EmployeeID" />
        <DataLayer Type="XMLFile" ID="dlEmployeeDataXML" XMLFile="NW_Employees.xml" />
      </Join>
      <Note Note="Note use of Logi's CXMLDate function when using date-related functions like Year()." />
      <Note Note="It reformats ISO formatted dates (yyyy-mm-dd) for use." />
      <ConditionFilter Condition="Year(CXMLDate(&quot;&quot;)) = &quot;2011&quot;" ID="fltYear2011" />
      <CalculatedColumn Formula="Trim(&quot;&quot;) + &quot; &quot; + Trim(&quot;&quot;)" ID="calcEmployeeName" />
      <GroupFilter GroupColumn="LastName,FirstName" IdeDisplayStatus="Collapsed">
        <GroupAggregateColumn AggregateColumn="OrderID" AggregateFunction="Count" ID="gacOrderCount" DataType="Number" />
      </GroupFilter>
      <SortFilter SortColumn="calcEmployeeName" DataType="Text" />
    </DataLayer>
    <DataLabels />
  </Series>
  <ChartCaptionStyle FontFamily="Times New Roman" FontSize="26" AlignmentHorizontal="Center" FontWeight="Normal" FontColor="Brown" />
  <ChartXAxis AxisCaption="Employee" AxisLineColor="Gray" AxisType="Category" AxisPaddingLeft="0" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid TickInterval="1" GridLineColor="Gray" GridLineThickness="1" TickmarkPlacement="Center" />
    <AxisCaptionStyle FontFamily="Arial" FontSize="16" FontWeight="Bold" />
    <AxisLabelStyle FontFamily="Arial" FontWeight="Normal" FontSize="16" OffsetY="20" FontAngle="30" FontColor="Gray" />
  </ChartXAxis>
  <ChartYAxis AxisCaption="Orders" IdeDisplayStatus="Collapsed">
    <ChartTicksAndGrid GridLineColor="Gray" TickInterval="10" GridLineThickness="1" />
    <AxisCaptionStyle FontColor="#505050" FontFamily="Arial" FontSize="16" FontWeight="Bold" />
    <AxisLabelStyle FontColor="#505050" FontFamily="Arial" FontSize="14" />
  </ChartYAxis>
  <ChartCanvasLegend LegendOrientation="Vertical" BorderColor="Silver" OffsetY="43" BorderRadius="0" IdeDisplayStatus="Collapsed">
    <LegendLabelStyle FontFamily="Arial" FontSize="14" FontColor="Gray" />
  </ChartCanvasLegend>
</ChartCanvas>

This Chart Canvas chart includes:

Custom theme
Series.Area Range
Custom Quicktip

<ChartCanvas ChartHeight="400" ChartWidth="600" ChartCaption="...with Area Range Series" BorderColor="Silver" PlotBorderColor="Silver" SpacingBottom="30" SpacingRight="30" BackgroundColor="Honeydew" IdeDisplayStatus="Collapsed">
  <Series Type="AreaRange" ChartHighValueDataColumn="MaxTemp" ChartLowValueDataColumn="MinTemp" ChartXDataColumn="DayOfMonth" Color="PaleGreen" AreaLineColor="SeaGreen" HoverLineThickness="1" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" XMLFile="April2013Temps.xml" ID="dlTempsXML" />
    <Quicktip IdeDisplayStatus="Collapsed">
      <QuicktipRow Caption="April" Value="@Chart.DayOfMonth~" />
      <QuicktipRow Caption="Min Temp:" Value="@Chart.MinTemp~" />
      <QuicktipRow Caption="Max Temp:" Value="@Chart.MaxTemp~" />
    </Quicktip>
  </Series>
  <ChartCaptionStyle FontFamily="Segoe UI" FontSize="22" FontWeight="Normal" OffsetY="20" />
  <ChartXAxis AxisCaption="Day of the Month" IdeDisplayStatus="Collapsed">
    <AxisCaptionStyle FontWeight="Bold" />
    <ChartTicksAndGrid TickInterval="1" GridLineThickness="0" />
  </ChartXAxis>
  <ChartYAxis AxisCaption="Degrees Farenheit" IdeDisplayStatus="Collapsed">
    <AxisCaptionStyle FontWeight="Bold" />
  </ChartYAxis>
</ChartCanvas>