Contains the description of a chart, its data source, and formatting.
Contained In
ClientData,
Script,
XML
Subelements
Border, Chart, ChartLayout, ChartWrapCount, Font, Height, Interior, Legend, Palette, Scaling, ShowChartTipNames, ShowChartTipValues, Title, Width
Remarks
At least two Scaling subelements (one for each axis) are required, but all other subelements are optional.
The ChartLayout and ChartWrapCount subelements can be specified for a Chart component only.
This example displays a stock chart that shows the opening, high, low, and closing price of a company stock over the course of 4 days. The data comes from a cell table in a Spreadsheet component. The dates are displayed in the category axis, while the stock prices are displayed in the value axis. High-low lines and up-down bars are displayed, but no data markers are displayed. The scale for both axes are oriented from minimum to maximum values. The title of the chart is "Open High Low Close stock chart". It is centered horizontally and vertically, and appears initially in a 12-point Arial font but automatically scales when the chart is resized. When printed, the chart uses a full page.
<x:WebChart>
<x:DataSource>
<x:Type>OSP</x:Type>
</x:DataSource>
<x:Palette>
<x:Entry>#000000</x:Entry>
<x:Entry>#FFFFFF</x:Entry>
<x:Entry>#FF0000</x:Entry>
<x:Entry>#00FF00</x:Entry>
<x:Entry>#0000FF</x:Entry>
<x:Entry>#FFFF00</x:Entry>
<x:Entry>#FF00FF</x:Entry>
<x:Entry>#00FFFF</x:Entry>
<x:Entry>#800000</x:Entry>
</x:Palette>
<x:Scaling>
<x:ScaleID>0</x:ScaleID>
<x:Orientation>MinMax</x:Orientation>
</x:Scaling>
<x:Scaling>
<x:ScaleID>1</x:ScaleID>
<x:Orientation>MinMax</x:Orientation>
</x:Scaling>
<x:Chart>
<x:Name>Chart1</x:Name>
<x:Title>
<x:Caption>
<x:DataSource>-1</x:DataSource>
<x:Data>"<x:B>Open High Low Close stock chart</x:B>"</x:Data>
</x:Caption>
<x:Font>
<x:FontName>Arial</x:FontName>
<x:Size>12</x:Size>
<x:B/>
<x:AutoScale/>
</x:Font>
<x:Alignment>
<x:Horizontal>Center</x:Horizontal>
<x:Vertical>Center</x:Vertical>
</x:Alignment>
<x:Border>
<x:ColorIndex>None</x:ColorIndex>
</x:Border>
<x:Interior>
<x:ColorIndex>None</x:ColorIndex>
</x:Interior>
</x:Title>
<x:PageSetup>
<x:ChartSize>FullPage</x:ChartSize>
</x:PageSetup>
<x:Border>
<x:ColorIndex>None</x:ColorIndex>
</x:Border>
<x:Interior>
<x:ColorIndex>None</x:ColorIndex>
</x:Interior>
<x:Font>
<x:FontName>Arial</x:FontName>
<x:Size>10</x:Size>
<x:AutoScale/>
</x:Font>
<x:Left>0</x:Left>
<x:Top>0</x:Top>
<x:Width>13660.7958984375</x:Width>
<x:Height>9340.7958984375</x:Height>
<x:ChartGrowth>
<x:HorzGrowth>1</x:HorzGrowth>
<x:VertGrowth>1</x:VertGrowth>
</x:ChartGrowth>
<x:PlotArea>
<x:Border>
<x:ColorIndex>15</x:ColorIndex>
<x:LineStyle>Solid</x:LineStyle>
<x:Weight>Narrow</x:Weight>
</x:Border>
<x:Interior>
<x:ColorIndex>14</x:ColorIndex>
</x:Interior>
<x:Font>
<x:FontName>Arial</x:FontName>
<x:Size>10</x:Size>
<x:AutoScale/>
</x:Font>
<x:Graph>
<x:Type>Line</x:Type>
<x:SubType>Standard</x:SubType>
<x:Line>
<x:ColorIndex>None</x:ColorIndex>
</x:Line>
<x:HiLowLines>
<x:Line>
<x:LineStyle>Solid</x:LineStyle>
<x:Weight>Hairline</x:Weight>
</x:Line>
</x:HiLowLines>
<x:ScaleID>0</x:ScaleID>
<x:ScaleID>1</x:ScaleID>
<x:Series>
<x:Index>0</x:Index>
<x:Caption>
<x:DataSource>0</x:DataSource>
<x:Data>$A$2</x:Data>
</x:Caption>
<x:Name>Open</x:Name>
<x:Line>
<x:ColorIndex>None</x:ColorIndex>
</x:Line>
<x:Marker>
<x:Symbol>None</x:Symbol>
</x:Marker>
<x:Category>
<x:DataSource>0</x:DataSource>
<x:Data>$B$1:$E$1</x:Data>
</x:Category>
<x:Value>
<x:DataSource>0</x:DataSource>
<x:Data>$B$2:$E$2</x:Data>
</x:Value>
<x:UpDownBars/>
</x:Series>
<x:Series>
<x:Index>1</x:Index>
<x:Caption>
<x:DataSource>0</x:DataSource>
<x:Data>$A$3</x:Data>
</x:Caption>
<x:Name>High</x:Name>
<x:Line>
<x:ColorIndex>None</x:ColorIndex>
</x:Line>
<x:Marker>
<x:Symbol>None</x:Symbol>
</x:Marker>
<x:Category>
<x:DataSource>0</x:DataSource>
<x:Data>$B$1:$E$1</x:Data>
</x:Category>
<x:Value>
<x:DataSource>0</x:DataSource>
<x:Data>$B$3:$E$3</x:Data>
</x:Value>
</x:Series>
<x:Series>
<x:Index>2</x:Index>
<x:Caption>
<x:DataSource>0</x:DataSource>
<x:Data>$A$4</x:Data>
</x:Caption>
<x:Name>Low</x:Name>
<x:Line>
<x:ColorIndex>None</x:ColorIndex>
</x:Line>
<x:Marker>
<x:Symbol>None</x:Symbol>
</x:Marker>
<x:Category>
<x:DataSource>0</x:DataSource>
<x:Data>$B$1:$E$1</x:Data>
</x:Category>
<x:Value>
<x:DataSource>0</x:DataSource>
<x:Data>$B$4:$E$4</x:Data>
</x:Value>
</x:Series>
<x:Series>
<x:Index>3</x:Index>
<x:Caption>
<x:DataSource>0</x:DataSource>
<x:Data>$A$5</x:Data>
</x:Caption>
<x:Name>Close</x:Name>
<x:Line>
<x:ColorIndex>None</x:ColorIndex>
</x:Line>
<x:Marker>
<x:Symbol>None</x:Symbol>
</x:Marker>
<x:Category>
<x:DataSource>0</x:DataSource>
<x:Data>$B$1:$E$1</x:Data>
</x:Category>
<x:Value>
<x:DataSource>0</x:DataSource>
<x:Data>$B$5:$E$5</x:Data>
</x:Value>
</x:Series>
<x:PlotVisible/>
</x:Graph>
<x:Axis>
<x:Placement>Bottom</x:Placement>
<x:AxisID>0</x:AxisID>
<x:ScaleID>0</x:ScaleID>
<x:Title>
<x:Caption>
<x:DataSource>-1</x:DataSource>
<x:Data>"<x:B>My ü company</x:B>"</x:Data>
</x:Caption>
<x:Font>
<x:FontName>Arial</x:FontName>
<x:Size>10</x:Size>
<x:B/>
<x:AutoScale/>
</x:Font>
<x:Alignment>
<x:Horizontal>Center</x:Horizontal>
<x:Vertical>Center</x:Vertical>
</x:Alignment>
<x:Border>
<x:ColorIndex>None</x:ColorIndex>
</x:Border>
<x:Interior>
<x:ColorIndex>None</x:ColorIndex>
</x:Interior>
</x:Title>
<x:CrossingAxis>1</x:CrossingAxis>
<x:Font>
<x:FontName>Arial</x:FontName>
<x:Size>10</x:Size>
<x:AutoScale/>
</x:Font>
<x:Number>
<x:SourceLinked/>
<x:BuiltInFormat>19</x:BuiltInFormat>
</x:Number>
<x:MajorTick>Cross</x:MajorTick>
<x:TickLabelSkip>1</x:TickLabelSkip>
<x:TickMarkSkip>1</x:TickMarkSkip>
<x:Type>Automatic</x:Type>
</x:Axis>
<x:Axis>
<x:Placement>Left</x:Placement>
<x:AxisID>1</x:AxisID>
<x:ScaleID>1</x:ScaleID>
<x:MajorGridlines/>
<x:CrossingAxis>0</x:CrossingAxis>
<x:CrossBetween>Between</x:CrossBetween>
<x:Font>
<x:FontName>Arial</x:FontName>
<x:Size>10</x:Size>
<x:AutoScale/>
</x:Font>
<x:Number>
<x:SourceLinked/>
<x:BuiltInFormat>0</x:BuiltInFormat>
</x:Number>
<x:MajorTick>Cross</x:MajorTick>
<x:Type>Value</x:Type>
</x:Axis>
</x:PlotArea>
<x:Legend>
<x:Placement>Right</x:Placement>
<x:Font>
<x:FontName>Arial</x:FontName>
<x:Size>10</x:Size>
<x:AutoScale/>
</x:Font>
</x:Legend>
</x:Chart>
</x:WebChart>
The following example shows a clustered bar chart that uses data from the Products table in the Northwind database. The chart shows unit price bars on the horizontal value axis plotted against the supplier IDs on the vertical category axis. The bars are spaced 150 units apart. The value axis has major gridlines displayed, and the major tick marks are displayed along the outside of the axis. The category axis has major tick marks displayed along the outside of the axis, and the unit labels are spaced 4 apart and displayed to the left of the axis. The third data point bar is green and the seventeenth data point bar is red. All other bars appear in the default blue color. A polynomial trendline is drawn over the unit prices, and the trendline formula and R-squared values are displayed. The chart has a white border and the legend is displayed at the top of the chart.
<x:WebChart>
<x:Width>11536</x:Width>
<x:Height>6773</x:Height>
<x:DataSource>
<x:Type>RowSet</x:Type>
<x:Connection>Products</x:Connection>
</x:DataSource>
<x:Border>
<x:Color>#000000</x:Color>
</x:Border>
<x:Chart>
<x:PlotArea>
<x:Graph>
<x:Type>Bar</x:Type>
<x:SubType>Clustered</x:SubType>
<x:Series>
<x:Caption>
<x:DataSource>-1</x:DataSource>
<x:Data>Series</x:Data>
</x:Caption>
<x:Index>0</x:Index>
<x:Category>
<x:DataSource>0</x:DataSource>
<x:Data>SupplierID</x:Data>
</x:Category>
<x:Value>
<x:DataSource>0</x:DataSource>
<x:Data>UnitPrice</x:Data>
</x:Value>
<x:DataPoint>
<x:Index>17</x:Index>
<x:Interior>
<x:Color>#FF0000</x:Color>
</x:Interior>
</x:DataPoint>
<x:DataPoint>
<x:Index>3</x:Index>
<x:Interior>
<x:Color>#00FF00</x:Color>
</x:Interior>
</x:DataPoint>
<x:Marker>
<x:Symbol>None</x:Symbol>
</x:Marker>
<x:Trendline>
<x:DisplayRSqr/>
<x:DisplayEq/>
<x:Value>5</x:Value>
<x:Type>Polynomial</x:Type>
</x:Trendline>
<x:Explode>0</x:Explode>
</x:Series>
<x:ScaleID>371807048</x:ScaleID>
<x:ScaleID>371807404</x:ScaleID>
<x:Overlap>0</x:Overlap>
<x:GapWidth>150</x:GapWidth>
</x:Graph>
<x:Axis>
<x:AxisID>371810876</x:AxisID>
<x:ScaleID>371807404</x:ScaleID>
<x:Type>Value</x:Type>
<x:MajorGridlines>
</x:MajorGridlines>
<x:MajorTick>Outside</x:MajorTick>
<x:MinorTick>None</x:MinorTick>
<x:Placement>Bottom</x:Placement>
</x:Axis>
<x:Axis>
<x:AxisID>371811684</x:AxisID>
<x:ScaleID>371807048</x:ScaleID>
<x:Type>Category</x:Type>
<x:MajorTick>Outside</x:MajorTick>
<x:MinorUnit>4.0</x:MinorUnit>
<x:MinorTick>None</x:MinorTick>
<x:Placement>Left</x:Placement>
<x:TickLabelSkip>4</x:TickLabelSkip>
</x:Axis>
</x:PlotArea>
<x:Category>
<x:DataSource>0</x:DataSource>
<x:Data>SupplierID</x:Data>
</x:Category>
<x:Value>
<x:DataSource>0</x:DataSource>
<x:Data>UnitPrice</x:Data>
</x:Value>
<x:Legend>
<x:Placement>Top</x:Placement>
</x:Legend>
</x:Chart>
<x:Scaling>
<x:ScaleID>371807048</x:ScaleID>
</x:Scaling>
<x:Scaling>
<x:ScaleID>371807404</x:ScaleID>
</x:Scaling>
</x:WebChart>