Charts (Under Construction)

Anatomy of a Chart
Chart Editor
Graph Types

Anatomy of a Chart

ChartMechanic lets you customize most every aspect of the charts it generates. Charts are organized into various pieces, identified in the diagram below:

Chart Anatomy 101

Title - a single line of text at the top of the chart
Description - a multi line block of text describing a chart
X Axis - also called the domain axis. The line along the plot expressing the first column of a series.
Y Axis (1 - 4) - also called a range axis, which expresses the second column of one or more series. A chart may have between 1 and 4 Y axes.
Plot - the rendering area for data values, where series are drawn. The plot area is contained by the axes.
Series - the graphical representation of a data set having both X, Y, (and optionally Z) values. You can represent a series using various lines, shapes and bars as determined by the graph type for the series. In the anatomy diagram above, the green bars, and the red and blue lines, represent series with different graph types.
Markers - a horizontal or vertical line across the plot area, tied to a point on an X or Y axis, with an optional descriptive label. You can specify a marker's value as a specific NUMBER or DATE value, or its value can be derived from a FUNCTION of a series.
Legend - a block showing a color and shape coded key for each series in the chart.
Chart - the background, or bottom layer of a chart. Basically, everything that is behind the other chart components.

Chart Editor

The Chart Editor is the main view for chart creation and editing. The UI controls around the chart you are editing let you change the properties for each part of the chart's anatomy. As you change properties for a chart, the chart is re-rendered, to provide immediate feedback for your edits.

We encourage you to experiment freely with all of the chart properties to explore what they do and to get comfortable with the editor's capabilities.

Chart Editor Control

On the right side of your screen is the main editor control. It is organized into smaller editors for different parts of the chart (excluding the Series and Markers, which are below). You can activate the sub-editor popup for each area by clicking on the edit icon for that part of the chart.

Time Period (Time Series charts only) - specifies the time frequency of data points for this series, which in turn controls the "width" of each point for the series. Most relevant when using certain Graph Type renderings (usually Bar Graph types).

Graph Type sets the default style (lines, bars, shapes, etc.) for drawing series on this chart. The default graph type may be overridden on a per-series basis.

Chart Size sets the width and height of the chart, in pixels. Note that the size of the chart in the editor is limited to 600x400 by default. To view the chart full size as you're editing it, you can change the viewing size in your user preferences:
File Menu -> Edit User Preferences -> Unselect "Limit Chart Size" -> OK

Access sets the visibility of the chart on the site. public means anyone can view the chart, but only you can see a private chart.

X Axis / Y Axis controls colors, labels, visibility, and tick spacing for each axis.

Editor Popups

For example, editing the Legend activates a sub-editor popup for the legend's properties. This editor (shown right) lets you change properties like:

visibility

background & foreground color

position & alignment

font family & size

You can dismiss a popup editor like this by clicking the Close button, or simply by clicking away from it.

Series Control

There is a tab below the chart containing controls for each series and marker. The left side of the control is a list of the chart's series. The right side of the control contains editors for the properties of a series:

Name - the text used to label this series on the chart

Columns - Sets which X and Y columns from the associated data source that set the horizontal and vertical values for the data points of this series on the chart. Change the columns by clicking on the edit icon next to the column names.
The X/Y column types must be compatible with the chart. For example, on a Time Series chart, the X column must be type DATE, and the Y column must be type NUMBER.

Graph Type - whether the series appears as lines, bars, shapes, etc.

Y Axis - Puts this series on one of 4 available Y axes. If different series have very different ranges of numbers for their Y values, you will generally want to put the series onto different Y axes, so that they can all be displayed reasonably.

Time Period (applicable timeseries charts only) - specifies the time frequency of data points for this series, which in turn controls the "width" of each point for the series. Most relevant when using certain Graph Type renderings (usually Bar Graph types).

Color Sets a specific color for the series. By default, series colors are chosen automatically.

Data Source (read-only)

The buttons above the list allow you to add,delete and change the order in which series appear on the chart. The "View Series Data" button shows you a sample of the data for the series (up to the first 1,000 rows).

Marker Control
The Name editor popup contains properties for the text associated with a marker:

Label, Font, Paint - the text, font style & size, and color of the marker's name

Anchor, Text Anchor - these two set the alignment of the marker text relative to the marker line itself.

Other marker properties:

Paint Editor sets the color and stroke width of the marker line

Visibility optionally shows or hides the marker

Layer puts the marker in the FOREGROUND or BACKGROUND relative to the rest of the chart

Axis sets the Y-axis that the marker's value is drawn to

Opacity slider bar to make the marker more or less transparent

Formula editor popup to change the formula that derives the marker's value

Graph Types

Graph types for Time Series, XY, and Histogram Charts

Graph Type Description

Area render a series as filled Area

Bar horizontal/vertical rectagular Bars

Bubble circular, filled "bubble", with the diameter determined by a Z column

Candlestick Candlestick (Box and Whisker) shows Open/High/Low/Close values, usually for a tradeable financial product. An optional fifth column renders trading volume.

Clustered Bar Bar rendering, where multiple series are clustered next to each other along the X axis.

Difference renders a difference between two series, with different colors for positive and negative differences

Dot draws values as Dots, a.k.a. a scatter plot

Line render a series as simple line

Line 3D draws a Line, with an optional shadow behind it

Line And Shape render a series as line with a shape at value points. Shape can be filled/outlined.

Spline render a series as a line, with spline iterpolation between points.

Stacked Area Area rendering, with multiple series stacked on top of each other

Stacked Bar renders values as rectangular bars, with multiple series stacked on top of each other

Step line rendering, with discrete vertical steps between values

Step Area Step rendering, with the area below the line filled

Graph Type	Description
Area	render a series as filled Area
Bar	horizontal/vertical rectagular Bars
Bubble	circular, filled "bubble", with the diameter determined by a Z column
Candlestick	Candlestick (Box and Whisker) shows Open/High/Low/Close values, usually for a tradeable financial product. An optional fifth column renders trading volume.
Clustered Bar	Bar rendering, where multiple series are clustered next to each other along the X axis.
Difference	renders a difference between two series, with different colors for positive and negative differences
Dot	draws values as Dots, a.k.a. a scatter plot
Line	render a series as simple line
Line 3D	draws a Line, with an optional shadow behind it
Line And Shape	render a series as line with a shape at value points. Shape can be filled/outlined.
Spline	render a series as a line, with spline iterpolation between points.
Stacked Area	Area rendering, with multiple series stacked on top of each other
Stacked Bar	renders values as rectangular bars, with multiple series stacked on top of each other
Step	line rendering, with discrete vertical steps between values
Step Area	Step rendering, with the area below the line filled

Graph types for Category Charts

Graph Type Description

Area render a series as a filled Area

Bar horizontal/vertical rectagular Bars

Bar 3D Bar rendering, with 3D depth effect

Gantt Applicable only for Gantt chart type

Grouped Stacked Bar stacked bar rendering, with clustering by group

Layered Bar render a series as LayeredBar

Level draws a single line at the Y value

Line 3D draws a Line, with an optional shadow behind it

Line And Shape render a series as line with a shape at value points. Shape can be filled/outlined.

Min Max similar to Level rendering, with values at the minimum and maximum

Stacked Area Area rendering, with multiple series stacked on top of each other

Stacked Bar renders values as rectangular bars, with multiple series stacked on top of each other

Stacked Bar 3D stacked Bar rendering, with 3D depth effect

Step line rendering, with discrete vertical steps between values

Waterfall renders as Waterfall effect, with sorted series values flowing into the next value

Chart Editor Control On the right side of your screen is the main editor control. It is organized into smaller editors for different parts of the chart (excluding the Series and Markers, which are below). You can activate the sub-editor popup for each area by clicking on the edit icon for that part of the chart. Time Period (Time Series charts only) - specifies the time frequency of data points for this series, which in turn controls the "width" of each point for the series. Most relevant when using certain Graph Type renderings (usually Bar Graph types). Graph Type sets the default style (lines, bars, shapes, etc.) for drawing series on this chart. The default graph type may be overridden on a per-series basis. Chart Size sets the width and height of the chart, in pixels. Note that the size of the chart in the editor is limited to 600x400 by default. To view the chart full size as you're editing it, you can change the viewing size in your user preferences: File Menu -> Edit User Preferences -> Unselect "Limit Chart Size" -> OK Access sets the visibility of the chart on the site. public means anyone can view the chart, but only you can see a private chart. X Axis / Y Axis controls colors, labels, visibility, and tick spacing for each axis.
Editor Popups For example, editing the Legend activates a sub-editor popup for the legend's properties. This editor (shown right) lets you change properties like: visibility background & foreground color position & alignment font family & size You can dismiss a popup editor like this by clicking the Close button, or simply by clicking away from it.
Series Control There is a tab below the chart containing controls for each series and marker. The left side of the control is a list of the chart's series. The right side of the control contains editors for the properties of a series: Name - the text used to label this series on the chart Columns - Sets which X and Y columns from the associated data source that set the horizontal and vertical values for the data points of this series on the chart. Change the columns by clicking on the edit icon next to the column names. The X/Y column types must be compatible with the chart. For example, on a Time Series chart, the X column must be type DATE, and the Y column must be type NUMBER. Graph Type - whether the series appears as lines, bars, shapes, etc. Y Axis - Puts this series on one of 4 available Y axes. If different series have very different ranges of numbers for their Y values, you will generally want to put the series onto different Y axes, so that they can all be displayed reasonably. Time Period (applicable timeseries charts only) - specifies the time frequency of data points for this series, which in turn controls the "width" of each point for the series. Most relevant when using certain Graph Type renderings (usually Bar Graph types). Color Sets a specific color for the series. By default, series colors are chosen automatically. Data Source (read-only) The buttons above the list allow you to add,delete and change the order in which series appear on the chart. The "View Series Data" button shows you a sample of the data for the series (up to the first 1,000 rows).
Marker Control The Name editor popup contains properties for the text associated with a marker: Label, Font, Paint - the text, font style & size, and color of the marker's name Anchor, Text Anchor - these two set the alignment of the marker text relative to the marker line itself. Other marker properties: Paint Editor sets the color and stroke width of the marker line Visibility optionally shows or hides the marker Layer puts the marker in the FOREGROUND or BACKGROUND relative to the rest of the chart Axis sets the Y-axis that the marker's value is drawn to Opacity slider bar to make the marker more or less transparent Formula editor popup to change the formula that derives the marker's value

Graph Type	Description
Area	render a series as a filled Area
Bar	horizontal/vertical rectagular Bars
Bar 3D	Bar rendering, with 3D depth effect
Gantt	Applicable only for Gantt chart type
Grouped Stacked Bar	stacked bar rendering, with clustering by group
Layered Bar	render a series as LayeredBar
Level	draws a single line at the Y value
Line 3D	draws a Line, with an optional shadow behind it
Line And Shape	render a series as line with a shape at value points. Shape can be filled/outlined.
Min Max	similar to Level rendering, with values at the minimum and maximum
Stacked Area	Area rendering, with multiple series stacked on top of each other
Stacked Bar	renders values as rectangular bars, with multiple series stacked on top of each other
Stacked Bar 3D	stacked Bar rendering, with 3D depth effect
Step	line rendering, with discrete vertical steps between values
Waterfall	renders as Waterfall effect, with sorted series values flowing into the next value