Bubble Chart

Example

This Chart Canvas chart includes:

Custome theme
Series.Bubble
Minimal attribute settings

<ChartCanvas ChartHeight="400" ID="Chart_Bubble1" PlotBorderColor="Silver" ChartWidth="640" ChartCaption="Investment Performance" AutoQuicktip="False" IdeDisplayStatus="Collapsed">
  <Series Type="Bubble" ChartZDataColumn="AmtInvested" ChartYDataColumn="ROI" ChartXDataColumn="Age" Color="Green" ChartSizeDataColumn="ROI" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" XMLFile="Stocks.xml" />
    <Note Note="Bubble border line and fill color set in Marker Points" />
    <Remark>
      <MarkerPoints IdeDisplayStatus="Collapsed">
        <MarkerPointsHoverStyle MarkerPointBorderColor="Green" MarkerPointFillColor="Yellow" />
      </MarkerPoints>
    </Remark>
    <Remark>
      <Quicktip IdeDisplayStatus="Collapsed">
        <QuicktipRow Value="@Chart.AmtInvested~" Caption="Invested: " Format="Currency" />
        <QuicktipRow Caption="ROI:" Value="@Chart.ROI~" Format="Percent" />
        <QuicktipRow Caption="Age:" Value="@Chart.Age~" />
      </Quicktip>
    </Remark>
  </Series>
  <ChartXAxis AxisCaption="Age in Years" />
  <ChartYAxis AxisCaption="Return on Investment" IdeDisplayStatus="Collapsed">
    <AxisLabelStyle Format="##%" />
  </ChartYAxis>
</ChartCanvas>

This Chart Canvas chart includes:

Custom theme
Series.ubble
Minimal attribute settings
Caption styling
Label styling

<ChartCanvas ChartHeight="400" ID="Chart_Bubble2" PlotBorderColor="Silver" ChartWidth="640" ChartCaption="...with Marker Points and Custom Quicktip" IdeDisplayStatus="Collapsed">
  <Series Type="Bubble" ChartZDataColumn="AmtInvested" ChartYDataColumn="ROI" ChartXDataColumn="Age" Color="Green" ChartSizeDataColumn="ROI" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" XMLFile="Stocks.xml" />
    <Note Note="Bubble border line and fill color set in Marker Points" />
    <MarkerPoints IdeDisplayStatus="Collapsed">
      <MarkerPointsHoverStyle MarkerPointBorderColor="Green" MarkerPointFillColor="Yellow" />
    </MarkerPoints>
    <Quicktip IdeDisplayStatus="Collapsed">
      <QuicktipRow Value="@Chart.AmtInvested~" Caption="Invested: " Format="Currency" />
      <QuicktipRow Caption="ROI:" Value="@Chart.ROI~" Format="Percent" />
      <QuicktipRow Caption="Age:" Value="@Chart.Age~" />
    </Quicktip>
  </Series>
  <ChartCaptionStyle FontFamily="Arial, Verdana" FontSize="26" FontColor="Chocolate" FontWeight="Lighter" />
  <ChartXAxis AxisCaption="Age in Years" />
  <ChartYAxis AxisCaption="Return on Investment" IdeDisplayStatus="Collapsed">
    <AxisLabelStyle Format="##%" />
  </ChartYAxis>
</ChartCanvas>

This Chart Canvas chart includes:

Custom theme
Two Series.Bubble elements
Custom Quicktip
Drilldown (click a symbol to drill down)
Legend Filtering (click legend item to toggle)

<ChartCanvas ID="Chart_Bubble3" ChartHeight="400" ChartWidth="700" PlotBorderColor="CadetBlue" ChartCaption="...with Two Data Series and Legend Filtering" PlotBackgroundColor="LightCyan" BackgroundColor="#F6F6F6" IdeDisplayStatus="Collapsed">
  <Series Type="Bubble" ChartXDataColumn="UnitsInStock" ChartYDataColumn="UnitPrice" ChartSizeDataColumn="UnitPrice" ID="Series.Bubble3" Color="Red" Transparency="10" LegendLabel="Economy" IdeDisplayStatus="Collapsed">
    <DataLayer Type="XMLFile" ID="dlProducts5XML" XMLFile="NW_Products.xml" IdeDisplayStatus="Collapsed">
      <ConditionFilter Condition=" &lt;= 100 And Left(&quot;&quot;, 1) = &quot;R&quot;" />
      <DataLayerLink ID="lnkProducts" />
    </DataLayer>
    <MarkerPoints MarkerPointFillColor="Red" MarkerPointBorderColor="Maroon" MarkerPointFillColorTransparency="12" />
    <Action Type="Report" ID="actDrillDown" IdeDisplayStatus="Collapsed">
      <Target Type="Report" Report="ChartCanvas.DrillDownTarget" ID="trgReport" />
      <LinkParams PassedData="@Chart.ProductName~" />
    </Action>
    <Quicktip IdeDisplayStatus="Collapsed">
      <QuicktipRow Value="@Chart.UnitPrice~" Format="Currency" Caption="Unit Price:" />
      <QuicktipRow Caption="Click for more information" />
    </Quicktip>
  </Series>
  <Series Type="Bubble" ID="Series.Bubble3a" ChartSizeDataColumn="calcDeluxePrice" ChartYDataColumn="calcDeluxePrice" ChartXDataColumn="calcDeluxeStock" Color="CornflowerBlue" LegendLabel="Deluxe" IdeDisplayStatus="Collapsed">
    <DataLayer Type="Linked" ID="dlLinkedProducts1" LinkedDataLayerID="lnkProducts" IdeDisplayStatus="Collapsed">
      <CalculatedColumn Formula=" + 10" ID="calcDeluxeStock" />
      <CalculatedColumn Formula=" * 3" ID="calcDeluxePrice" />
    </DataLayer>
    <MarkerPoints MarkerPointBorderColor="DarkBlue" MarkerPointFillColor="CornflowerBlue" />
    <Action Type="Report" ID="actDrillDown" IdeDisplayStatus="Collapsed">
      <Target Type="Report" Report="ChartCanvas.DrillDownTarget" ID="trgReport" />
      <LinkParams PassedData="@Chart.ProductName~" />
    </Action>
    <Quicktip IdeDisplayStatus="Collapsed">
      <QuicktipRow Value="@Chart.calcDeluxePrice~" Format="Currency" Caption="Unit Price:" />
      <QuicktipRow Caption="Click for more information" />
    </Quicktip>
  </Series>
  <ChartCaptionStyle FontFamily="Segoe UI" FontSize="28" FontWeight="Normal" OffsetY="25" FontColor="#96AF94" />
  <ChartXAxis AxisCaption="Units in Stock" IdeDisplayStatus="Collapsed">
    <AxisCaptionStyle FontColor="Peru" FontFamily="Arial" FontSize="16" FontWeight="Bold" />
    <AxisLabelStyle OffsetY="20" FontColor="Peru" />
    <ChartTicksAndGrid GridLineColor="Silver" GridLineThickness="1" TickInterval="20" TickLineColor="#505050" />
  </ChartXAxis>
  <ChartYAxis AxisCaption="Price" IdeDisplayStatus="Collapsed">
    <AxisCaptionStyle FontColor="#505050" FontFamily="Arial" FontSize="16" FontWeight="Bold" />
    <AxisLabelStyle Format="$###,###" />
    <ChartTicksAndGrid GridLineColor="Silver" GridLineThickness="1" TickLineLength="5" TickLineColor="#505050" TickLineThickness="1" TickInterval="50" />
  </ChartYAxis>
  <ChartCanvasLegend LegendOrientation="Vertical" BorderColor="CadetBlue" OffsetY="46" BackgroundColor="LightCyan" BorderRadius="0" IdeDisplayStatus="Collapsed">
    <LegendLabelStyle FontFamily="Arial" FontSize="12" />
  </ChartCanvasLegend>
</ChartCanvas>

This Chart Canvas chart includes:

Custom theme
Series.Bubble
Caption styling
Refresh Series Timer

<ChartCanvas ID="chartCanvas" ChartHeight="400" ChartWidth="640" ChartCaption="...with Refresh Series Timer" AutoQuicktip="False" IdeDisplayStatus="Collapsed">
  <DataLayer Type="Static" IdeDisplayStatus="Collapsed">
    <StaticDataRow CaptureDate="04/25/2024 17:20:46" />
    <CalculatedColumn Formula="Rnd(Second(&quot;17:20:46&quot;))" ID="Value" />
    <CalculatedColumn Formula="Rnd(Second(&quot;17:20:46&quot;)-1)" ID="Value2" />
    <ColorSpectrumColumn DataColumn="Value" HighValueColor="Red" ID="cscValue" LowValueColor="#0004FF" MaxRange="1" MediumValueColor="#00FFAA" MinRange="0" />
  </DataLayer>
  <Series BubbleMaxSize="50" BubbleMinSize="10" ChartSizeDataColumn="Value2" ChartXDataColumn="CaptureDate" ChartXDataColumnType="DateTime" ChartYDataColumn="Value" Color="@Chart.cscValue~" Type="Bubble" ID="SeriesBubble4" IdeDisplayStatus="Collapsed">
    <RefreshSeriesTimer RefreshInterval="1" TimeSpan="00:01:00" />
  </Series>
  <ChartCaptionStyle FontFamily="Arial" FontSize="28" FontColor="LightSeaGreen" FontWeight="Lighter" />
  <ChartXAxis AxisType="DateTimeLinear">
  </ChartXAxis>
</ChartCanvas>