Manco.chart Control User Guide

Manco.Chart Control User Guide

INSTALL MANCO.CHAR INTO YOUR SYSTEM..............................................................................................................6ADD MANCO.CHART CONTROL TO THE VISUAL STUDIO .NET 2003 TOOLBOX........................................................6ADD MANCO.CHART CONTROL TO THE WINDOWS FORM APPLICATION...................................................................7ADD MANCO.CHART CONTROL TO THE WEB APPLICATION.......................................................................................7ASSIGN CHART DOCUMENT TO THE CONTROL...........................................................................................................7DRAW CHART.............................................................................................................................................................7SAVE CHART IMAGE TO THE FILE...............................................................................................................................7USING CHARTPARAMETERS CONTROL TO MODIFY CHART LAYOUT..........................................................................7USING CHART TOOLBAR..........................................................................................................................................10

Schema of the Chart Toolbar document..............................................................................................................11Supported Toolbar Commands...........................................................................................................................14Execute toolbar commands programmatically...................................................................................................15

USING CONTEXT MENUS..........................................................................................................................................15USING THEMES.........................................................................................................................................................16<COMPONENTLAYOUT> ELEMENT...........................................................................................................................17<FRAME> ELEMENT..................................................................................................................................................18<BAND> ELEMENT....................................................................................................................................................19<FILL> ELEMENT......................................................................................................................................................19<INTERPOLATION> ELEMENT...................................................................................................................................21<BORDER> ELEMENT................................................................................................................................................21<TITLES> ELEMENT..................................................................................................................................................22<FOOTERS> ELEMENT...............................................................................................................................................22<TITLE> ELEMENT....................................................................................................................................................22<STYLE> ELEMENT...................................................................................................................................................22<FONT> ELEMENT....................................................................................................................................................23<CHART> ELEMENT..................................................................................................................................................23<LAYOUT> ELEMENT................................................................................................................................................23<LEGEND> ELEMENT................................................................................................................................................25<PLOTAREA> ELEMENT...........................................................................................................................................25<SCALEANDGRID> ELEMENT...................................................................................................................................25<SCALE> ELEMENT...................................................................................................................................................26<GRID> ELEMENT.....................................................................................................................................................26<CATEGORYBANDS> ELEMENT................................................................................................................................27<VALUEBANDS> ELEMENT......................................................................................................................................27<ELEMENT> ELEMENT..............................................................................................................................................27<CATEGORIES> ELEMENT.........................................................................................................................................27<LABEL> ELEMENT..................................................................................................................................................28<TOOLTIP> ELEMENT FOR A CATEGORIES/SERIES LIST...........................................................................................28<CATEGORY> ELEMENT...........................................................................................................................................28<SERIESLIST> ELEMENT...........................................................................................................................................29<SERIES> ELEMENT..................................................................................................................................................29<VALUES> ELEMENT................................................................................................................................................30<ELEMENTLABEL > ELEMENT..................................................................................................................................30<TOOLTIP> ELEMENT FOR A VALUES.......................................................................................................................30<CHARTSPECIFIC> ELEMENT....................................................................................................................................31<AREA> ELEMENT....................................................................................................................................................31<LINE> ELEMENT.....................................................................................................................................................31<STEPLINE> ELEMENT.............................................................................................................................................31<FINANCIALBAR> ELEMENT....................................................................................................................................32<JAPANESECANDLESTICK> ELEMENT......................................................................................................................32<PIE3D> ELEMENT...................................................................................................................................................33<PYRAMID3D> ELEMENT.........................................................................................................................................33<DOUGHNUT> ELEMENT..........................................................................................................................................33<BUBBLE> ELEMENT................................................................................................................................................33<FUNNEL> ELEMENT................................................................................................................................................33<KAGI> ELEMENT.....................................................................................................................................................33<RENKO> ELEMENT..................................................................................................................................................34<CIRCULARGAUGE> ELEMENT.................................................................................................................................34<PARAMETERS3D> ELEMENT...................................................................................................................................34

Updated 5/8/2006Page 2 of 43

<LIGHTINGS> ELEMENT............................................................................................................................................35<LIGHTING> ELEMENT.............................................................................................................................................36<TRANSFORMATION> ELEMENT...............................................................................................................................36<COORDINATEPLANE> ELEMENT.............................................................................................................................36<DATAGRID>...........................................................................................................................................................37<ANNOTATIONLIST>................................................................................................................................................37<ANNOTATION>.......................................................................................................................................................37<DATA> ELEMENT....................................................................................................................................................37<VALUE> ELEMENT..................................................................................................................................................38Sample of the chart document..................................................................................................................................38


System RequirementsThe 2D charts don’t require any specific software or hardware stuff in addition to the .NET applications. So you can use 2D charts anywhere where you can use your .NET application. 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. At the present time drivers for the most video cards supports this technology. 3D charting shows best performance on the NVidia based: Ge Force 4 xxx and upper, ATI based: Radeon 8500 se and upper.

IntroductionManco.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. Area2. Area 100%3. Area Stacked4. Bar5. Bar 100%6. Bar Stacked7. Bubble8. Circular Gauge9. Column10. Column 100%11. Column Stacked12. Doughnut13. Financial Bar14. Funnel15. Japanese Candlesticks16. Kagi17. Line18. Pie19. Pie Stacked20. Pyramid21. Renko22. Step Line23. Area 3D24. Area 3D 100%25. Area 3D Stacked26. Bar 3D27. Bar 3D 100%28. Bar 3D Stacked29. Bubble 3D30. Column 3D31. Column 3D 100%32. Column 3D Stacked33. Doughnut 3D34. Funnel 3D35. Kagi 3D36. Line 3D37. Pyramid 3D38. Pie 3D


39. Pie 3D Stacked40. Renko 3D41. Step Line 3D

The layout (titles, fonts, colors, labels escapement and so on) and data of the chart are defined in the single XML document, so you can easy manage style of your chart by changing values of the corresponding attributes. If your application uses XML to represent application data (ADO.NET DataSet is a good example, because you can get its data as XML), then you can use simple XSL transformation to prepare chart document from your data.Easy to use context menus allow quickly change chart appearance. Most of the chart parameters can be changed by this way. When a chart element is right-clicked with the mouse, the context menu will display a list of commands that can be used to customize the corresponding chart element.

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.


Another useful control included to the Manco.Chart library is Chart Toolbar. It allows quickly change chart type and legend location, print and save chart, reloads chart data, load and apply themes, rotate 3D charts and call chart parameters form.

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/ticks8. 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 system1. Unzip downloaded file into the separate directory. 2. Run Setup.exe3. 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.dll2. Manco.Drawing3D.dll3. msvcr71.dll4. Chart.xsd5. Documentation\Manco.Chart Control User Guid.doc6. 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.lic8. 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.

Add Manco.Chart control to the Visual Studio .NET 2003 toolbox1. Run Visual Studio .NET 2003 and open your project in it. 2. Open any Windows Form from your project.3. Open toolbox and select Tab where you would like to place the chart control.4. Right click on the tab free space and select “Add/Remove Items …” from the popup

menu. Customize Toolbox dialog will appear.5. Click “Browse …” button on the “.NET Framework Components” tab of the dialog.6. Select Manco.Chart.dll in the folder where chart control was installed.


7. Click “Ok”. Chart control, Chart Parameters, Chart Toolbar and some Layout Parameters View controls will appear in the VS.NET toolbox.

Using Manco.Chart controlManco.Chart control is license protected. To avoid license exceptions you should do the following for every project where this control is used:

1. Create License directory in the project’s bin\Debug or/and bin\Release directory.2. Copy your Manco.Chart.License.lic file to the License directory.

For Web Applications add read/write access to this file for the ASPNET user.

Add Manco.Chart control to the Windows Form applicationIf Manco.Chart control has been added to the Visual Studio .NET 2003 toolbox, then

1. Add System.Web.dll to the project references2. Open Windows Form, where you would like to add control.3. Drag and drop control from the toolbar to your form. 4. Position and size control according to your needs.

Add Manco.Chart control to the Web application1. Add Manco.Chart.dll to the project references.2. Add System.Windows.Forma.dll to the project references.3. Create chart object:

Manco.Chart.ChartControl control = new ChartControl();

4. Assign your web page to the control:control.WebPage = this;

5. Size control to fit your needs:control.Size = new Size(550, 400);

Assign Chart Document to the control1. Create XmlDocument object and load XML from file, or prepare XML with XSLT, or

use some other technique to prepare XML chart document.XmlDocument xmlChartDocument = new XmlDocument();xmlChartDocument.Load("C:\\Temp\\chart.xml");

2. Use control’s ChartDocument property to assign chart document:control.ChartDocument = xmlChartDocument;

Draw chartAfter 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();

Save chart image to the fileTo save chart image to file you can use Image property of the control. control.Image.Save("D:\\Tmp\\chart.bmp", System.Drawing.Imaging.ImageFormat.Bmp);You can save chart image in any format supported by the .NET Framework.

Using ChartParameters control to modify chart layoutYou can allow your users to modify chart layout using Chart Parameters control that allows change all parts of the chart layout using single easy form:


This control contains also chart preview, which allow getting a chart view right on the place during parameters changing. Your users can use themes to show charts using predefined chart parameters. The ChartParamters control allows load and save themes.

1. Create in your Desktop application new Windows Form.2. Drag and drop ChartParameters control to your form. 3. Position and size it properly.4. Add to your form 2 properties:

public XmlDocument ChartDocument{

get{

return chartParameters.ChartDocument;}set{

chartParameters.ChartDocument = value;}

}

public ChartControl Chart{

get{

return chartParameters.Chart;}set{


chartParameters.Chart = value;}

}5. Add following code to you form in the place where you’d like to show chart parameters

form:ChartParametersForm form = new ChartParametersForm();form.ChartDocument = chartControl.ChartDocument;form.Chart = chartControl;if(form.ShowDialog() == DialogResult.OK){

chartControl.Draw();}

There is alternative way to show chart parameters form. You can use Chart Toolbar with active “cmdParamters” command. Click on this button will show chart parameters form.You can use views that are shown in the right side of the ChartParameters control outside it. This approach gives you an ability to create own properties form or integrate chart customization elements right into the form that contains chart. Following code demonstrates how it could be done:

private void ShowParameters(string asXPath){

if(asXPath != null){

XmlElement lxViewElement = (XmlElement)m_xmlChart.SelectSingleNode(asXPath);

if(lxViewElement != null){

// Get view that edit parameters of the given elementIXmlTreeDataView loView =

ParametersBaseView.GetViewByElement(lxViewElement);

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);

// Some parameters views contains another views// that shows attributes of the child elements.// Initialize child views.foreach(XmlNode lxChildNode in

lxViewElement.ChildNodes){

if(lxChildNode.NodeType == XmlNodeType.Element){

loView.InitializeChildView((XmlElement)lxChildNode, null, false);}

}

// In this somple we use external form to show view.// Initialize external form.RegionParametersForm m_PopupForm = new

RegionParametersForm();m_PopupForm.FormBorderStyle =

FormBorderStyle.FixedDialog;m_PopupForm.ShowInTaskbar = false;


m_PopupForm.StartPosition = FormStartPosition.CenterScreen;

m_PopupForm.Size = new Size(((UserControl)loView).Width + 8, ((UserControl)loView).Height + 70);

m_PopupForm.Text = "Parameters: " + loView.ViewName;

// Set view's vizualization parameters and add it to the form

((UserControl)loView).Dock = System.Windows.Forms.DockStyle.Fill;

((UserControl)loView).Location = new Point(0, 0);((UserControl)loView).Name = "chartParameters";((UserControl)loView).TabIndex = 0;

m_PopupForm.ViewPanel.Controls.Add(((UserControl)loView));

// Show viewloView.ShowView(lxViewElement, false);

// Show form as dilogif(m_PopupForm.ShowDialog() == DialogResult.OK){

// Apply changes made in view.// Value of the layout element's attributes will

be set// from the view's controls.loView.ApplyChanges();

// Apply changes made in child views.foreach(XmlNode lxChildNode in

lxViewElement.ChildNodes){

if(lxChildNode.NodeType == XmlNodeType.Element)

{loView.ApplyChangesInChildView((XmlE

lement)lxChildNode, null);}

}

chartControl.RegenerateLayout();chartControl.Draw();

}}

}}

}

Using Chart ToolbarChart Toolbar allows quickly change chart type and legend location, print and save chart, reloads chart data, load and apply themes, rotate 3D charts and call chart parameters form.

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.


2. Position and size it properly.3. Create XmlDocument object and load XML from file, or prepare XML with XSLT, or

use some other technique to prepare XML document that describe structure of the toolbar (you can find structure of the toolbar XML bellow in this document).Stream stream = ResourceLoader.GetFileStream("ChartToolbar.xml");m_xmlToolbar = new XmlDocument();m_xmlToolbar.Load(stream);stream.Close();

4. Use control’s SetStructure method to create toolbar structure:chartToolbar.SetStructure(xmlToolbar.DocumentElement);

5. Assign chart control and chart document to the toolbar:chartToolbar.Chart = chartControl;chartToolbar.ChartDocument = m_xmlChart;

6. Assign toolbar events if you need.You can easy change toolbar appearance just changing The <Band> element of the toolbar XML and redraw toolbar. Another way to change toolbar appearance is executing toolbar command “cmdChangeAppearance” either with toolbar button or programmatically.

Schema of the Chart Toolbar documentEvery attribute that is name of the image file (for example, LeftImage) can contain name of the file in the file system as well as name of the embedded resource located in the main application assembly.<ChartToolbar>

<Band …>…

</Band>

<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


Color=”Main fill color in form AARRGGBB or RRGGBB or as name of color (Blue, for example).”

GradientColor=” Second color (will be used for a gradient or hatching) in form AARRGGBB or RRGGBB or as name of color (Blue, for example).”

GradientType=”Gradient type. Can have following values: None |BackwardDiagonal |ForwardDiagonal |Horizontal |Vertical |CylinderHorizontal |CylinderVertical |Center |Interpolation”

Image=”Name of the file will be used as a watermark for a filled area.”WrapMode=”Determine how shape is filled with watermark image. Can have the

following value:Clamp |Tile |TileFlipX |TileFlipXY |TileFlipY

Can be omitted. In this case watermark image will be sized to fill all area.”ShowShadow=”True|False – Indicates whether shadow will be shown for a filled area.”IsHatch=”True|False – Indicates whether the area will be filled with a hatch style.”HatchStyle=” Specifies the different patterns available for a hatch style filling. Can have

the following values:BackwardDiagonal |Cross |DarkDownwardDiagonal |DarkHorizontal |DarkUpwardDiagonal |DarkVertical |DashedDownwardDiagonal |DashedHorizontal |DashedUpwardDiagonal |DashedVertical |DiagonalBrick |DiagonalCross |Divot |DottedDiamond |DottedGrid |ForwardDiagonal |Horizontal |HorizontalBrick |LargeCheckerBoard |LargeConfetti |LargeGrid |LightDownwardDiagonal |LightHorizontal |LightUpwardDiagonal |LightVertical |


Max |Min |NarrowHorizontal |NarrowVertical |OutlinedDiamond |Percent05 |Percent10 |Percent20 |Percent25 |Percent30 |Percent40 |Percent50 |Percent60 |Percent70 |Percent75 |Percent80 |Percent90 |Plaid |Shingle |SmallCheckerBoard |SmallConfetti |SmallGrid |SolidDiamond |Sphere |Trellis |Vertical |Wave |Weave |WideDownwardDiagonal |WideUpwardDiagonal |ZigZag”>

<Interpolation …/>…<Interpolation …/><Border />

</Fill>

<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”

Color=”Interpolation color in form AARRGGBB or RRGGBB or as name of color (Blue, for example).” />

<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”

Color=”Border color in form AARRGGBB or RRGGBB or as name of color (Blue, for example).”

Width=”Border width”CornerRadius=”Radius of the border corners (used for a Rounded… border types)”/>

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>

Supported Toolbar CommandsCurrently chart toolbar supports following commands:

1. cmdPrint – call standard print dialog. Allows chart printing.2. cmdPrintPreview – Allows chart print preview. Call standard .NET print preview dialog.3. cmdReloadData – Allows to reload chart data on the fly. Using this command suppose

that you provide chart toolbar component with Reload Data delegate where real data reloading will be implemented.

4. cmdSaveImage – Allows saving chart image to the file. 5. cmdPrepareDropDown – Prepare and show toolbar dropdown panel.6. cmdChangeChartType – Allows changing of the chart type. Suppose that you have

specified type of the chart in the “ChartType” attribute of the <Button> element.7. cmdChangeLegend – Allows changing of the legend location. Suppose that you have

specified legend location in the “Legend” attribute of the <Button> element.8. cmdLoadTheme – Perform load chart them from the specified location. Suppose that you

have specified location of the theme in the “Theme” attribute of the <Button> element. Theme also could be inserted to the <Button> element as a child. In this case <Button> element will look like the following:


<Button ..><Layout …>

…</Layout>

</Button>9. cmdLoadThemeFromFile – Allows load of theme from file. Call standard .NET Open

File Dialog.10. cmdParameters – Call Chart Parameters form.11. cmdChangeUp – Increase specified attribute in the given element by the given value.

Element is specified by its XPath given in the “Param1” attribute of the <Button>. Attribute is specified in the “Param2”. Increment specified in the “Param3”.

12. cmdChangeDown – Decrease specified attribute in the given element by the given value. Element is specified by its XPath given in the “Param1” attribute of the <Button>. Attribute is specified in the “Param2”. Decrement specified in the “Param3”.

13. cmdChangeAppearance – Call form to change toolbar appearance.14. cmdSwitch3D – Switch between 2D and 3D mode.15. cmdChangeValueUp – Increase specified property in the given layout element by the

given value. Property is specified by its calling path given in the “Param1” attribute of the <Button>. The calling path is relative to the Layout. It could look like the following: “Parameters3D.Transformation.RotationX” – we’d like to change value of the RotationX property that could be accessed normally by the following code:((Manco.Chart.Layouts.Layout)m_ChartControl.ComponentLayout.LayoutList[liLayoutIdx]). Parameters3D.Transformation.RotationXIndex of the Layout (liLayoutIdx in the previous code) is specified in the “Param2”. Increment specified in the “Param3”.

16. cmdChangeValueDown – Decrease specified property in the given layout element by the given value. Property is specified by its calling path given in the “Param1” attribute of the <Button>. The calling path is relative to the Layout. It could look like the following: “Parameters3D.Transformation.RotationX” – we’d like to change value of the RotationX property that could be accessed normally by the following code:((Manco.Chart.Layouts.Layout)m_ChartControl.ComponentLayout.LayoutList[liLayoutIdx]). Parameters3D.Transformation.RotationXIndex of the Layout (liLayoutIdx in the previous code) is specified in the “Param2”. Increment specified in the “Param3”.

Execute toolbar commands programmaticallyYou can execute Chart Toolbar commands programmatically. To do this you need create <Button> element that represents command you’d like to execute, and then call ExecuteCommand method of the toolbar.This ability makes possible Dynamic Data Load, which allows you to see your data in dynamic manner, when chart represents data that changes from time to time.

Using Context MenusEasy to use context menus allow quickly change chart appearance. Most of the chart parameters can be changed by this way. When a chart element is right-clicked with the mouse, the context menu will display a list of commands that can be used to customize the corresponding chart element.The context menus are different for different chart areas.Title’s context menu allows you change title align, view and edit title’s parameters and delete title. This menu appears when you right-click any title in the chart (in the titles or footers, categories, series or value title).


Frame’s context menu allows you change frame’s parameters, add new title or footer. This menu appears when you right-click any chart region that is free from the other chart elements.

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 ThemesThemes 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).


2. Override – all attributes and child nodes of the layout element will be removed. Theme's attributes and child nodes are copied into the layout element.

3. OverrideAttributes – all attributes of the layout element will be removed. Theme's attributes are copied into the layout element.

4. Delete - remove corresponding node from the layout element.To load theme you could use static method: Manco.Chart.Layouts.Layout.LoadTheme. Another way is to store theme somewhere in the other XML file. In this case you can use Manco.Chart.Layouts.Layout.CopyTheme to copy layout from theme to your chart.It’s possible to load number of themes sequentially. With this ability themes become real building blocks of the chart layout. You can provide your users with themes they will use to decorate charts. The following part of code demonstrates how you can load theme from file to your chart XML document:

if(ofdLoadTheme.ShowDialog() == DialogResult.OK){

Manco.Chart.Layouts.Layout.LoadTheme(ofdLoadTheme.FileName, m_xmlChart.DocumentElement);

chartControl.RegenerateLayout();chartControl.Draw();

}

Schema of the XML Chart DocumentThe Manco.Chart control uses single XML document to define chart layout and data. You can find XML Schema of the chart document in the Chart.xsd file, which located in the Manco.Chart installation directory. Chart document should have the following structure:<Charts>

<ComponentLayout … >…

</ComponentLayout>

<Chart … >…

</Chart>

…

<Chart … >…

</Chart>

</Charts>

Chart document should contain one <ComponentLayout> element and one or more <Chart> elements.

<ComponentLayout> elementThe <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.” >


<Frame … >…

</Frame>

<Titles … >…

</Titles>

<Footers … >…

</Footers>

</ComponentLayout>Any or all of the <Frame>, <Titles> and <Footers> elements can be omitted.

<Frame> elementFrame is a background of the chart control. It consists of 3 bands: Top, Middle and Bottom.

Top

Middle

BottomEvery 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>


<Bottom …>…

</Bottom></Frame>All 3, Top, Middle and Bottom elements are optional. Top and Bottom elements actually is used when we define “Image” frame or top and bottom parts of the “Programming” frame has filling different from the filling of the Middle band. All 3 (<Top>, <Middle> and <Bottom>) elements has similar structure that is so called “Band” type (see “<Band> element”).

<Band> elementAn 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 |InterpolationOptional. 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:


Clamp |Tile |TileFlipX |TileFlipXY |TileFlipY

Can be omitted. In this case watermark image will be sized to fill all area.”ShowShadow=”True|False – Indicates whether shadow will be shown for a filled area.

Optional. Default value – False.”IsHatch=”True|False – Indicates whether the area will be filled with a hatch style.

Optional. Default value – False.”HatchStyle=” Specifies the different patterns available for a hatch style filling. Can have

the following values:BackwardDiagonal |Cross |DarkDownwardDiagonal |DarkHorizontal |DarkUpwardDiagonal |DarkVertical |DashedDownwardDiagonal |DashedHorizontal |DashedUpwardDiagonal |DashedVertical |DiagonalBrick |DiagonalCross |Divot |DottedDiamond |DottedGrid |ForwardDiagonal |Horizontal |HorizontalBrick |LargeCheckerBoard |LargeConfetti |LargeGrid |LightDownwardDiagonal |LightHorizontal |LightUpwardDiagonal |LightVertical |Max |Min |NarrowHorizontal |NarrowVertical |OutlinedDiamond |Percent05 |Percent10 |Percent20 |Percent25 |Percent30 |Percent40 |Percent50 |Percent60 |Percent70 |Percent75 |


Percent80 |Percent90 |Plaid |Shingle |SmallCheckerBoard |SmallConfetti |SmallGrid |SolidDiamond |Sphere |Trellis |Vertical |Wave |Weave |WideDownwardDiagonal |WideUpwardDiagonal |ZigZagOptional. Default value – BackwardDiagonal.”>

<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 |RoundedRectangle3DRequired 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.”/>


<Titles> elementTitles are a group of the text lines located at the top of the chart. These lines could be docked to the Top band of the frame or located relative to the top of frame. When titles are docked, the Top band is sized to include all texts inside. In case of the relative location texts are shifted from the top of frame irrespective is Top band defined or not. Titles’ parameters are defined in the <Titles> element of the component layout. It has following structure:<Titles

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 …/>

</Titles><Title> elements are optional and could be omitted.

<Footers> elementFooters 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


Color=”Color of the styled text in form AARRGGBB or RRGGBB or as name of color (Blue, for example). Optional. Default value – transparent color.”>

<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> elementThe <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 |


FinancialBar | JapaneseCandlestick | Line | Pie | PieStacked | Pyramid | StepLine | Area3D | Area3D100 | Area3DStacked | Bar3D | Bar3D100 | Bar3DStacked | Column3D | Column3D100 | Column3DStacked | Doughnut3D |Line3D | Pie3D | Pie3DStacked | Pyramid3D | StepLine3DRequired 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.


<Legend> elementThe <Legend> element represents position of the legend and style of the legend’s texts. Like most of the chart regions legend could be filled and bordered. Legend is described in the <Legend> element of the chart document. It has following structure:<Legend

Placement=”None | LeftTop | LeftMiddle | LeftBottom | RightTop | RightMiddle | RightBottom | TopLeft | TopCenter | TopRight | BottomLeft | BottomCenter | BottomRightOptional. Default value – None.”>

<Style …>…

</Style></Legend><Style> element is optional and can be omitted.

<PlotArea> elementThe 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> elementThe <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> and <Grid> elements are optional and could be omitted.

<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>


Grid bands are colored bands that are shown between two grid lines. They are defined as child elements of the <Grid> element. There are 2 types of the bands:

1. Category Bands – are shown between category grid lines. They are listed in the <CategoryBands> element.

2. Value Bands – are shown between value grid lines. They are listed in the <ValueBands> element.

<CategoryBands> and <ValueBands> elements are optional and could be omitted.

<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> elementElement 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> elementCategories 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 …>


…</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> elementLabel 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).

<Tooltip> element for a Categories/Series ListTool tip is a small rectangular pop-up window that displays a brief description of a chart's Category or Series when the mouse hovers over the control. Parameters of this window are represented by <Tooltip> element. This element has following structure:<Tooltip Format=”Format of the tool tip text. Optional. Default value – empty string.” />In case of the Category or Series format string of the tool tip obtain 3 parameters:0 – Name of the Category/Series for which tool tip is shown.1 – Total value for this Category/Series.2 – Percentages for this Category/Series.

<Category> elementThe <Category> element represents description of one of the chart categories. It has the following structure:<Category Name=”Unique category ID. Required.”>

<Title …><Style … >

<Fill … />


</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> elementCategories 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> elementThe <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>


</Series>The “Name” attribute of the < Series> element will be used to select chart data elements belong to this series. The “Text” attribute of the <Title> element will be used as series 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.

<Values> elementThe <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.

<ElementLabel > elementElement label is a text inside chart’s data element that shows information about element’s data. Parameters of this text are represented by <ElementLabel> element. This element has following structure:<ElementLabel

Escapement=”Angle to rotate label text. Optional. Default value – 0.”ValueFormat=”Format string to show value only. Optional. Default value – {0}”PercentagesFormat=”Format string to show percentage only. Optional. Default value –

{0}”ValuePercentagesFormat=”Format string to show value & percentage. Optional. Default

value – {0}, {1}”>

<Style …>…

</Style></ElementLabel><Style> element is optional and can be omitted.

<Tooltip> element for a ValuesTool tip is a small rectangular pop-up window that displays a brief description of a chart's Value when the mouse hovers over the chart’s data elements. Parameters of this window are represented by <Tooltip> element. This element has following structure:<Tooltip Format=”Format of the tool tip text.” />In case of the Values format string of the tool tip obtain 4 parameters:0 – Name of the Category for which tool tip is shown.1 – Name of the Series for which tool tip is shown.


2 – Value corresponding to tha Category-Series pair.3 – Percentages for this value.

<ChartSpecific> elementChart 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> elementThe <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> elementThe <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> elementThe <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.”


ShowDataPoints=”True | False – indicate whether data points will be shown. Optional. Default value – False.” />

<FinancialBar> elementThe <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> elementThe <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.


<Pie3D> elementThe <Pie3D> element contains parameters that are specific for a Pie3D and Pie3DStacked charts. It has following structure:< Pie3D

MaxRadius =”Max radius of the3D pie. Optional. Default value – 1.5” />

<Pyramid3D> elementThe <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> elementThe <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> elementThe <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> elementThe <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> elementThe <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.”


IsPercentage=”True | False – indicates whether the reversal amount is given as percentage. Optional. Default value - True”

ThickColor =”Color of the ‘thick’ line in form AARRGGBB or RRGGBB or as name of color (Blue, for example). Optional. Default value – Red.”

ThinColor=” Color of the ‘thin’ line in form AARRGGBB or RRGGBB or as name of color (Blue, for example). Optional. Default value – Blue.”

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.”/>

<Renko> elementThe <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> elementThe <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> elementManco.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


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>


<Lighting> elementLighting parameters allow you control lighting sources for 3D chart. They control type of the light, its direction, position, cutoff and exponent. Up to 8 lightings could be defined. Lighting parameters are defined in the <Lighting> child element of the <Parameters3D>. It represents a single source of light for a 3D scene. This element has following structure:<Lighting

Type=”Directional | Positional | Spotlight. Required.”DirectionX=”Light direction along the x-axis. It works for directional and spotlight

lighting. Optional. Default value – 0.”DirectionY=”Light direction along the y-axis. It works for directional and spotlight

lighting. Optional. Default value – 0.”DirectionZ=”Light direction along the z-axis. It works for directional and spotlight

lighting. Optional. Default value – 0.”PositionX=”Position of the light on x-axis. It works for positional and spotlight.

Optional. Default value – 0.”PositionY=”Position of the light on y-axis. It works for positional and spotlight.

Optional. Default value – 0.”PositionZ=”Position of the light on z-axis. It works for positional and spotlight. Optional.

Default value – 0.”Cutoff=”Angle between the axis of the cone and a ray along the edge of the cone. This

value is restricted to being within the range [0.0, 90.0]. It works for spotlight. Optional. Default value – 45.”

Exponent=”Intensity distribution of the light within the cone. Optional. Default value – 75.”

Color=”Lighting color in form AARRGGBB or RRGGBB or as name of color (Blue, for example). The alpha channel doesn’t count in lighting calculation. Optional. Default value – White.” />

<Transformation> elementTransformation 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> elementCoordinate 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.”


Height=”Height of the 3D scene. Optional. Default value – 3.0.”BoxHeight=”Height of the axis box. Optional. Default value – 0.1.” />

<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> elementThe <Data> elements contains list of the chart values. This element has following structure:<Data>

<Value …/>…<Value …/>


</Data>Every value describes a single chart element.

<Value> elementThe <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.” />

Sample of the chart document<?xml version="1.0" encoding="utf-8" ?><Charts>

<ComponentLayout BorderSize="0"><Frame>

<Top></Top><Middle>

<Fill Color="FF7688DD" IsHatch="False" GradientType="Vertical" ShowShadow="True" GradientColor="FFCBD1F5">

<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>


</Legend><PlotArea>

<Fill Color="007688DD" /></PlotArea><ScaleAndGrid AxisColor="FF0061C1"

AxisWidth="2" TickLength="5"><Scale MinorUnit="1" /><Grid CategoryMajor="True"

CategoryMajorColor="FF00FFFF" CategoryMinor="False" CategoryMinorColor="FF00FFFF"ValueMajor="True" ValueMajorColor="FF00FF00" ValueMinor="False" ValueMinorColor="FF00FF00"ZeroLineColor="FFFF0000"><ValueBands>

<Band><Fill Color="7FFFFFFF"/>

</Band><Band>

<Fill Color="7F00FF00"/></Band>

</ValueBands></Grid>

</ScaleAndGrid><Element BorderWidth="0"

BorderColor="White" ShowValues="True" RoundPercentTo="0.01" />

<Categories><Title Text="Category Title" Align="Center">

<Style Color="FF0061C1"><Font Name="Arial"


</Style></Title><Label Escapement="0">



</Style></Label><Tooltip Format="Tooltip for a {0}: {1}, {2}%" /><Category Name="Cat1">

<Title Text="Category 1"><Style>

<Fill Color="#7FA00000" /></Style>

</Title></Category><Category Name="Cat2">


<Fill Color="#7F00A000" />


</Style></Title>

</Category><Category Name="Cat3">


<Fill Color="#7F0000A0" /></Style>

</Title></Category><Category Name="Cat4">


<Fill Color="#7FA00060" /></Style>

</Title></Category>

</Categories><SeriesList>

<Title Text="Series Title" Align="Center"><Style Color="FF0061C1">

<Font Name="Arial" Size="12" Bold="True" Italic="False" Strikeout="False" Underline="False" />


<Style Color="#FF0061C1"><Font Name="Arial"


</Style></Label><Tooltip Format="Tooltip for a {0}: {1}, {2}%" /><Series Name="Ser1">

<Title Text="Series 1"><Style>

<Fill Color="#7FA00000"ShowShadow="True"><Border Color="FFA00000" Width="1" Type="RoundedRectangle3D" CornerRadius="6" />

</Fill></Style>

</Title></Series><Series Name="Ser2">


<Fill Color="#7F00A000"ShowShadow="True"><Border Color="FF00A000" Width="1" Type="RoundedRectangle3D" CornerRadius="6" />

</Fill></Style>




<Fill Color="#7F0000A0"ShowShadow="True"><Border Color="FF0000A0" Width="1" Type="RoundedRectangle3D" CornerRadius="6" />

</Fill></Style>



<Fill Color="#7FA00060"ShowShadow="True"><Border Color="FFA00060" Width="1" Type="RoundedRectangle3D" CornerRadius="6" />

</Fill></Style>

</Title></Series>

</SeriesList><Values>

<Title Text="Values Title" Align="Center"><Style Color="FF0061C1">

<Font Name="Arial" Size="12" Bold="True" Italic="False" Strikeout="False" Underline="False" />




</Style></Label><ElementLabel Escapement="0">

<Style Color="#FFFFFFFF"><Font Name="Arial"


</Style></ElementLabel><Tooltip Format="Tooltip for a {0}, {1}: {2}, {3}%" />

</Values><ChartSpecific>


<Area LineWidth="2" SplineTension="0.5" ShowDataPoints="True" />

<Line LineWidth="4" SplineTension="0.5" ShowDataPoints="True" />

<StepLine LineWidth="4" ShowDataPoints="True" /><Pie3D MaxRadius="1.5" /><Pyramid3D MaxRadius="1.5" /><FinancialBar Color="FF00A000"

Width="2" CategoryLow="Low" CategoryHigh="High" CategoryOpen="Open" CategoryClose="Close"/>

<JapaneseCandlestick ShadowColor="FF00A000" ShadowWidth="2" CategoryLow="Low" CategoryHigh="High" CategoryOpen="Open" CategoryClose="Close"><WhiteFill Color="#FFFF0000" /><BlackFill Color="#FF00FFFF" />

</JapaneseCandlestick></ChartSpecific><Parameters3D Multisampling="True"

JitterEnabled="False" JitterLevel="15" UseBoxShape="False"Clustered="False" Depth="0.3" OffscreenRendering="True"><Lightings>

<Lighting Type="Directional" DirectionX="-0.5" DirectionY="0" DirectionZ="1" Color="FFFFFFFF" />

<Lighting Type="Directional" DirectionX="1" DirectionY="1" DirectionZ="0" Color="FFFFFFFF" />

</Lightings><Transformation RotationX="0"

RotationY="0" RotationZ="0" TranslateX="0" TranslateY="0" TranslateZ="0" />

<CoordinatePlane BoxHeight="0.01" Width="3.5" Color="8000FF00" />

</Parameters3D></Layout><Data>

<Value Series="Ser1" Category="Cat1" Value="15" /><Value Series="Ser1" Category="Cat2" Value="5" /><Value Series="Ser1" Category="Cat3" Value="25"/><Value Series="Ser1" Category="Cat4" Value="11"/><Value Series="Ser2" Category="Cat1" Value="17" /><Value Series="Ser2" Category="Cat2" Value="22" /><Value Series="Ser2" Category="Cat3" Value="9" /><Value Series="Ser2" Category="Cat4" Value="8"/>


<Value Series="Ser3" Category="Cat1" Value="19" /><Value Series="Ser3" Category="Cat2" Value="29" /><Value Series="Ser3" Category="Cat3" Value="22" /><Value Series="Ser3" Category="Cat4" Value="5"/><Value Series="Ser4" Category="Cat1" Value="16" /><Value Series="Ser4" Category="Cat2" Value="22" /><Value Series="Ser4" Category="Cat3" Value="9" /><Value Series="Ser4" Category="Cat4" Value="9"/>

</Data></Chart>

</Charts>


Documents

Manco.chart Control User Guide