B4J Question [ABMaterial] Adding Charts to my page

tufanv

Expert
Licensed User
Longtime User
HEllo,

Yesterday I started working on this great tool thanks to alwaysbusy. I have a problem. I created my first page modified the left side menu, and added a imageslider to top of my page and there is no problem with that.

Than i tried to add a chart bewlow to the slider but i tried many different things but couldnt manage to add the line chart. ( I am just trying to add 1 chart ) I think maybe i have a problem in my grid building i, I tried many different variations but never saw the chart this is my code. Can you check why are not they showing ? ( i checked the www folder for css and js files they are ok )

B4X:
'Class module
Sub Class_Globals
    Private ws As WebSocket 'ignore
    ' will hold our page information
    Public page As ABMPage
    ' page theme
    Private theme As ABMTheme
    ' to access the constants
    Private ABM As ABMaterial 'ignore   
    ' name of the page, must be the same as the class name (case sensitive!)
    Public Name As String = "girispage"  '<-------------------------------------------------------- IMPORTANT
    ' will hold the unique browsers window id
    Private ABMPageId As String = ""
   
    ' your own variables
   
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize
    ' build the local structure IMPORTANT!
    BuildPage
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
    Log("Connected")
    ws = WebSocket1   
    ABMPageId = ABM.GetPageID(page, Name,ws)
    Dim session As HttpSession = ABM.GetSession(ws, ABMShared.SessionMaxInactiveIntervalSeconds)
   
    If ABMShared.NeedsAuthorization Then
        If session.GetAttribute2("IsAuthorized", "") = "" Then
            ABMShared.NavigateToPage(ws, ABMPageId, "../")
            Return
        End If
    End If       
   
    ABM.UpdateFromCache(Me, ABMShared.CachedPages, ABMPageId, ws)
    If page.ComesFromPageCache Then
        ' refresh the page
        page.Refresh
        ' because we use ShowLoaderType=ABM.LOADER_TYPE_MANUAL
        page.FinishedLoading
    Else
        ' Prepare the page
        page.Prepare
        ' load the dynamic content
        ConnectPage
    End If
    Log(ABMPageId)
End Sub

Private Sub WebSocket_Disconnected
    Log("Disconnected")       
End Sub

Sub Page_ParseEvent(Params As Map)
    Dim eventName As String = Params.Get("eventname")
    Dim eventParams() As String = Regex.Split(",",Params.Get("eventparams"))
    If eventName = "beforeunload" Then
        Log("preparing for url refresh")   
        ABM.RemoveMeFromCache(ABMShared.CachedPages, ABMPageId)   
        Return
    End If
    If SubExists(Me, eventName) Then
        Params.Remove("eventname")
        Params.Remove("eventparams")
        Select Case Params.Size
            Case 0
                CallSub(Me, eventName)
            Case 1
                CallSub2(Me, eventName, Params.Get(eventParams(0)))                   
            Case 2
                If Params.get(eventParams(0)) = "abmistable" Then
                    Dim PassedTables As List = ABM.ProcessTablesFromTargetName(Params.get(eventParams(1)))
                    CallSub2(Me, eventName, PassedTables)
                Else
                    CallSub3(Me, eventName, Params.Get(eventParams(0)), Params.Get(eventParams(1)))
                End If
            Case Else
                ' cannot be called directly, to many param
                CallSub2(Me, eventName, Params)               
        End Select
    End If
End Sub

public Sub BuildTheme()
    ' start with the base theme defined in ABMShared
    theme.Initialize("pagetheme")
    theme.AddABMTheme(ABMShared.MyTheme)
   
    ' add additional themes specific for this page
    ' add additional themes specific for this page
    theme.AddChartTheme("chart1theme")
    theme.Chart("chart1theme").Serie(ABM.CHART_SERIEINDEX_C).LinePointStrokeWidthPx=8
    theme.Chart("chart1theme").Serie(ABM.CHART_SERIEINDEX_C).LineStrokeWidthPx=5   
   
    theme.AddChartTheme("chart2theme")
    theme.Chart("chart2theme").ZDepth = ABM.ZDEPTH_1
    theme.Chart("chart2theme").BackColor = ABM.COLOR_WHITE
   
    theme.AddChartTheme("chart4theme")
    theme.Chart("chart4theme").ZDepth = ABM.ZDEPTH_1
    theme.Chart("chart4theme").BackColor = ABM.COLOR_WHITE
    theme.Chart("chart4theme").Serie(ABM.CHART_SERIEINDEX_A).BarStrokeWidthPx = 25
    theme.Chart("chart4theme").Serie(ABM.CHART_SERIEINDEX_A).Color = ABM.COLOR_AMBER
    theme.Chart("chart4theme").Serie(ABM.CHART_SERIEINDEX_B).BarStrokeWidthPx = 25
    theme.Chart("chart4theme").Serie(ABM.CHART_SERIEINDEX_B).Color = ABM.COLOR_ORANGE
   
    theme.AddChartTheme("chart5theme")
    theme.Chart("chart5theme").LabelColor = ABM.COLOR_WHITE
End Sub

public Sub BuildPage()
    ' initialize the theme
    BuildTheme
   
    ' initialize this page using our theme
    page.InitializeWithTheme(Name, "/ws/" & ABMShared.AppName & "/" & Name, False, ABMShared.SessionMaxInactiveIntervalSeconds, theme)
    page.ShowLoader=True
    page.PageHTMLName = "index.html"
    page.PageTitle = "Tahminhane - Ana Sayfa"
    page.PageDescription = "Tahminhane Ana Sayfa"
    page.PageKeywords = ""
    page.PageSiteMapPriority = ""
    page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_YEARLY
   
        ' we are using a plugin for chartist.  Make sure the js is in the www/js/ and the css in the www/css/ folder!
    page.AddExtraJavaScriptFile("chartist-plugin-axistitle.min.js")
    page.AddExtraJavaScriptFile("chartist-plugin-legend.js")
    page.AddExtraJavaScriptFile("chartist-plugin-pointlabels.min.js")
    page.AddExtraJavaScriptFile("chartist-plugin-zoom.min.js")
    page.AddExtraCSSFile("chartist-plugin-tooltip.css")
    page.AddExtraJavaScriptFile("chartist-plugin-tooltip.min.js")
       
    ' adding a navigation bar
    ABMShared.BuildNavigationBar(page, "Ana Sayfa", "../images/logo.png", "", "Layouts", "")
    'page.NavigationBar.AddTopItem("Contact", "", "mdi-action-account-circle", "", False)
   
           
    ' create the page grid
    page.AddRows(1,True, "").AddCells12(1,"")
    page.AddRows(1,True, "").AddCellsOS(1,0,0,0,12,12,12, "")
    page.AddRows(1,True, "").AddCells12(1,"")
    page.AddRows(1,True, "").AddCells12(1,"")


    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
   
   

       
   
End Sub

public Sub ConnectPage()
    ' your stuff
    ABMShared.ConnectNavigationBar(page)
   
        ' create slider
    Dim slider As ABMImageSlider
    slider.Initialize(page, "slider", "slider300")
   
    ' add images
    slider.AddSlideImage("../images/slider5.jpg","En İyi Basketbol Tahminleri", "Sezonsal Bazda %70 Başarı", ABM.IMAGESLIDER_LEFT)
    slider.AddSlideImage("../images/slider2.jpg","This is our big Title!", "Here's a small slogan.", ABM.IMAGESLIDER_CENTER)
    slider.AddSlideImage("../images/slider3.jpg","This Is our big Title!", "Here's a small slogan.", ABM.IMAGESLIDER_RIGHT)
    slider.AddSlideImage("../images/slider4.jpg","This is our big Title!", "Here's a small slogan.", ABM.IMAGESLIDER_CENTER)
   
    page.Cell(2,1).AddComponent(slider)
   
    ' create a line chart
    Dim chart1 As ABMChart
    chart1.Initialize(page, "chart1", ABM.CHART_TYPELINE, ABM.CHART_RATIO_GOLDENSECTION, "chart1theme")
       
    ' add the labels
    chart1.AddLabels(Array As String("Mon", "The", "Wed", "Thu", "Fri", "Sat", "Sun"))
    ' set some options
    chart1.OptionsLine.FullWidth=True
    chart1.OptionsLine.ChartPaddingRight=60 ' because we set fullwidth, we have to adjust so the final label also fits
    chart1.OptionsLine.Serie(ABM.CHART_SERIEINDEX_A).LineSmooth = ABM.CHART_LINESMOOTH_NONE
    chart1.OptionsLine.Serie(ABM.CHART_SERIEINDEX_C).LineSmooth = ABM.CHART_LINESMOOTH_SIMPLE
    chart1.OptionsLine.Serie(ABM.CHART_SERIEINDEX_C).ShowArea = True
    chart1.AddPluginDefinition("Chartist.plugins.ctPointLabels({textAnchor: 'middle'})")
   
    ' add some series   
    Dim SerieA As ABMChartSerie
    SerieA.InitializeForLine(ABM.CHART_SERIEINDEX_A)
    SerieA.SetValues(Array As Int(30,50,70,80,ABM.CHART_NULLVALUE,140,170))
    chart1.AddSerie(SerieA)
   
    Dim SerieC As ABMChartSerie
    SerieC.InitializeForLine(ABM.CHART_SERIEINDEX_C)
    SerieC.SetValues(Array As Int(100,120,180,150,190,100,70))
    chart1.AddSerie(SerieC)
   
    ' add the chart to the cell   
    ' move one row , first param = 1
    page.Cell(4,1).AddComponent(chart1)
   
   
   
   
    page.Refresh ' IMPORTANT
   
    ' NEW, because we use ShowLoaderType=ABM.LOADER_TYPE_MANUAL
    page.FinishedLoading 'IMPORTANT
    page.ShowToast("toast1", "toastred", "Tahmihane'ye Hoşgeldiniz", 5000)   
    page.RestoreNavigationBarPosition
End Sub

' clicked on the navigation bar
Sub Page_NavigationbarClicked(Action As String, Value As String)
    page.SaveNavigationBarPosition   

End Sub
 

Harris

Expert
Licensed User
Longtime User
Upvote 0
Top