El User Control Echart es un conjunto de gráficas interactivas para representar y visualizar datos.
Así se comporta en ejecución:
Usando el control
Abrir Extensibility Catalog y dirigirse a la sección Web a través del menú lateral izquierdo.
Seleccionar el control ECharts y luego instalar. (Ver documentación del Extensibility Catalog si tiene dudas en el proceso de instalación de controles).
Durante el proceso de instalación se recomienda importar el XPZ de ejemplo que viene con el control.
Al importar el XPZ de ejemplo del User Control en la ruta Ignia/Controls/ECharts se crean varios Web Panel de ejemplo, con los distitntos tipos de gráficos y los SDT con la estructura de datos para cada tipo de gráfico.
Propiedad Chart Type, permite seleccionar entre los distintos tipos de gráfico disponibles, las opciones son: BarGradient, LineStack, AreaSimple, Donut, ScatterSingleAxis, BarPolarStack, BarStack, LineCategory, PieSimple, Funnel, BarCategoryStack, Mix-line-bar, Gauge-Styling
Area Simple
Procedimiento de carga de datos de esta gráfica:
Elegimos el tipo de serie "line"
Para cada dato de la serie, que agregamos en Serie.Value, se agrega el valor del eje x, en xAxis
Sub 'Load Data'
&Serie = new()
&Serie.SerieName = "Direct interview"
&Serie.SerieColor = "#459145"
&Serie.SerieStack = ""
&Serie.SerieType = SerieType.line
&count = 1
&Total = 5000
&previus = 200
&date = today()
for &count = 3 to &Total
&dato = (random()-0.49) * 20 + &previus
&Serie.Values.Add(&dato)
&previus = &dato
&date = &date + 1
&datestring = &date.Year().ToString().Trim() + "/" + &date.Month().ToString().Trim() + "/" + &date.Day().ToString().Trim()
&EChartData.xAxis.Add(&datestring)
endfor
&EChartData.Series.Add(&Serie)
EndSub
Bar Category Stack
Procedimiento de carga de datos de esta gráfica:
Agregamos los valores del eje y en &EchartDtat.yAxis
y dos series de datos de tipo bar, en &EchartDtat.Series
Sub 'Load Data'
&EChartData.yAxis.Add("Germany")
&EChartData.yAxis.Add("France")
&EChartData.yAxis.Add("Spain")
&EChartData.yAxis.Add("Netherlands")
&EChartData.yAxis.Add("Belgium")
&Serie = new()
&Serie.SerieName = "Year 2013"
&Serie.SerieColor = "#EF5350"
&Serie.SerieStack = "Year 2013"
&Serie.SerieType = SerieType.bar
&Serie.Values.Add(38203)
&Serie.Values.Add(73489)
&Serie.Values.Add(129034)
&Serie.Values.Add(204970)
&Serie.Values.Add(331744)
&EChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Year 2014"
&Serie.SerieColor = "#66BB6A"
&Serie.SerieStack = "Year 2014"
&Serie.SerieType = SerieType.bar
&Serie.Values.Add(39325)
&Serie.Values.Add(83438)
&Serie.Values.Add(131000)
&Serie.Values.Add(221594)
&Serie.Values.Add(334141)
&EChartData.Series.Add(&Serie)
EndSub
Bar Polar Stack
Procedimiento de carga de datos de esta gráfica:
Agregamos cuatro radios en &ECHartData.RadiusAxis, y tres series A,B,C con un valor por radio
Sub 'Load Data'
&EChartData.RadiusAxis.Add("Monday")
&EChartData.RadiusAxis.Add("Tuesday")
&EChartData.RadiusAxis.Add("Wednesday")
&EChartData.RadiusAxis.Add("Thursday")
&Serie = new()
&Serie.SerieName = "A"
&Serie.SerieColor = "#459145"
&Serie.SerieStack = "a"
&Serie.SerieType = SerieType.bar
&Serie.Values.Add(1)
&Serie.Values.Add(2)
&Serie.Values.Add(3)
&Serie.Values.Add(4)
&EChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "B"
&Serie.SerieColor = "#B5A395"
&Serie.SerieStack = "a"
&Serie.SerieType = SerieType.bar
&Serie.Values.Add(2)
&Serie.Values.Add(4)
&Serie.Values.Add(6)
&Serie.Values.Add(8)
&EChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "C"
&Serie.SerieColor = "#A59A10"
&Serie.SerieStack = "a"
&Serie.SerieType = SerieType.bar
&Serie.Values.Add(1)
&Serie.Values.Add(2)
&Serie.Values.Add(3)
&Serie.Values.Add(4)
&EChartData.Series.Add(&Serie)
Endsub
Bar Stack
Procedimiento de carga de datos de esta gráfica:
Agregamos los valores del eje x en &EchartDtat.xAxis
y sies series de datos de tipo bar, en &EchartDtat.Series
Sub 'Load Data'
&ChartData.xAxis.Add("Line")
&ChartData.xAxis.Add("Bar")
&ChartData.xAxis.Add("Scatter")
&ChartData.xAxis.Add("Pies")
&ChartData.xAxis.Add("Map")
&Serie = new()
&Serie.SerieName = "Version 1.7 - 2k data"
&Serie.SerieColor = "#E57373"
&Serie.SerieXAxisIndex = 1
&Serie.SerieType = SerieType.bar
&Serie.SerieLevelShow = true
&Serie.Values.Add(680)
&Serie.Values.Add(819)
&Serie.Values.Add(564)
&Serie.Values.Add(724)
&Serie.Values.Add(890)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Version 1.7 - 2w data"
&Serie.SerieColor = "#81C784"
&Serie.SerieXAxisIndex = 1
&Serie.SerieType = SerieType.bar
&Serie.SerieLevelShow = true
&Serie.Values.Add(1212)
&Serie.Values.Add(2035)
&Serie.Values.Add(1620)
&Serie.Values.Add(955)
&Serie.Values.Add(1300)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Version 1.7 - 20w data"
&Serie.SerieColor = "#64B5F6"
&Serie.SerieXAxisIndex = 1
&Serie.SerieType = SerieType.bar
&Serie.SerieLevelShow = true
&Serie.Values.Add(2200)
&Serie.Values.Add(3000)
&Serie.Values.Add(2500)
&Serie.Values.Add(3000)
&Serie.Values.Add(2000)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Version 2.0 - 2k data"
&Serie.SerieColor = "#F44336"
&Serie.SerieType = SerieType.bar
&Serie.SerieLevelShow = true
&Serie.Values.Add(247)
&Serie.Values.Add(187)
&Serie.Values.Add(95)
&Serie.Values.Add(175)
&Serie.Values.Add(270)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Version 2.0 - 2w data"
&Serie.SerieColor = "#4CAF50"
&Serie.SerieType = SerieType.bar
&Serie.SerieLevelShow = true
&Serie.Values.Add(488)
&Serie.Values.Add(415)
&Serie.Values.Add(405)
&Serie.Values.Add(340)
&Serie.Values.Add(328)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Version 2.0 - 20w data"
&Serie.SerieColor = "#2196F3"
&Serie.SerieType = SerieType.bar
&Serie.SerieLevelShow = true
&Serie.Values.Add(906)
&Serie.Values.Add(911)
&Serie.Values.Add(908)
&Serie.Values.Add(778)
&Serie.Values.Add(550)
&ChartData.Series.Add(&Serie)
EndSub
Funnel
Procedimiento de carga de datos de esta gráfica:
Se crea una única serie de tipo "funnel" y se agrega cada dato en la colección Data
Sub 'Load Data'
&Serie = new()
&Serie.SerieName = "Statistics"
&Serie.SerieStack = "Serie"
&Serie.SerieType = SerieType.funnel
&Data = new()
&Data.DataName = "Safari"
&Data.DataColor = "#2EC7C9"
&Data.DataValue = 60
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataName = "Firefox"
&Data.DataColor = "#C8B2F4"
&Data.DataValue = 40
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataName = "Chrome"
&Data.DataColor = "#5AB1EF"
&Data.DataValue = 20
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataName = "Opera"
&Data.DataColor = "#FFCB8C"
&Data.DataValue = 80
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataName = "Internet Explorer"
&Data.DataColor = "#D87A80"
&Data.DataValue = 100
&Serie.Data.Add(&Data)
&EChartData.Series.Add(&Serie)
EndSub
Gauge-Styling
Procedimiento de carga de datos de esta gráfica:
Se crea una serie de tipo "gauge", en la colección &EChartData.MultipleYAxis se especifican los límites de las secciones y el nombre
Los sucesivos valores del pivote, se obtienen llamando al procedimiento GaugeStyleNexValue,
Sub 'Load Data'
&Serie = new()
&Serie.SerieName = "Memory usage"
&Serie.SerieType = SerieType.gauge
&Data = new()
&Data.DataColor = "#90EE90"
&Data.DataValue = 0.2
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataColor = "#FFA500"
&Data.DataValue = 0.4
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataColor = "#B9E3F3"
&Data.DataValue = 0.8
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataColor = "#FF4500"
&Data.DataValue = 1
&Serie.Data.Add(&Data)
&EChartData.Series.Add(&Serie)
&MultipleYAxixItem = new()
&MultipleYAxixItem.max = 10
&MultipleYAxixItem.name = "Idle"
&EChartData.MultipleYAxis.Add(&MultipleYAxixItem)
&MultipleYAxixItem = new()
&MultipleYAxixItem.max = 30
&MultipleYAxixItem.name = "Low"
&EChartData.MultipleYAxis.Add(&MultipleYAxixItem)
&MultipleYAxixItem = new()
&MultipleYAxixItem.max = 60
&MultipleYAxixItem.name = "Normal"
&EChartData.MultipleYAxis.Add(&MultipleYAxixItem)
&MultipleYAxixItem = new()
&MultipleYAxixItem.max = 90
&MultipleYAxixItem.name = "High"
&EChartData.MultipleYAxis.Add(&MultipleYAxixItem)
&EChartData.LoadServiceUrl = GaugeStyleNextValue.Link()
EndSub
LineCategory
Procedimiento de carga de datos de esta gráfica:
Se cargan los valores del eje y en la colección &EChartData.yAxis,
y una serie de tipo "line"
Sub 'Load Data'
&EChartData.yAxis.Add("0")
&EChartData.yAxis.Add("10")
&EChartData.yAxis.Add("20")
&EChartData.yAxis.Add("30")
&EChartData.yAxis.Add("40")
&EChartData.yAxis.Add("50")
&EChartData.yAxis.Add("60")
&EChartData.yAxis.Add("70")
&EChartData.yAxis.Add("80")
&Serie = new()
&Serie.SerieName ='Height(km)With temperature(°C)'
&Serie.SerieColor = "#459145"
&Serie.SerieStack = "Main"
&Serie.SerieType = SerieType.line
&Serie.Values.Add(15)
&Serie.Values.Add(-50)
&Serie.Values.Add(-55.6)
&Serie.Values.Add(-46.5)
&Serie.Values.Add(-22.1)
&Serie.Values.Add(-2.5)
&Serie.Values.Add(-27.7)
&Serie.Values.Add(-55.7)
&Serie.Values.Add(-76.5)
&EChartData.Series.Add(&Serie)
EndSub
LineStack
Procedimiento de carga de datos de esta gráfica:
Se cargan los valores del eje x en la colección &EChartData.xAxis,
y una serie por stack en la colección &ChartData.Series
Sub 'Load Data'
&ChartData.xAxis.Add("Monday")
&ChartData.xAxis.Add("Tuesday")
&ChartData.xAxis.Add("Wednesday")
&ChartData.xAxis.Add("Thursday")
&ChartData.xAxis.Add("Friday")
&ChartData.xAxis.Add("Saturday")
&ChartData.xAxis.Add("Sunday")
&Serie = new()
&Serie.SerieName = "Ford"
&Serie.SerieColor = "#459145"
&Serie.SerieStack = "Main"
&Serie.SerieType = SerieType.line
&Serie.Values.Add(120)
&Serie.Values.Add(132)
&Serie.Values.Add(101)
&Serie.Values.Add(134)
&Serie.Values.Add(90)
&Serie.Values.Add(230)
&Serie.Values.Add(210)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Fiat"
&Serie.SerieColor = "#425873"
&Serie.SerieStack = "Main"
&Serie.SerieType = SerieType.line
&Serie.Values.Add(220)
&Serie.Values.Add(182)
&Serie.Values.Add(191)
&Serie.Values.Add(234)
&Serie.Values.Add(290)
&Serie.Values.Add(330)
&Serie.Values.Add(310)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Toyota"
&Serie.SerieColor = "#A2F873"
&Serie.SerieStack = "Main"
&Serie.SerieType = SerieType.line
&Serie.Values.Add(150)
&Serie.Values.Add(232)
&Serie.Values.Add(201)
&Serie.Values.Add(154)
&Serie.Values.Add(190)
&Serie.Values.Add(330)
&Serie.Values.Add(410)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Daihatsu"
&Serie.SerieColor = "#AB5E12"
&Serie.SerieStack = "Main"
&Serie.SerieType = SerieType.line
&Serie.Values.Add(320)
&Serie.Values.Add(332)
&Serie.Values.Add(301)
&Serie.Values.Add(334)
&Serie.Values.Add(390)
&Serie.Values.Add(330)
&Serie.Values.Add(320)
&ChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Peugeot"
&Serie.SerieColor = "#4623DD"
&Serie.SerieStack = "Main"
&Serie.SerieType = SerieType.line
&Serie.Values.Add(820)
&Serie.Values.Add(932)
&Serie.Values.Add(901)
&Serie.Values.Add(934)
&Serie.Values.Add(1290)
&Serie.Values.Add(1330)
&Serie.Values.Add(1320)
&ChartData.Series.Add(&Serie)
EndSub
Mix-line-bar
Procedimiento de carga de datos de esta gráfica:
Se cargan los valores del eje x en la colección &EChartData.xAxis,
y se crean dos serie de tipo "bar" y otra de tipo line que se agregan a la colección &EChartData.Series
los valores de los dos ejes y se cargan en la coleccion &EChartData.MultipleYAxis
Sub 'Load Data'
&EChartData.xAxis.Add("January")
&EChartData.xAxis.Add("February")
&EChartData.xAxis.Add("March")
&EChartData.xAxis.Add("April")
&EChartData.xAxis.Add("May")
&EChartData.xAxis.Add("June")
&EChartData.xAxis.Add("July")
&EChartData.xAxis.Add("August")
&EChartData.xAxis.Add("September")
&EChartData.xAxis.Add("October")
&EChartData.xAxis.Add("November")
&EChartData.xAxis.Add("December")
&Serie = new()
&Serie.SerieName = "Evaporation"
&Serie.SerieColor = "#6CD7D9"
&Serie.SerieStack = "Evaporation"
&Serie.SerieType = SerieType.bar
&Serie.Values.Add(2.0)
&Serie.Values.Add(4.9)
&Serie.Values.Add(7.0)
&Serie.Values.Add(23.2)
&Serie.Values.Add(25.6)
&Serie.Values.Add(76.7)
&Serie.Values.Add(135.6)
&Serie.Values.Add(162.2)
&Serie.Values.Add(32.6)
&Serie.Values.Add(20.0)
&Serie.Values.Add(6.4)
&Serie.Values.Add(3.3)
&EChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Precipitation"
&Serie.SerieColor = "#B6A2DE"
&Serie.SerieStack = "Precipitation"
&Serie.SerieType = SerieType.bar
&Serie.Values.Add(2.6)
&Serie.Values.Add(5.9)
&Serie.Values.Add(9.0)
&Serie.Values.Add(26.4)
&Serie.Values.Add(28.7)
&Serie.Values.Add(70.7)
&Serie.Values.Add(175.6)
&Serie.Values.Add(182.2)
&Serie.Values.Add(48.7)
&Serie.Values.Add(18.8)
&Serie.Values.Add(6.0)
&Serie.Values.Add(2.3)
&EChartData.Series.Add(&Serie)
&Serie = new()
&Serie.SerieName = "Temperature"
&Serie.SerieColor = "#5AB1EF"
&Serie.SerieStack = "other"
&Serie.SerieType = SerieType.line
&Serie.SerieYAxisIndex = 1
&Serie.Values.Add(2.0)
&Serie.Values.Add(2.2)
&Serie.Values.Add(3.3)
&Serie.Values.Add(4.5)
&Serie.Values.Add(6.3)
&Serie.Values.Add(10.2)
&Serie.Values.Add(20.3)
&Serie.Values.Add(23.4)
&Serie.Values.Add(23.0)
&Serie.Values.Add(16.5)
&Serie.Values.Add(12.0)
&Serie.Values.Add(6.2)
&EChartData.Series.Add(&Serie)
&YAxis = new()
&YAxis.type = 'value'
&YAxis.name = 'Water'
&YAxis.min = 0
&YAxis.max = 200
&YAxis.interval = 50
&YAxis.fomatter = '{value} ml'
&EChartData.MultipleYAxis.Add(&YAxis)
&YAxis = new()
&YAxis.type = 'value'
&YAxis.name = 'Temp'
&YAxis.min = 0
&YAxis.max = 25
&YAxis.interval = 5
&YAxis.fomatter = '{value} °C'
&EChartData.MultipleYAxis.Add(&YAxis)
Endsub
PieSimple
Procedimiento de carga de datos de esta gráfica:
Se cargan los datos en la colección &Serie.Data
Sub 'Load Data Basic Pie'
&Serie = new()
&Serie.SerieName = "Visit the Source"
&Serie.SerieStack = "Visit the Source"
&Serie.SerieType = SerieType.pie
&Data = new()
&Data.DataName = "IE"
&Data.DataColor = "#2EC7C9"
&Data.DataValue = 335
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataName = "Opera"
&Data.DataColor = "#C4B4E4"
&Data.DataValue = 310
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataName = "Safari"
&Data.DataColor = "#7BC0F2"
&Data.DataValue = 234
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataName = "Firefox"
&Data.DataColor = "#FFC799"
&Data.DataValue = 135
&Serie.Data.Add(&Data)
&Data = new()
&Data.DataName = "Chrome"
&Data.DataColor = "#D87A80"
&Data.DataValue = 1548
&Serie.Data.Add(&Data)
&EChartData.Series.Add(&Serie)
EndSub
ScatterSingleAxis
Procedimiento de carga de datos de esta gráfica:
Sub 'Load Echart'
&EChartData.yAxis.Add("Friday")
&EChartData.yAxis.Add("Thursday")
&EChartData.yAxis.Add("Wednesday")
&EChartData.yAxis.Add("Tuesday")
&EChartData.yAxis.Add("Monday")
&EChartData.yAxis.Add("Sunday")
&EChartData.xAxis.Add("12a")
&EChartData.xAxis.Add("1a")
&EChartData.xAxis.Add("2a")
&EChartData.xAxis.Add("3a")
&EChartData.xAxis.Add("4a")
&EChartData.xAxis.Add("5a")
&EChartData.xAxis.Add("6a")
&EChartData.xAxis.Add("7a")
&EChartData.xAxis.Add("8a")
&EChartData.xAxis.Add("9a")
&EChartData.xAxis.Add("10a")
&EChartData.xAxis.Add("11a")
&EChartData.xAxis.Add("12p")
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 0
&VectorDataItem.DataValue = 5
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 1
&VectorDataItem.DataValue = 4
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 2
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 3
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 4
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 5
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 6
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 7
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 8
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 9
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 10
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 11
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 0
&VectorDataItem.xPosition = 12
&VectorDataItem.DataValue = 4
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 0
&VectorDataItem.DataValue = 6
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 1
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 2
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 3
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 4
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 5
&VectorDataItem.DataValue = 3
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 6
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 7
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 8
&VectorDataItem.DataValue = 3
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 9
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 10
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 11
&VectorDataItem.DataValue = 5
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 12
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 0
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 1
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 2
&VectorDataItem.xPosition = 2
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 3
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 4
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 5
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 6
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 7
&VectorDataItem.DataValue = 5
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 8
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 9
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 10
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 11
&VectorDataItem.DataValue = 6
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 1
&VectorDataItem.xPosition = 12
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 3
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 4
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 5
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 6
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 7
&VectorDataItem.DataValue = 5
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 8
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 9
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 10
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 11
&VectorDataItem.DataValue = 6
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 3
&VectorDataItem.xPosition = 12
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 0
&VectorDataItem.DataValue = 8
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 1
&VectorDataItem.DataValue = 3
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 2
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 3
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 4
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 5
&VectorDataItem.DataValue = 3
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 6
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 7
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 8
&VectorDataItem.DataValue = 3
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 9
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 10
&VectorDataItem.DataValue = 3
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 11
&VectorDataItem.DataValue = 5
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 4
&VectorDataItem.xPosition = 12
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 3
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 4
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 5
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 6
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 7
&VectorDataItem.DataValue = 5
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 8
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 9
&VectorDataItem.DataValue = 1
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 10
&VectorDataItem.DataValue = 2
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 11
&VectorDataItem.DataValue = 6
&EChartData.VectorData.Add(&VectorDataItem)
&VectorDataItem = new()
&VectorDataItem.yPosition = 5
&VectorDataItem.xPosition = 12
&VectorDataItem.DataValue = 0
&EChartData.VectorData.Add(&VectorDataItem)
EndSub