ECharts

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