Skip to content
MikhailTymchukDX edited this page Aug 24, 2016 · 3 revisions

Demo Page

The LineChart control enables you to render a line chart from one or more series of values. This control is compatible with any browser that supports SVG including Internet Explorer 9 and above. This control can display two types of LineCharts: Basic and Stacked.

Properties

Name Description
AreaDataLabel Enables you to set text/label that will be shown in the tooltip and describe an area data value
BaseLineColor Enables you to set the color of the chart's base lines
CategoriesAxis Provides a set of values for the category axis to create a line chart
CategoryAxisLineColor Enables you to set the color of the category axis lines
ChartType Enables you to render two types of line charts: Basic or Stacked
ClientSeries Provides a list of series to the client side
Remarks: The Series property is required for designer experience support because the editor always prevents the property's capability to provide values to the client side as ExtenderControlProperty at runtime
DisplayValues Whether or not show series values.
Series Provides a list of series
TooltipBackgroundColor Enables you to set a background color of the tooltip box
TooltipBorderColor Enables you to set a border color of the tooltip box
TooltipFontColor Enables you to set a font color of the tooltip box
ValueAxisLineColor Enables you to set a color of a value axis line
ValueAxisLines Enables you to set interval size for a value axis line

Client properties

Name Description
areaDataLabel Enables you to set text/label that will be shown in the tooltip and describe a area data value
baseLineColor Enables you to set a color of the chart's base lines
categoriesAxis Provides a set of values for the category axis to create a line chart
categoryAxisLineColor Enables you to set a color of category axis lines
chartHeight Enables you to customize chart height
chartTitle Enables you to set the chart's title
chartTitleColor Enables you to set a font color of the chart's title
chartType Enables you to render two types of line charts: Basic or Stacked
chartWidth Enables you to customize chart width
clientSeries Provides a list of series
displayValues Whether or not show series values.
theme Enables you to control the appearance of a line chart with a CSS file
tooltipBackgroundColor Enables you to set a background color of the tooltip box
tooltipBorderColor Enables you to set a border color of the tooltip box
tooltipFontColor Enables you to set a font color of the tooltip box
valueAxisLineColor Enables you to set a color of a value axis line
valueAxisLines Enables you to set interval size for a value axis line

Client methods

Name Description
calculateInterval() Calculates a distance interval for the value axis
calculateMinMaxValues(chartType) Calculates minimum and maximum values of specified data
calculateValueAxis() Calculates label values for the value axis to display on the chart
drawAxisValues() Writes horizontal and vertical axis values of the chart
drawBackgroundHorizontalLines() Draws background horizontal lines of the chart
drawBackgroundVerticalLines() Draws background vertical lines of the chart
drawBaseLines() Draws base lines of the chart
drawLegendArea() Draws legends of the chart
drawLines() Draws lines on the chart
initializeSVG() Creates SVG and its initial content

Client properties

displayValues

Whether or not show series values.

Getter name: get_displayValues()
Setter name: set_displayValues(value)

chartWidth

Enables you to customize chart width

Getter name: get_chartWidth()
Setter name: set_chartWidth(value)

chartHeight

Enables you to customize chart height

Getter name: get_chartHeight()
Setter name: set_chartHeight(value)

chartTitle

Enables you to set the chart's title

Getter name: get_chartTitle()
Setter name: set_chartTitle(value)

categoriesAxis

Provides a set of values for the category axis to create a line chart

Getter name: get_categoriesAxis()
Setter name: set_categoriesAxis(value)

clientSeries

Provides a list of series

Getter name: get_clientSeries()
Setter name: set_clientSeries(value)

chartType

Enables you to render two types of line charts: Basic or Stacked

Getter name: get_chartType()
Setter name: set_chartType(value)

theme

Enables you to control the appearance of a line chart with a CSS file

Getter name: get_theme()
Setter name: set_theme(value)

valueAxisLines

Enables you to set interval size for a value axis line

Getter name: get_valueAxisLines()
Setter name: set_valueAxisLines(value)

chartTitleColor

Enables you to set a font color of the chart's title

Getter name: get_chartTitleColor()
Setter name: set_chartTitleColor(value)

valueAxisLineColor

Enables you to set a color of a value axis line

Getter name: get_valueAxisLineColor()
Setter name: set_valueAxisLineColor(value)

categoryAxisLineColor

Enables you to set a color of category axis lines

Getter name: get_categoryAxisLineColor()
Setter name: set_categoryAxisLineColor(value)

baseLineColor

Enables you to set a color of the chart's base lines

Getter name: get_baseLineColor()
Setter name: set_baseLineColor(value)

tooltipBackgroundColor

Enables you to set a background color of the tooltip box

Getter name: get_tooltipBackgroundColor()
Setter name: set_tooltipBackgroundColor(value)

tooltipFontColor

Enables you to set a font color of the tooltip box

Getter name: get_tooltipFontColor()
Setter name: set_tooltipFontColor(value)

tooltipBorderColor

Enables you to set a border color of the tooltip box

Getter name: get_tooltipBorderColor()
Setter name: set_tooltipBorderColor(value)

areaDataLabel

Enables you to set text/label that will be shown in the tooltip and describe a area data value

Getter name: get_areaDataLabel()
Setter name: set_areaDataLabel(value)

Client methods

calculateInterval()

Calculates a distance interval for the value axis

calculateMinMaxValues(chartType)

Calculates minimum and maximum values of specified data

Params:

  • chartType
    • Type: Sys.Extended.UI.LineChartType
    • Description: Chart type

calculateValueAxis()

Calculates label values for the value axis to display on the chart

drawBackgroundHorizontalLines()

Draws background horizontal lines of the chart

drawBackgroundVerticalLines()

Draws background vertical lines of the chart

drawBaseLines()

Draws base lines of the chart

drawLegendArea()

Draws legends of the chart

drawAxisValues()

Writes horizontal and vertical axis values of the chart

initializeSVG()

Creates SVG and its initial content

drawLines()

Draws lines on the chart

Clone this wiki locally