Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Introduction
Manco.Chart .NET control is designed to allow charting in any kind of the .NET applications:
desktop and web based. For now it supports following types of the charts:
1. Area
2. Area 100%
3. Area Stacked
4. Bar
5. Bar 100%
6. Bar Stacked
7. Bubble
8. Circular Gauge
9. Column
10. Column 100%
11. Column Stacked
12. Doughnut
13. Financial Bar
14. Funnel
15. Japanese Candlesticks
16. Kagi
17. Line
18. Pie
19. Pie Stacked
20. Pyramid
21. Renko
22. Step Line
23. Area 3D
24. Area 3D 100%
25. Area 3D Stacked
26. Bar 3D
27. Bar 3D 100%
28. Bar 3D Stacked
29. Bubble 3D
30. Column 3D
31. Column 3D 100%
32. Column 3D Stacked
33. Doughnut 3D
34. Funnel 3D
35. Kagi 3D
36. Line 3D
37. Pyramid 3D
38. Pie 3D
For the convenience of you and your users Manco.Chart library provides the Chart Parameters
control that allows change all parts of the chart layout using single easy form.
Currently your users can use themes to show charts using predefined chart parameters. The
ChartParamters control allows load and save themes.
Toolbar appearance is configured with simple XML document, so you can change its view in
any time. With toolbar abilities to reload data and execute commands you can easy create
dynamically changed chart.
The Manco.Chart control allows you to save chart in the any image format, supported by the
.NET Framework (BMP, GIF, JPEG, PNG, TIFF, and WMF).
Some additional features of the Manco.Chart control are:
1. Ability to rotate labels on any angle (labels escapement).
2. Automatic data labels.
3. Drill down for 2D charts.
4. Tool tips for 2D charts.
5. 2 and more charts in one component.
6. Legend’s position.
7. Automatic scales/ticks
8. Min and Max scale values.
9. Gradient and hatch filling for different chart areas.
10. Ability to rotate and translate 3D charts.
11. Ability to change lighting of the 3D charts.
Setup
Install Manco.Char into your system
1. Unzip downloaded file into the separate directory.
2. Run Setup.exe
3. Follow setup wizard and provide it with folder name where Manco.Chart control will be
located. The default location is C:\Program Files\Manco\Components\Chart.
To check that installation process complete successfully, open folder specified and look for the
files in it. It should contain:
1. Manco.Chart.dll
2. Manco.Drawing3D.dll
3. msvcr71.dll
4. Chart.xsd
5. Documentation\Manco.Chart Control User Guid.doc
6. Art – this folder contains few predefined Frame images, toolbar shapes and icons, and
chart themes you can use with your application.
7. License\Manco.Chart.License.lic
8. Demo – this folder contains the Manco.Chart.Demo application that demonstrates main
features of the Manco.Chart control and give you samples how to use these features.
Draw chart
After you have added chart control to your application and assigned chart document to it, you
can draw chart using Draw method of the control:
control.Draw();
if(loView != null)
{
// Initialize main view.
// Value of the layout element's attributes will be
copied
// to the view's controls.
loView.InitiateView(lxViewElement, null, false);
m_PopupForm.ViewPanel.Controls.Add(((UserControl)loVie
w));
// Show view
loView.ShowView(lxViewElement, false);
chartControl.RegenerateLayout();
chartControl.Draw();
}
}
}
}
}
Toolbar appearance is configured with simple XML document, so you can change its view in
any time. With toolbar abilities to reload data and execute commands you can easy create
dynamically changed chart.
To add toolbar to your form:
1. Drag and Drop ChartToolbar control on your form.
<Button … />
…
<ButtonDropDown … >
…
</ButtonDropDown>
…
<Separator />
</ChartToolbar>
An element <Band> describe toolbar appearance. It can have the following structure:
<Band Name=”(Optional) Name of the band”
LeftImage=”Name of the file will be used as left side of the band.”
CenterImage=”Name of the file will be used as center part of the band.”
RightImage=”Name of the file will be used as right side of the band.”>
<Fill ..>
…
</Fill>
</Band>
Any or all of the image attributes (“LeftImage”, “CenterImage” and “RightImage”) can be
omitted.
<Fill> element represents filling of the any chart area (band, legend, element and so on). It has
the following structure:
<Fill
<Interpolation …/>
…
<Interpolation …/>
<Border />
</Fill>
<Border> element represents border definition for filled area. It have the following format:
<Border
Type=”Type of the border. Can have the following values:
None |
Rectangle |
RoundedRectangle |
The <Button> element represents single button in the toolbar. It allows execution of the single
command supported by the toolbar. This element has following structure:
<Button Image="Name of the image file will be used to show image on the button"
Command="Command will be executed when button clicked"
Tooltip="Name of the predefined tool tip or text will be used as a button tool tip"
ChartType="Type of the chart will be shown (should be used with cmdChangeChartType
command)"
Legend="Legend location (should be used with cmdChangeLegend command)"
Theme="Name of the file that contains chart theme (could be used with cmdLoadTheme
command)."
Param1=””
Param2=””
Param3=””/>
The <Separator/> allows separate one group of the toolbar buttons from another.
The <ButtonDropDown/> represents the dropdown toolbar button. Click on this button results
another panel with buttons appears on the screen. Content of this panel is given as child elements
of the <ButtonDropDown> element. This element has following structure:
<ButtonDropDown
Image=" Name of the image file will be used to show image on the button"
Command="Command will be executed when button clicked. Only
cmdPrepareDropDown is currently allowed for this button."
Tooltip="Name of the predefined tool tip or text will be used as a button tool tip" >
<Button … />
…
<Button … />
</ButtonDropDown>
Legend’s context menu allows you change legend placement and legend’s parameters. This
menu appears when you right-click legend area.
Plot Area context menu allows you change chart type; layout, plot area, chart specific and
element parameters; scale and grid appearance and parameters.
In case when 3D chart is shown Plot Area context menu contains also menu item that allows you
change some 3D parameters (clustering, using box shape, jittering, transformation and
coordinate plane).
When you right-click specific area (label, chart element) you will get the context menu that
allows change parameters of this element.
Using Themes
Themes in the Manco.Chart are the real building blocks of the chart layout. Using themes you or
your users can create desirable view of the chart during a few seconds. Theme is an XML file
that contains ready to use part of the chart layout. The root element of this document could be
one of the following: <Charts>, <ComponentLayout> or <Layout>. It could contain any or all
parts of the chart layout (see content of the files are located in the subfolders of the Art\Themes
folder for theme’s examples). There is one additional attribute that manages theme element
loading. This is “Manco.Chart.LoadMode”. You can insert this attribute to any node of theme. It
can have following values:
1. Overload – attributes with same names obtain value from the theme's element (default
value).
chartControl.RegenerateLayout();
chartControl.Draw();
}
<Chart … >
…
</Chart>
<Chart … >
…
</Chart>
</Charts>
Chart document should contain one <ComponentLayout> element and one or more <Chart>
elements.
<ComponentLayout> element
The <ComponentLayout> element represents common layout of the Manco.Chart control. Chart
document should always contain one and only one component layout element. It contains
information about control’s frame, tiles and footers. This element has following structure:
<ComponentLayout
BorderSize=”Size of the free space between component boundaries and chart’s frame.
Optional. Default value – 2 pixels.” >
<Titles … >
…
</Titles>
<Footers … >
…
</Footers>
</ComponentLayout>
Any or all of the <Frame>, <Titles> and <Footers> elements can be omitted.
<Frame> element
Frame is a background of the chart control. It consists of 3 bands: Top, Middle and Bottom.
Top
Middle
Bottom
Every band could be filled using a different ways. Every band can contain 3 images (left, center
and right) and/or internal area filling with or without border definition. Based on the type of the
band filling we can divide frames on 2 groups:
1. “Image” frames.
2. “Programming” frames.
“Image” frames are that ones which uses external images to fill bands’ left, center and right parts
to create frame’s border and internal area (if needed). It also can contain optional internal area
filling definition. This type of frames allows creation of the state of art or business specific chart
forms (for example, with some kind of the company logos).
“Programming” frames are not including external images for left, center and right parts of the
bands. These frames contain definition for a filling and border at least of the Middle band and
allow creation of the various backgrounds with predefined parameters (internal area filling and
border type).
You can set every part of the frame separately using SetAttribute method of the XmlElement, or
you can use Theme to load a whole image.
Note: How to use themes to load chart settings see in the Using Themes chapter.
Frame definition is contained in the <Frame> element of the chart XML document. This element
has following structure:
<Frame>
<Top …>
…
</Top>
<Middle …>
…
</Middle>
<Band> element
An element that has a “Band” type represents a horizontal band that could be filled using a
different ways. It can have the following structure:
<Band Name=”(Optional) Name of the band”
LeftImage=”Name of the file will be used as left side of the band. Optional.”
CenterImage=”Name of the file will be used as center part of the band. Optional.”
RightImage=”Name of the file will be used as right side of the band. Optional.”>
Bottom=”Bottom bound of the band. Could be a number (for value bands) or name (for
category/series bands). Make sense for the named bands. ”
Top=”Top bound of the band. Could be a number (for value bands) or name (for
category/series bands). Make sense for the named bands. ”
<Fill …>
…
</Fill>
</Band>
Any or all of the image attributes (“LeftImage”, “CenterImage” and “RightImage”) can be
omitted. <Fill> element is optional and could be omitted. In this case band will be created based
on the image attributes. In case when they are omitted too band wouldn’t filled at all.
<Fill> element
<Fill> element represents filling of the any chart area (band, legend, element and so on). It has
the following structure:
<Fill
Color=”Main fill color in form AARRGGBB or RRGGBB or as name of color (Blue, for
example). Required.”
GradientColor=”Second color (will be used for a gradient or hatching) in form
AARRGGBB or RRGGBB or as name of color (Blue, for example). Optional. Default value –
transparent color.”
GradientType=”Gradient type. Can have following values:
None |
BackwardDiagonal |
ForwardDiagonal |
Horizontal |
Vertical |
CylinderHorizontal |
CylinderVertical |
Center |
Interpolation
Optional. Default value – None.”
Image=”Name of the file will be used as a watermark for a filled area. Optional.”
WrapMode=”Determine how shape is filled with watermark image. Can have the
following value:
<Interpolation …/>
…
<Interpolation …/>
<Border />
</Fill>
<Interpolation> elements are used only when Interpolation gradient type is selected. In all other
cases they could be omitted.
<Border> element is optional and could be omitted.
<Interpolation> element
<Interpolation> element is used to define a multicolor gradient. Single <Interpolation> element
contains color and position of the color blend. It has following format:
<Interpolation
Position=”Value from 0 through 1 that specify the percentage of the distance along the
gradient line. Required.”
Color=”Interpolation color in form AARRGGBB or RRGGBB or as name of color (Blue,
for example). Required.” />
<Border> element
<Border> element represents border definition for filled area. It have the following format:
<Border
Type=”Type of the border. Can have the following values:
None |
Rectangle |
RoundedRectangle |
Rectangle3D |
RoundedRectangle3D
Required attribute.”
Color=”Border color in form AARRGGBB or RRGGBB or as name of color (Blue, for
example). Optional. Default value – transparent color.”
Width=”Border width. Optional. Default value – 0.”
CornerRadius=”Radius of the border corners (used for a Rounded… border types).
Optional. Default value – 1.”/>
<Title … />
…
<Title …/>
</Titles>
<Title> elements are optional and could be omitted.
<Footers> element
Footers are a group of the text lines located at the bottom of the chart. These lines could be
docked to the Bottom band of the frame or located relative to the bottom of frame. When titles
are docked, the Bottom band is sized to include all texts inside. In case of the relative location
texts are shifted from the bottom of frame irrespective is Bottom band defined or not.
Footers’ parameters are defined in the <Footers> element of the layout. It has following
structure:
<Footers
Docking=”Docked | Relative – titles docking style. Optional. Default value – Docked.”
Location=”Shift from the top of frame in pixels. It works for Relative docking style.
Optional. Default value – 0.”>
<Title … />
…
<Title …/>
</Footers>
<Title> elements are optional and could be omitted.
<Title> element
<Title> element describes a single line of text. It has following structure:
<Title
Text=”Text of the title. Optional. Default value – empty string. ”
Align=”Left | Center | Right – text align. Optional. Default value – Center.”>
<Style …>
…
</Style>
</Title>
<Style> element is optional and could be omitted.
<Style> element
<Style> element represents style of the different chart elements. It has following structure:
<Style
<Font … />
<Fill … />
</Style>
<Font> and <Fill> elements are optional and could be omitted. If <Font> element is omitted,
then Arial font with size 10 will be used.
<Font> element
<Font> element represents font definition. It has following structure:
<Font
Name=”Name of the font (for example, Arial). Optional. Default value – Arial.”
Size=”Font size. Optional. Default value – 10.”
Bold=”True | False – indicate whether font is bold. Optional. Default value – False.”
Italic=”True | False – indicate whether font is italic. Optional. Default value – False.”
Strikeout=”True | False – indicate whether font is strikeout. Optional. Default value –
False.”
Underline=”True | False – indicate whether font is underline. Optional. Default value –
False.”
/>
<Chart> element
<Chart> element represents a single chart that will be shown with Manco.Chart control. You can
place more then 1 chart in one control. For this you need to put 2 or more <Chart> elements into
root <Charts> element of the chart document. Every chart should have one <Layout> and at one
<Data> elements. It allows showing on one component charts with data from the different data
sources.
<Chart>
<Layout …>
…
</Layout>
<Data>
…
</Data>
</Chart>
<Layout> element
The <Layout> element contains description of the chart layout. It has following structure:
<Layout
Type=”Area |
Area100 |
AreaStacked |
Bar |
Bar100 |
BarStacked |
Bubble |
Column |
Column100 |
ColumnStacked |
Doughnut |
Page 23 of 43 Updated 5/8/2006
FinancialBar |
JapaneseCandlestick |
Line |
Pie |
PieStacked |
Pyramid |
StepLine |
Area3D |
Area3D100 |
Area3DStacked |
Bar3D |
Bar3D100 |
Bar3DStacked |
Column3D |
Column3D100 |
Column3DStacked |
Doughnut3D |
Line3D |
Pie3D |
Pie3DStacked |
Pyramid3D |
StepLine3D
Required element.”
X=”X Location of the chart in percent of the control width. Optional. Default value – 0.”
Y=”Y Location of the chart in percent of the control height. Optional. Default value – 0.”
Width=”Width of the chart in percent of the control width. Optional. Default value –
100.”
Height=”Height of the chart in percent of the control height. Optional. Default value –
100.” >
<Legend …/>
<PlotArea … />
<ScaleAndGrid … />
<Element … />
<DataGrid …/>
<Categories>
…
</Categories>
<SeriesList>
…
</SeriesList>
<Values>
…
</Values>
<ChartSpecific … />
<Parameters3D … />
<AnnotationList>
…
</AnnotationList>
</Layout>
All child elements of the layout are optional.
<Style …>
…
</Style>
</Legend>
<Style> element is optional and can be omitted.
<PlotArea> element
The Plot Area is a region where actual chart is drawing. Like most of the chart regions legend
could be filled and bordered. This region is described in the <PlotArea> element of the chart
document. It has following structure:
<PlotArea>
<Fill …>
…
</Fill>
</PlotArea>
<Fill> element is optional and can be omitted.
<ScaleAndGrid> element
The <ScaleAndGrid> element represents parameters that allow manipulation with axis and grid
appearance as well as chart scale. This element has following structure:
<ScaleAndGrid
AxisColor=”Color of the axis line in form AARRGGBB or RRGGBB or as name of color
(Blue, for example). Optional. Default value – Black.”
AxisWidth=”Width of the axis line in pixels. Optional. Default value – 2.”
TickLength=”Length of the tick line in pixels. Optional. Default value – 10.”
Format=”Format string that would be used to format second Y-axis. Optional.
Defaultvalue – {0} ”>
<Scale… />
<Grid…/>
</ScaleAndGrid>
<Scale> element
<Scale> element allows you to set up maximum and minimum values will be shown on the chart
as well as major and minor scale units. It has following structure:
<Scale
Max=”Scale Maximum Value. Optional. There is not default value. If it’s omitted, then it
would be automatically calculated.”
Min=”Scale Minimum Value. Optional. There is not default value. If it’s omitted, then it
would be automatically calculated.”
MajorUnit =”Scale Major Unit. Optional. There is not default value. If it’s omitted, then
it would be automatically calculated.”
MinorUnit =”Scale Minor Unit. Optional. There is not default value. If it’s omitted, then
it would be automatically calculated.”>
</Scale>
Note: It’s strong recommended to set major and minor units so the Major will be divisible by
Minor. For example: Minor: 2, Major: 10 or Minor: 5, Major: 15.
<Grid> element
<Grid> allow you show or hide grid lines in chart dimensions and change their colors and color
of the Zero line (line is shown on the position of the 0 value). There are major and minor grid
lines. Major grid lines appear on the Category/Series position and/or on positions of the Scale
Major Unit. Minor grid lines appear on the middle of the Category/Series tick and/or on position
of the Scale Minor Unit. Also this element defines grid bands – colored bands shown between
two grid lines. <Grid> element has following structure:
<Grid
CategoryMajor=”True | False – indicates whether the major grid lines will be shown for
a Category (Series) dimension. Optional. Default value – False.”
CategoryMinor=”True | False – indicates whether the minor grid lines will be shown for
a Category (Series) dimension. Optional. Default value – False.”
ValueMajor=”True | False – indicates whether the major grid lines will be shown for a
Value dimension. Optional. Default value – False.”
ValueMinor=”True | False – indicates whether the minor grid lines will be shown for a
Value dimension. Optional. Default value – False.”
CategoryMajorColor=”Color of the major grid line of the Category (Series) dimension in
form AARRGGBB or RRGGBB or as name of color (Blue, for example). Optional. Default value
– semitransparent Gray.”
CategoryMinorColor=”Color of the minor grid line of the Category (Series) dimension in
form AARRGGBB or RRGGBB or as name of color (Blue, for example). Optional. Default value
– semitransparent Gray.”
ValueMajorColor=”Color of the major grid line of the Value dimension in form
AARRGGBB or RRGGBB or as name of color (Blue, for example). Optional. Default value –
semitransparent Gray.”
ValueMinorColor=”Color of the minor grid line of the Value dimension in form
AARRGGBB or RRGGBB or as name of color (Blue, for example). Optional. Default value –
semitransparent Gray.”
ZeroLineColor=”Color of the Zero line of the Value dimension in form AARRGGBB or
RRGGBB or as name of color (Blue, for example). Optional. Default value – Black.”>
<CategoryBands … />
<ValueBands … />
</Grid>
<CategoryBands> element
<CategoryBands> element represents sequence of the colored bands shown between two grid
lines in Category (Series) dimension. It has following structure:
<CategoryBands>
<Band … />
…
<Band … />
</CategoryBands>
<ValueBands> element
<ValueBands> element represents sequence of the colored bands shown between two grid lines
in Value dimension. It has following structure:
<ValueBands>
<Band … />
…
<Band … />
</ValueBands>
<Element> element
Element is a single data element on the chart: bar, column, pie and so on. Chart document
contains <Element> node that describe common properties of those data elements. This element
has following format:
<Element
BorderWidth=”Width of the border line in pixels. Optional. Default value – 0.”
BorderColor=”Color of the element’s border in form AARRGGBB or RRGGBB or as
name of color (Blue, for example). Optional. Default value – transparent color.”
ShowShadow=”True | False – indicate whether the shadow will be shown for the chart
elements. Optional. Default value – False.”
ShowValues=”True | False – indicate whether values will be shown on the chart
elements. Optional. Default value – False.”
ShowPercentages=”True | False – indicate whether percentage will be shown on the
chart elements. Optional. Default value – False.”
RoundPercentTo=”Value indicates to which digital position percent will be rounded.
Optional. Default value – 0.1.”
RoundValueTo=”Value indicates to which digital position value will be rounded.
Optional. Default value – 0.1.” />
<Categories> element
Categories and Series are the chart dimensions. The <Categories> element contains categories
title, label and tool tip description as well as list of the chart category descriptions. It has
following structure:
<Categories>
<Title …>
<Label …>
…
</Label>
<Tooltip … />
<Category …>
…
</Category>
…
<Category …>
…
</Category>
</Categories>
All child elements are optional. If <Categories> element doesn’t contain any <Category>
element, then those ones will be generated automatically based on the values provided in the
<Data> element.
<Label> element
Label is a text near the axis line that clarifies axis point. Parameters of this text are represented
by <Label> element. This element has following structure:
<Label Escapement=”Angle to rotate label text. Optional. Default value – 0.”
Format=”Format string that will be used to format axis label. Optional. Default value –
{0}”>
<Style …>
…
</Style>
</Label>
<Style> element is optional and can be omitted. The “Format” attribute more often is used to
format labels along the Y-axis (value labels).
<Category> element
The <Category> element represents description of one of the chart categories. It has the
following structure:
<Category Name=”Unique category ID. Required.”>
<Title …>
<Style … >
<Fill … />
Page 28 of 43 Updated 5/8/2006
</Style>
</Title>
</Category>
The “Name” attribute of the <Category> element will be used to select chart data elements
belong to this category. The “Text” attribute of the <Title> element will be used as category
label. The <Fill> child element of the <Style> element describe filling of the chart data elements
(bars, columns or pies) corresponding to this category.
<Title> element is optional and can be omitted.
<SeriesList> element
Categories and Series are the chart dimensions. The <SeriesList> element contains series title,
label and tool tip description as well as list of the chart series descriptions. It has following
structure:
<SeriesList>
<Title …>
…
</Title>
<Label …>
…
</Label>
<Tooltip … />
<Series …>
…
</Series>
…
<Series …>
…
</Series>
</SeriesList >
All child elements are optional. If <SeriesList> element doesn’t contain any <Series> element,
then those ones will be generated automatically based on the values provided in the <Data>
element.
<Series> element
The <Series> element represents description of one of the chart series. It has the following
structure:
<Series Name=”Unique series ID. Required.”
ChartType=”Define type of the separate series. Can get the same values as Type attribute
of the <Layout> element.”
OwnAxis=”True | False – indicates whether the series should have on axis. This axis will
be shown at the right side of the chart.”>
<Title …>
<Style … >
<Fill … />
</Style>
</Title>
<ScaleAndGrid …>
…
</ScaleAndGrid>
<Values> element
The <Values> element contains value axis title and label. It has following structure:
<Values>
<Title …>
…
</Title>
<Label …>
…
</Label>
<Tooltip … />
<ElementLabel …>
…
</ElementLabel>
</Values>
All child elements are optional and can be omitted.
<Style …>
…
</Style>
</ElementLabel>
<Style> element is optional and can be omitted.
<ChartSpecific> element
Chart specific parameters describe settings that are specific for some chart types. These settings
are stored in the <ChartSpecific> element. This element has following structure:
<ChartSpecific>
<Area … />
<Bubble …/>
<CircularGauge … />
<Doughnut … />
<FinancialBar … />
<Funnel … />
<JapaneseCandlestick … />
<Kagi … />
<Line … />
<Renko … />
<StepLine … />
<Pie3D … />
<Pyramid3D … />
</ChartSpecific>
All child elements are optional and can be omitted.
<Area> element
The <Area> element contains parameters that are specific for a Area, Area100, AreaStacked,
Area3D, Area3D100 and Area3DStacked charts. It has following structure:
<Area
LineWidth=”Width of the area’s border line in pixels. Optional. Default value – 2.”
ShowDataPoints=”True | False – indicate whether data points will be shown. Optional.
Default value – False.”
SplineTension=”From 0 to 1 – A value that specifies the amount that the curve bends
between control points. Values greater than 1 produce unpredictable results. Optional. Default
value – 0.” />
<Line> element
The <Line> element contains parameters that are specific for a Line and Line3D charts. It has
following structure:
<Line
LineWidth=”Width of the line in pixels. Optional. Default value – 2.”
ShowDataPoints=”True | False – indicate whether data points will be shown. Optional.
Default value – False.”
SplineTension=”From 0 to 1 – A value that specifies the amount that the curve bends
between control points. Values greater than 1 produce unpredictable results. Optional. Default
value – 0.” />
<StepLine> element
The <StepLine> element contains parameters that are specific for a StepLine and StepLine3D
charts. It has following structure:
<StepLine
LineWidth=”Width of the area’s border line in pixels. Optional. Default value – 2.”
<FinancialBar> element
The <FinancialBar> element contains parameters that are specific for a FinancialBar chart. One
financial bar is defined by 4 values: Low, Open, Close, High. These values are given in as 4
<Value> elements that have same series and categories corresponding to Low, Open, Close,
High values. Names of the categories corresponding to these values are given in the
<FinancialBar> element as well as a couple of other parameters. This element has following
structure:
<FinancialBar
Color=”Color of bars in form AARRGGBB or RRGGBB or as name of color (Blue, for
example). Required.”
Width=”Width of the bars in pixels. Optional. Default value – 2.”
CategoryLow=”Name of the category corresponding to the Low value. Optional. Default
value – Low.”
CategoryOpen=”Name of the category corresponding to the Open value. Optional.
Default value – Open.”
CategoryClose=”Name of the category corresponding to the Close value. Optional.
Default value – Close.”
CategoryHigh=”Name of the category corresponding to the High value. Optional.
Default value – High.”/>
<JapaneseCandlestick> element
The <JapaneseCandlestick> element contains parameters that are specific for a
JapaneseCandlestick chart. One financial stick is defined by 4 values: Low, Open, Close, High.
These values are given in as 4 <Value> elements that have same series and categories
corresponding to Low, Open, Close, High values. Names of the categories corresponding to
these values are given in the <JapaneseCandlestick> element as well as a couple of other
parameters. This element has following structure:
<JapaneseCandlestick
ShadowColor=”Color of bars in form AARRGGBB or RRGGBB or as name of color
(Blue, for example). Required.”
ShadowWidth=”Width of the bars in pixels. Optional. Default value – 2.”
CategoryLow=”Name of the category corresponding to the Low value. Optional. Default
value – Low.”
CategoryOpen=” Name of the category corresponding to the Open value. Optional.
Default value – Open.”
CategoryClose=” Name of the category corresponding to the Close value. Optional.
Default value – Close.”
CategoryHigh=” Name of the category corresponding to the High value. Optional.
Default value – High.”>
<BlackFill … />
<WhiteFill … />
</JapaneseCandlestick>
<BlackFill> and <WhiteFill> elements describe filling for a black and white sticks. Both of them
have the same structure as <Fill> element.
<Pyramid3D> element
The <Pyramid3D> element contains parameters that are specific for a Pyramid3D chart. It has
following structure:
<Pyramid3D
MaxRadius =”Max radius of the3D pyramid. Optional. Default value – 1.5” />
<Doughnut> element
The <Doughnut> element contains parameters that are specific for a Doughnut and Doughnut3D
charts. It has following structure:
<Doughnut
InnerRadius=”Inner radius of the doughnut chart in percent of outer radius. Optional.
Default value – 50” />
<Bubble> element
The <Bubble> element contains parameters that are specific for a Bubble and Bubble3D charts.
It has following structure:
<Bubble
MinRadius=”Minimal radius of the bubble in pixels. Optional. Default value – 4.”
MaxRadius=”Maximal radius of the bubble in pixels. Optional. Default value – 25.”
DefaultShape=”Circle | Box | Rhomb | Triangle | Cross – Bubble shape will be used if no
one specified for a category. Optional. Default value - Circle”>
<CategoryShape
Category=”Category Name”
Shape=”Circle | Box | Rhomb | Triangle | Cross” />
…
<CategoryShape … />
</Bubble>
<Funnel> element
The <Funnel> element contains parameters that are specific for a Funnel and Funnel3D charts. It
has following structure:
<Funnel
Type=”Width | Height – funnel type. Width means that data value is used to scale funnel
element width. Height means that data value is used to scale funnel element height.”
TrunkWidth=”Width of the funnel trunk. Optional. Default value – 20.”
TrunkHeight=”Height of the funnel trunk. Optional. Default value – 20.”
</Funnel>
<Kagi> element
The <Kagi> element contains parameters that are specific for a Kagi and Kagi3D charts. It has
following structure:
<Kagi
ReversalAmount=”Amount the value must move in order to reverse direction of the line.
Optional. Default value – 5.”
<Renko> element
The <Renko> element contains parameters that are specific for Renko and Renko3D charts. This
element has following structure:
<Renko BoxSize=”Determines the minimum price change to display. Required.” >
<BlackFill … />
<WhiteFill … />
</Renko>
<BlackFill> and <WhiteFill> elements describe filling for a black and white boxes. Both of them
have the same structure as <Fill> element.
<CircularGauge> element
The <CircularGauge> element represents parameters that are specific for the Circular Gauge
charts. This element has following structure:
<CircularGauge
SweepAngleStart=”Start angle of the sweep area in degrees. Optional. Default value –
170.”
SweepAngleLength=”Length of the sweep area in degrees. Optional. Default value –
20.”
BandWidth=”Width of the bands in % of radius. Optional. Default value – 20.>
<Pointer Type=”Type of the pointer: - Block | Arrow | Triangle. Optional. Default value
– Block.”
Width = “Width of the pointer. Optional. Default value – 5.”/>
<PinPoint Radius=”Radius of the pin point. Optional. Default value – 20.”>
<Fill … />
</PinPoint>
</CircularGauge>
<Parameters3D> element
Manco.Chart uses OpenGL technology to speed up 3D charting so you should be sure that target
platform supports this technology and has corresponding hardware (video card). In the other
case 3D charting will be very slow or could not work at all.
Rendering parameters allow change a way how 3D scene is created. They control off-
screen/onscreen rendering mode, multisampling and jittering. Off-screen rendering allows create
the 3D chart without show the OpenGL window. It makes 3D charting more like 2D. This mode
works on most video cards with NVIDIA or ATI chip. In case, when off-screen rendering is
turned on, but video card doesn’t support it, rendering will be performed onscreen. In this case
you will see shortly an OpenGL window where actual 3D scene will be rendered. Multisampling
allows you to get smoother picture. Most of the modern video card supports hardware
Page 34 of 43 Updated 5/8/2006
multisampling. It works fast and it’s enough in the most cases. Jittering is a software anti-
aliasing. You can change level of the jitter from 2 to 66. Starting from the level 8 the quality of
picture is better then with hardware multisampling, but it takes considerable more time. Jittering
isn’t available when hardware multisampling is turned on. In the situation when you have a low-
end video card that doesn’t support multisampling, you can turn-off multisampling and jittering
while you are preparing 3D scene (select 3D chart type, change lighting, rotate and translate
scene to get suitable view), then turn on jitter and get quality picture. With a power video card
(actually starting from the middle-end cards like GeForce-4200) you can choose what mode
(hardware multisampling or jittering) use to get smooth 3D picture.
Appearances parameters allow change a size and view of the 3D chart elements. They control
depth of the 3D elements, distance between 3D elements in Z-dimension, text thickness, using
clustered elements’ placing, and shape of the 3D elements.
Rendering and appearance parameters, 3D scene lighting, transformation and coordinate plane
parameters are defined in the <Parameters3D> element. It has following structure:
<Paramters3D
OffscreenRendering=”True | False – indicate whether the off-screen rendering is turned
on. Optional. Default value – False.”
Multisampling=”True | False – indicate whether the hardware multisampling is turned
on. Optional. Default value – False.”
JitterEnabled=”True | False – indicate whether the software anti-aliasing (jitter) is
turned on. Optional. Default value – False.”
JitterLevel=”Level of jitter. Could be 2, 3, 4, 8, 15, 24, 66. Optional. Default value – 8.”
Depth=”Depth of the 3D chart elements (areas, bars, columns, pies, pyramids and lines).
Optional. Default value – 0.3.”
Clustered=”True | False – indicates whether 3D elements on the chart will be shown in
Z-order or Y-order. Optional. Default value – False.”
UseBoxShape=”True | False – indicates whether some of the 3D chart elements (bars,
columns and pyramids) use box body instead cylinder body. Optional. Default value – False.”
Distance=”Distance between 3D elements in Z dimension when 3D chart is in the
clustered mode. Optional. Default value – 0.06.”
TextExtrusion=”Size of the texts in Z dimension. Optional. Default value – 0.01.”>
<Lightings>
…
</Lightings>
<Transformation … />
<CoordinatePlane … />
</Parameters3D>
All child elements are optional and can be omitted.
<Lightings> element
<Lightings> elements contains list of light sources. Up to 8 lightings could be defined. This
element has following structure:
<Lightings>
<Lighting … />
…
<Lighting … />
</Lightings>
<Transformation> element
Transformation parameters allow you control rotation and translation of the 3D chart.
Transformation parameters are defined in the <Transformation> child element of the
<Parameters3D>. It has following format:
<Transformation
RotationX=”The rotation angle around the x-axis in degrees (-360 – 360). Optional.
Default value – 0.”
RotationY=”The rotation angle around the y-axis in degrees (-360 – 360). Optional.
Default value – 0.”
RotationZ=”The rotation angle around the z-axis in degrees (-360 – 360). Optional.
Default value – 0.”
TranslateX=”Translation along the x-axis. Optional. Default value – 0.”
TranslateY=”Translation along the y-axis. Optional. Default value – 0.”
TranslateZ=”Translation along the z-axis. Optional. Default value – 0.” />
<CoordinatePlane> element
Coordinate plane parameters allow you control view of the coordinate planes for a 3D Area, 3D
Bar, 3D Column, 3D Line and 3D Step Line charts. Coordinate plane parameters are defined in
the < CoordinatePlane> child element of the <Parameters3D>. It has following format:
<CoordinatePlane
Color=”Color of the axis planes in form AARRGGBB or RRGGBB or as name of color
(Blue, for example). Optional. Default value – White.”
Width=”Width of the 3D scene. Optional. Default value – 3.0.”
<DataGrid>
The <DataGrid> element represents settings that are specific for the data grid. It has following
format:
<DataGrid Show=”True | False – Indicates whether data grid should be shown”
ShowHorizontal=” True | False – Indicates whether we should show horizontal lines”
ShowVertical=” True | False – Indicates whether we should show vertical lines”
LegendInside =” True | False – Indicates whether we should show legend inside data
grid”
LegendLocation=”Left | Right - Legend location in the grid (left/right)”>
<Style>
</Style>
</DataGrid>
The child <Style> represents style of the data grid (text color, font parameters, and region
filling). Width of grid lines equals half of the border width (see <Border> child element of the
<Fill> element).
<AnnotationList>
The <AnnotationList> element contains list of the annotations will be shown in the plot area. It
has following structure:
<AnnotationList>
<Annotation … />
…
<Annotation … />
</AnnotationList>
<Annotation>
The <Annotation> element represents single annotation will be shown in the plot area. It can
have different body, filling and text. This element has following structure:
<Annotation
LocationType =”Fixed | Relative – indicates whether the annotation location is given as
coordinates in pixels (Fixed) or as percent of plot area width/height (Relative).”
X=”X-coordinate of the annotation left-upper corner”
Y=”Y-coordinate of the annotation left-upper corner”
Body=”Box | … - type of the annotation body”
Text=”Text of the annotation”
Align=”Left | Center | Right – text align. Optional. Default value – Center.”>
<Style … />
</Annotation>
<Data> element
The <Data> elements contains list of the chart values. This element has following structure:
<Data>
<Value …/>
…
<Value …/>
<Value> element
The <Value> element represents a single chart data point. It could be shown as single bar,
column, pie or line. This element has following structure:
<Value Series=”Unique series ID to which value belongs to. Required.”
Category=”Unique category ID to which value belongs to. Required.”
Value=”Number. Required.” />
<Border Type="RoundedRectangle"
Color="FF7688DD"
Width="1"
CornerRadius="20" />
</Fill>
</Middle>
<Bottom></Bottom>
</Frame>
<Titles Docking="Relative" Location="10">
<Title Text="Manco.Chart.Demo Application" Align="Right">
<Style Color="FFFFFF00">
<Font Name="Arial" Size="12" Bold="True" />
</Style>
</Title>
</Titles>
<Footers Docking="Relative" Location="10">
<Title Text="Manco.Chart v3.0">
<Style Color="FF000000">
<Font Name="Arial" Size="10" Bold="True"/>
</Style>
</Title>
</Footers>
</ComponentLayout>
<Chart>
<Layout Type="Column">
<Legend Placement="LeftMiddle">
<Style Color="FF000000">
<Font Name="Arial"
Size="10"
Bold="True"
Italic="False"
Strikeout="False"
Underline="False" />
<Fill Color="00FFFFFF"
IsHatch="False"
GradientType="None"
ShowShadow="False" />
</Style>