B4J Library [BANano] ChartJS charts with 1 line of code using UOECharts

Discussion in 'B4J Libraries & Classes' started by Mashiane, Apr 16, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    This lib is a wrap of this github

    The chart framework that has been adopted has been Chart.JS and one can easily create a chart with 1 line of code, as simple as..

    Code:
    'load the layout to the page
    BANano.LoadLayout("#body","vCharts")
      
    'line chart
    UOEChart1.AddXYMap(CreateMap("2017-01-01"11"2017-01-02"6)).Refresh
    The UOEChartKick.zip file is the library source code, open the project file with B4J, run it and then compile as library.
    The UOEChartKickDemo is the demo as explained in this thread.

    This is my first abstract designer based library for BANano, so to use the charts, one needs to use the abstract designer.

    1. Open Internal Designer
    2. Click on Add View > Custom View > UOEChart
    3. Update the properties of the chart
    4. Generate members
    5. Add the map data and Refresh the chart.

    UOEChartKickDesigner.png

    In this example I have created different charts and these are displayed one after another as I am not using a grid in this example and have not set the top/bottom variables.

    Line Chart

    UOELineChart.png


    Code:
    'line
        UOEChart1.AddXYMap(CreateMap("2017-01-01"11"2017-01-02"6)).Refresh

    Bar Chart

    UOEBarChart.png

    Code:
    'bar chart
        UOEChart2.AddXYMap(CreateMap("Work"32"Play"1492)).Refresh
     

    Attached Files:

    Last edited: Apr 16, 2019
  2. Mashiane

    Mashiane Expert Licensed User

    Code:
    UOEChart3.AddXYMap(CreateMap("Blueberry"44"Strawberry"23)).Refresh
    UOEPieChart.png
     
    joulongleu likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    Code:
    'bubble
        UOEChart4.AddBubble(174.080.01).AddBubble(176.582.32).AddBubble(180.373.63).AddBubble(167.674.16).AddBubble(188.085.92).refresh
    UOEBubbleChart.png
     
    joulongleu likes this.
  4. Mashiane

    Mashiane Expert Licensed User

    UOEColumnChart.png

    Code:
    'column
        UOEChart5.AddXYMap(CreateMap("Sun"32"Mon"46"Tue"28)).refresh
     
    joulongleu likes this.
  5. Mashiane

    Mashiane Expert Licensed User

    UOEAreChart.png

    Code:
    'area
        UOEChart6.AddXYMap(CreateMap("2017-01-01"11"2017-01-02"6)).refresh
     
    joulongleu likes this.
  6. Mashiane

    Mashiane Expert Licensed User

    Code:
    'scatter
        UOEChart7.AddXYMap(CreateMap("174.0"80.0"176.5"82.3"180.3"73.6)).refresh
    UOEScatterChart.png
     
    joulongleu likes this.
  7. Mashiane

    Mashiane Expert Licensed User

    One can also set properties via code, for example, we update the width of the chart and then create a line chart with more data. The properties for the chart, e.g. title, xaxis title, y axis title are set up in the abstract designer.

    UOELineChart1.png

    Code:
    Dim line As Map = CreateMap("2013-02-10":11,"2013-02-11":6,"2013-02-12":3,"2013-02-13":2, _
        
    "2013-02-14":5,"2013-02-15":3,"2013-02-16":8,"2013-02-17":6,"2013-02-18":6,"2013-02-19":12, _
        
    "2013-02-20":5,"2013-02-21":5,"2013-02-22":3,"2013-02-23":1,"2013-02-24":10,"2013-02-25":1, _
        
    "2013-02-26":3,"2013-02-27":2,"2013-02-28":3,"2013-03-01":2,"2013-03-02":8)
        
        
    'line
        UOEChart1.Style = $"{ "width": "100%"}"$
        UOEChart1.AddXYMap(line).Refresh
     
    joulongleu likes this.
  8. Mashiane

    Mashiane Expert Licensed User

    By setting Donut = True in the abstract designer, your PieChart can become a donut chart. In this example, due to UOEChart1 already being defined as a linechart, we overwrite the chart properties by using .Clear and then setting the legend position to the right also. This will be part of version 1.01 onwards.

    UOEChartDonut.png

    Code:
    'donut
        UOEChart1.Clear
        UOEChart1.ChartType = UOEChart1.CT_PieChart
        UOEChart1.AddXYMap(CreateMap(
    "Blueberry":44"Strawberry":23,"Banana":22,"Apple":21,"Grape":13))
        UOEChart1.Donut = 
    True
        UOEChart1.LegendPosition = 
    "right"
        UOEChart1.refresh
     
    joulongleu likes this.
  9. Mashiane

    Mashiane Expert Licensed User

    One can also create and add a chart via code easily.. This is an area chart.

    UOEAreaChartCode.png

    Code:
    Dim ac As UOEChart
        ac.Initialize(Me,
    "ac","ac")
        ac.ChartType = ac.CT_AreaChart
        ac.Width = 
    "100%"
        ac.XTitle = 
    "Months"
        ac.YTitle = 
    "Budget"
        ac.Title = 
    "Area Chart of Budget"
        ac.AddXYMap(CreateMap(
    "2013-02-10":11,"2013-02-11":6,"2013-02-12":3,"2013-02-13":2, _
        
    "2013-02-14":5,"2013-02-15":3,"2013-02-16":8,"2013-02-17":6,"2013-02-18":6,"2013-02-19":12, _
        
    "2013-02-20":5,"2013-02-21":5,"2013-02-22":3,"2013-02-23":1,"2013-02-24":10,"2013-02-25":1, _
        
    "2013-02-26":3,"2013-02-27":2,"2013-02-28":3,"2013-03-01":2,"2013-03-02":8))
        ac.AddToParent(
    "body")
     
    joulongleu likes this.
  10. Mashiane

    Mashiane Expert Licensed User

    Multiple Series

    To be able to draw multiple series, each series should be coded between a-z letters. In the following example we add series a-e and give each a title. We then add data for each series using these coded letters. We also set the legend position to be at the bottom of the chart.

    UOELineSeries.png

    As we are setting the width of an abstract designer element, we use set style to set the width.

    Code:
    UOEChart1.AddSeries("a","Workout",UOEChart1.color_cyan)
        UOEChart1.AddSeries(
    "b","Go to concert",UOEChart1.color_green)
        UOEChart1.AddSeries(
    "c","Wash face",UOEChart1.color_indigo)
        UOEChart1.AddSeries(
    "d","Call parents",UOEChart1.color_blue)
        UOEChart1.AddSeries(
    "e","Eat breakfast",UOEChart1.color_brown)
        UOEChart1.AddSeriesXYMap(
    "a", CreateMap("2013-02-10":3,"2013-02-17":3,"2013-02-24":3,"2013-03-03":1,"2013-03-10":4,"2013-03-17":3,"2013-03-24":2,"2013-03-31":3))
        UOEChart1.AddSeriesXYMap(
    "b", CreateMap("2013-02-10":0,"2013-02-17":0,"2013-02-24":0,"2013-03-03":0,"2013-03-10":2,"2013-03-17":1,"2013-03-24":0,"2013-03-31":0))
        UOEChart1.AddSeriesXYMap(
    "c", CreateMap("2013-02-10":0,"2013-02-17":1,"2013-02-24":0,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":0,"2013-03-31":1))
        UOEChart1.AddSeriesXYMap(
    "d", CreateMap("2013-02-10":5,"2013-02-17":3,"2013-02-24":2,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":1,"2013-03-31":0))
        UOEChart1.AddSeriesXYMap(
    "e", CreateMap("2013-02-10":3,"2013-02-17":2,"2013-02-24":1,"2013-03-03":0,"2013-03-10":2,"2013-03-17":2,"2013-03-24":3,"2013-03-31":0))
        UOEChart1.Style = 
    $"{ "width": "100%"}"$
        UOEChart1.LegendPosition = UOEChart1.LP_bottom
        UOEChart1.refresh
     
    Johan Schoeman and joulongleu like this.
  11. Mashiane

    Mashiane Expert Licensed User

    You can also just change the chart type in a multiple series chart. This example is a bar chart however we change the xtitle and ytitle.

    UOEMultipleSeriesBar.png

    Code:
    UOEChart1.ChartType = UOEChart1.ct_barchart
        UOEChart1.XTitle = 
    "Budget"
        UOEChart1.YTitle = 
    "Months"
        UOEChart1.Title = 
    "Multiple Series Bar Chart"
        UOEChart1.AddSeries(
    "a","Workout",UOEChart1.color_cyan)
        UOEChart1.AddSeries(
    "b","Go to concert",UOEChart1.color_green)
        UOEChart1.AddSeries(
    "c","Wash face",UOEChart1.color_indigo)
        UOEChart1.AddSeries(
    "d","Call parents",UOEChart1.color_blue)
        UOEChart1.AddSeries(
    "e","Eat breakfast",UOEChart1.color_brown)
        UOEChart1.AddSeriesXYMap(
    "a", CreateMap("2013-02-10":3,"2013-02-17":3,"2013-02-24":3,"2013-03-03":1,"2013-03-10":4,"2013-03-17":3,"2013-03-24":2,"2013-03-31":3))
        UOEChart1.AddSeriesXYMap(
    "b", CreateMap("2013-02-10":0,"2013-02-17":0,"2013-02-24":0,"2013-03-03":0,"2013-03-10":2,"2013-03-17":1,"2013-03-24":0,"2013-03-31":0))
        UOEChart1.AddSeriesXYMap(
    "c", CreateMap("2013-02-10":0,"2013-02-17":1,"2013-02-24":0,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":0,"2013-03-31":1))
        UOEChart1.AddSeriesXYMap(
    "d", CreateMap("2013-02-10":5,"2013-02-17":3,"2013-02-24":2,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":1,"2013-03-31":0))
        UOEChart1.AddSeriesXYMap(
    "e", CreateMap("2013-02-10":3,"2013-02-17":2,"2013-02-24":1,"2013-03-03":0,"2013-03-10":2,"2013-03-17":2,"2013-03-24":3,"2013-03-31":0))
        UOEChart1.Style = 
    $"{ "width": "100%"}"$
        UOEChart1.LegendPosition = UOEChart1.LP_bottom
        UOEChart1.refresh
     
    joulongleu likes this.
  12. Mashiane

    Mashiane Expert Licensed User

    It's also easier to create a stacked bar chart. You just set a few properties and you are all set.

    UOEStackedBar.png

    Code:
    UOEChart1.ChartType = UOEChart1.ct_barchart
        UOEChart1.Title = 
    "Stacked Bar Chart"
        UOEChart1.AddSeries(
    "a","Series A",UOEChart1.color_cyan)
        UOEChart1.AddSeries(
    "b","Series B",UOEChart1.color_green)
        UOEChart1.AddSeriesXYMap(
    "a", CreateMap("0":32,"1":46,"2":28,"3":21,"4":20,"5":13,"6":27))
        UOEChart1.AddSeriesXYMap(
    "b", CreateMap("0":32,"1":46,"2":28,"3":21,"4":20,"5":13,"6":27))
        UOEChart1.Stacked = 
    True
        UOEChart1.XTitle = 
    "Budget"
        UOEChart1.YTitle = 
    "Period"
        UOEChart1.Style = 
    $"{ "width": "50%"}"$
        UOEChart1.Refresh
     
    joulongleu likes this.
  13. Mashiane

    Mashiane Expert Licensed User

    A stacked column chart...

    UOEStackedColumn.png

    Code:
    'stacked
        UOEChart1.Clear
        UOEChart1.ChartType = UOEChart1.CT_ColumnChart
        UOEChart1.Title = 
    "Stacked Column Chart"
        UOEChart1.AddSeries(
    "a","Series A",UOEChart1.color_cyan)
        UOEChart1.AddSeries(
    "b","Series B",UOEChart1.color_green)
        UOEChart1.AddSeriesXYMap(
    "a", CreateMap("0":32,"1":46,"2":28,"3":21,"4":20,"5":13,"6":27))
        UOEChart1.AddSeriesXYMap(
    "b", CreateMap("0":32,"1":46,"2":28,"3":21,"4":20,"5":13,"6":27))
        UOEChart1.Stacked = 
    True
        UOEChart1.Style = 
    $"{ "width": "50%"}"$
        UOEChart1.LegendPosition = UOEChart1.LP_right
        UOEChart1.Refresh
     
    joulongleu likes this.
  14. Mashiane

    Mashiane Expert Licensed User

    UOEMultipleArea.png

    Just changing the chart area to area chart on post # 10, draws up a multiple-area-chart, easy peasy.

    Code:
    UOEChart1.clear
        UOEChart1.ChartType = UOEChart1.CT_AreaChart
        UOEChart1.Title = 
    "Multiple Area Chart"
        UOEChart1.AddSeries(
    "a","Workout",UOEChart1.color_cyan)
        UOEChart1.AddSeries(
    "b","Go to concert",UOEChart1.color_green)
        UOEChart1.AddSeries(
    "c","Wash face",UOEChart1.color_indigo)
        UOEChart1.AddSeries(
    "d","Call parents",UOEChart1.color_blue)
        UOEChart1.AddSeries(
    "e","Eat breakfast",UOEChart1.color_brown)
        UOEChart1.AddSeriesXYMap(
    "a", CreateMap("2013-02-10":3,"2013-02-17":3,"2013-02-24":3,"2013-03-03":1,"2013-03-10":4,"2013-03-17":3,"2013-03-24":2,"2013-03-31":3))
        UOEChart1.AddSeriesXYMap(
    "b", CreateMap("2013-02-10":0,"2013-02-17":0,"2013-02-24":0,"2013-03-03":0,"2013-03-10":2,"2013-03-17":1,"2013-03-24":0,"2013-03-31":0))
        UOEChart1.AddSeriesXYMap(
    "c", CreateMap("2013-02-10":0,"2013-02-17":1,"2013-02-24":0,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":0,"2013-03-31":1))
        UOEChart1.AddSeriesXYMap(
    "d", CreateMap("2013-02-10":5,"2013-02-17":3,"2013-02-24":2,"2013-03-03":0,"2013-03-10":0,"2013-03-17":1,"2013-03-24":1,"2013-03-31":0))
        UOEChart1.AddSeriesXYMap(
    "e", CreateMap("2013-02-10":3,"2013-02-17":2,"2013-02-24":1,"2013-03-03":0,"2013-03-10":2,"2013-03-17":2,"2013-03-24":3,"2013-03-31":0))
        UOEChart1.Style = 
    $"{ "width": "100%"}"$
        UOEChart1.LegendPosition = UOEChart1.LP_bottom
        UOEChart1.refresh
     
    joulongleu likes this.
  15. Mashiane

    Mashiane Expert Licensed User

    Setting BorderDash & BorderWidth

    BorderDash - draws dash lines on the column chart.

    UOEBorderDash.png

    Code:
    UOEChart1.BorderDash = 10
        UOEChart1.Style = 
    $"{ "width": "50%"}"$
        UOEChart1.AddXYMap(CreateMap(
    "2013-02-10":11,"2013-02-11":6,"2013-02-12":3,"2013-02-13":2,"2013-02-14":5,"2013-02-15":3, _
        
    "2013-02-16":8,"2013-02-17":6,"2013-02-18":6,"2013-02-19":12,"2013-02-20":5,"2013-02-21":5,"2013-02-22":3, _
        
    "2013-02-23":1,"2013-02-24":10,"2013-02-25":1,"2013-02-26":3,"2013-02-27":2,"2013-02-28":3,"2013-03-01":2,"2013-03-02":8))
        UOEChart1.refresh
    BorderWidth sets the border width in PieCharts

    UOEBorderWidth.png

    Code:
    UOEChart3.BorderWidth = 10
        UOEChart3.AddXYMap(CreateMap(
    "Blueberry":44,"Strawberry":23,"Banana":22,"Apple":21,"Grape":13)).Refresh
     
    joulongleu likes this.
  16. Mashiane

    Mashiane Expert Licensed User

    Using AddXYColor, one is able to specify any color that want for a point on a chart.
    UOEDiffColors.png

    Code:
    Dim pc As UOEChart
        pc.Initialize(Me,
    "pc","pc")
        pc.Width = 
    "50%"
        pc.AddXYColor(
    "Red",10,pc.color_red)
        pc.AddXYColor(
    "Amber",20,pc.color_orange)
        pc.AddXYColor(
    "Green",30,pc.color_green)
        pc.ChartType = pc.CT_PieChart
        pc.AddToParent(
    "body")
     
    joulongleu likes this.
  17. Mashiane

    Mashiane Expert Licensed User

    Hiding points and removing curves on line charts

    UOENoPoints.png

    You can hide the points by setting Points = False and also removing the curves by setting Curve = False just before refresh.

    Code:
    UOEChart1.Curve = False
        UOEChart1.Points = 
    False
     
    joulongleu likes this.
  18. Mashiane

    Mashiane Expert Licensed User

    Column Labels

    UOEColumnLabels.png

    I need to relook this chart, however..

    Code:
    UOEChart1.Clear
        UOEChart1.ChartType = UOEChart1.CT_ColumnChart
        UOEChart1.Title = 
    "Column Labels"
        UOEChart1.AddSeries(
    "a","Ratings",UOEChart1.color_blue)
        UOEChart1.AddSeries(
    "b","Average",UOEChart1.color_green)
        UOEChart1.AddSeriesXYMap(
    "a", CreateMap("Close Shave, A (1995)":112, _
        
    "Schindler's List (1993)":298, _
        
    "Wrong Trousers, The (1993)":118, _
        
    "Casablanca (1942)":243, _
        
    "Shawshank Redemption, The (1994)":283, _
        
    "Wallace \u0026 Gromit: The Best of Aardman Animation (1996)":67, _
        
    "Usual Suspects, The (1995)":267, _
        
    "Rear Window (1954)":209, _
        
    "Star Wars (1977)":583, _
        
    "12 Angry Men (1957)":125, _
        
    "Third Man, The (1949)":72, _
        
    "Some Folks Call It a Sling Blade (1993)":41, _
        
    "One Flew Over the Cuckoo's Nest (1975)":264, _
        
    "To Kill a Mockingbird (1962)":219, _
        
    "Citizen Kane (1941)":198, _
        
    "Silence of the Lambs, The (1991)":390, _
        
    "North by Northwest (1959)":179, _
        
    "Godfather, The (1972)":413, _
        
    "Secrets \u0026 Lies (1996)":162, _
        
    "Manchurian Candidate, The (1962)":131))
        UOEChart1.AddSeriesXYMap(
    "b", CreateMap("Close Shave, A (1995)":"4.49", _
        
    "Schindler's List (1993)":"4.47", _
        
    "Wrong Trousers, The (1993)":"4.47", _
        
    "Casablanca (1942)":"4.46", _
        
    "Shawshank Redemption, The (1994)":"4.45", _
        
    "Wallace \u0026 Gromit: The Best of Aardman Animation (1996)":"4.45", _
        
    "Usual Suspects, The (1995)":"4.39", _
        
    "Rear Window (1954)":"4.39", _
        
    "Star Wars (1977)":"4.36", _
        
    "12 Angry Men (1957)":"4.34", _
        
    "Third Man, The (1949)":"4.33", _
        
    "Some Folks Call It a Sling Blade (1993)":"4.29", _
        
    "One Flew Over the Cuckoo's Nest (1975)":"4.29", _
        
    "To Kill a Mockingbird (1962)":"4.29", _
        
    "Citizen Kane (1941)":"4.29", _
        
    "Silence of the Lambs, The (1991)":"4.29", _
        
    "North by Northwest (1959)":"4.28", _
        
    "Godfather, The (1972)":"4.28", _
        
    "Secrets \u0026 Lies (1996)":"4.27", _
        
    "Manchurian Candidate, The (1962)":"4.26"))
        UOEChart1.Style = 
    $"{ "width": "100%"}"$
        UOEChart1.LegendPosition = UOEChart1.LP_right
        UOEChart1.Refresh
     
    joulongleu likes this.
  19. Mashiane

    Mashiane Expert Licensed User

    Discrete Line Chart

    UOEDiscrete.png

    Code:
    UOEChart1.Clear
        UOEChart1.ChartType = UOEChart1.CT_LineChart
        UOEChart1.Title = 
    "Discrete Line Chart"
        UOEChart1.AddXYMap(CreateMap(
    "United States":44,"Germany":23,"Brazil":22,"Canada":21,"France":13))
        UOEChart1.Discrete = 
    True
        UOEChart1.Style = 
    $"{ "width": "60%"}"$
        UOEChart1.refresh
     
    joulongleu likes this.
  20. Mashiane

    Mashiane Expert Licensed User

    UOEMinutes.png

    Code:
    UOEChart1.Clear
        UOEChart1.ChartType = UOEChart1.CT_LineChart
        UOEChart1.Title = 
    "Minutes Data"
        UOEChart1.AddXYMap(CreateMap(
    "2016-05-23T01:51:00.000Z":0, _
        
    "2016-05-23T01:52:00.000Z":0, _
        
    "2016-05-23T01:53:00.000Z":0, _
        
    "2016-05-23T01:54:00.000Z":0, _
        
    "2016-05-23T01:55:00.000Z":0, _
        
    "2016-05-23T01:56:00.000Z":0, _
        
    "2016-05-23T01:57:00.000Z":0, _
        
    "2016-05-23T01:58:00.000Z":0, _
        
    "2016-05-23T01:59:00.000Z":0, _
        
    "2016-05-23T02:00:00.000Z":0, _
        
    "2016-05-23T02:01:00.000Z":0, _
        
    "2016-05-23T02:02:00.000Z":0, _
        
    "2016-05-23T02:03:00.000Z":0, _
        
    "2016-05-23T02:04:00.000Z":0, _
        
    "2016-05-23T02:05:00.000Z":0, _
        
    "2016-05-23T02:06:00.000Z":0, _
        
    "2016-05-23T02:07:00.000Z":0, _
        
    "2016-05-23T02:08:00.000Z":0, _
        
    "2016-05-23T02:09:00.000Z":0, _
        
    "2016-05-23T02:10:00.000Z":0, _
        
    "2016-05-23T02:11:00.000Z":0, _
        
    "2016-05-23T02:12:00.000Z":0, _
        
    "2016-05-23T02:13:00.000Z":0, _
        
    "2016-05-23T02:14:00.000Z":0, _
        
    "2016-05-23T02:15:00.000Z":0, _
        
    "2016-05-23T02:16:00.000Z":0, _
        
    "2016-05-23T02:17:00.000Z":0, _
        
    "2016-05-23T02:18:00.000Z":0, _
        
    "2016-05-23T02:19:00.000Z":0, _
        
    "2016-05-23T02:20:00.000Z":0, _
        
    "2016-05-23T02:21:00.000Z":0, _
        
    "2016-05-23T02:22:00.000Z":0, _
        
    "2016-05-23T02:23:00.000Z":0, _
        
    "2016-05-23T02:24:00.000Z":0, _
        
    "2016-05-23T02:25:00.000Z":0, _
        
    "2016-05-23T02:26:00.000Z":0, _
        
    "2016-05-23T02:27:00.000Z":0, _
        
    "2016-05-23T02:28:00.000Z":0, _
        
    "2016-05-23T02:29:00.000Z":0, _
        
    "2016-05-23T02:30:00.000Z":0, _
        
    "2016-05-23T02:31:00.000Z":0, _
        
    "2016-05-23T02:32:00.000Z":0, _
        
    "2016-05-23T02:33:00.000Z":0, _
        
    "2016-05-23T02:34:00.000Z":0, _
        
    "2016-05-23T02:35:00.000Z":0,"2016-05-23T02:36:00.000Z":0,"2016-05-23T02:37:00.000Z":0, _
        
    "2016-05-23T02:38:00.000Z":0,"2016-05-23T02:39:00.000Z":0,"2016-05-23T02:40:00.000Z":0, _
        
    "2016-05-23T02:41:00.000Z":0,"2016-05-23T02:42:00.000Z":0,"2016-05-23T02:43:00.000Z":0, _
        
    "2016-05-23T02:44:00.000Z":0,"2016-05-23T02:45:00.000Z":24,"2016-05-23T02:46:00.000Z":0, _
        
    "2016-05-23T02:47:00.000Z":0,"2016-05-23T02:48:00.000Z":0,"2016-05-23T02:49:00.000Z":0"2016-05-23T02:50:00.000Z":8))
        UOEChart1.Style = 
    $"{ "width": "60%"}"$
        UOEChart1.refresh
     
    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice