B4A Library Google Charts

Discussion in 'Additional libraries, classes and official updates' started by NJDude, Mar 16, 2015.

  1. NJDude

    NJDude Expert Licensed User

    This library will allow you to create nice charts using the Google Charts API.

    Requirements:

    1- B4A 4.3x.

    2- The CloudPrint library.

    3- The WebViewExtras library.

    4- Internet connection.

    5- Copy the GoogleCharts.xml and GoogleCharts.jar to your additional libraries directory.


    Usage:
    Code:
    'Initialize the library
    Private gChart As GoogleCharts

    gChart.Initialize(ChartView, Me, 
    "Chart"True)

    gChart.AddOnlineCustomFontToChart = 
    "Roboto:100" 'The font name is CASE SENSITIVE.

    gChart.PieChartTitle = 
    "My daily activities (hours)"
    gChart.PieChartTitleStyle(
    "purple""roboto"30FalseTrue)
    gChart.PieChartLegend(
    "right""blue""roboto"20FalseFalse)
    gChart.PieChart3D = 
    True
    gChart.PieChartSliceText = 
    "percentage"
    gChart.PieChartSliceLabelAndValue(
    "Work"11)
    gChart.PieChartSliceLabelAndValue(
    "Eat"2)

    gChart.PieChartSliceLabelAndValue(
    "Commute"2)
    gChart.PieChartSliceLabelAndValue(
    "Watch TV"2)
    gChart.PieChartSliceLabelAndValue(
    "Sleep"7)
    gChart.PieChartSetSliceOffset(
    "Watch TV"3)


    gChart.ShowPieChart
    The charts included are:

    - Pie (3D and Donut).
    - Bar.
    - Combo (Bar, Area, Stepped Area, Line).
    - Histogram.
    - Scatter.
    - Bubble.
    - Geo.


    Features:

    - Use custom fonts (Online fonts via Google Fonts or local).
    - Save charts.
    - Print charts.


    For more details about the use of this library please check the attached project.

    You can try the attached APK if you just want to see what the library can do.
     

    Attached Files:

  2. Peter Simpson

    Peter Simpson Expert Licensed User

    Good morning Mr Dude, firstly thank you for yet another awesome library. I for one really appreciate your hard work.

    I was just wondering what is the difference between your great library and this link http://www.b4x.com/android/forum/threads/google-charts.31240/ apart from the API? Your solution is simpler to implement though.

    Thank you :)
     
  3. NJDude

    NJDude Expert Licensed User

    The difference is what you just said:
    ;)
     
  4. Mahares

    Mahares Well Known Member Licensed User

    I wanted to draw a line graph representing data extracted from a SQlite able like this DATE (horizontal axis) and MCFD vertical axis:
    DATE MCFD
    20140423 456
    20140703 425
    20141113 400
    20150106 409
    20150318 387

    I could not find an option for a line graph so I tried to modify the Combo option. My problem is : I could not find a way to include the DATE field in the horizontal axis..
    Here is the code:
    Code:
    Sub Combo
                    gChart.Initialize(ChartView, Me, 
    "Chart"True)           
                    gChart.AddOnlineCustomFontToChart = 
    "Roboto:300"
                    gChart.ComboChartTitle = 
    "MCFD versus DATE"
                    gChart.ComboChartTitleStyle(
    "blue""roboto"20FalseTrue)
                    gChart.ComboChartLegend(
    "right""red""verdana"14FalseFalse)   
                    gChart.ComboChartSetColumnLabel = 
    "MCFD"
                    
    Private comboColorsList As List
                    
    Private comboSeriesColor As List   
                    comboColorsList.Initialize
                    comboSeriesColor.Initialize
               
                    
    Dim lstMCFD As List
                    lstMCFD.Initialize
                    
    For i=0 To Cursor1.RowCount-1
                             Cursor1.Position=i
                                    lstMCFD.Add(Cursor1.GetString(
    "AVMCFD"))
                    
    Next
           
                    comboColorsList.AddAll(
    Array As String("red""magenta"))
                    comboSeriesColor.AddAll(
    Array As String("#5C3292"))
               
                    gChart.ComboChartSetColumnValues(
    "?????", lstMCFD) 'HERE IS THE PROBLEM
               
                    gChart.ComboChartOrientation = 
    "horizontal"
                    gChart.ComboChartDefaultCurveType = 
    "function"
                    gChart.ComboChartSetDefaultSeriesType = 
    "line"

                    gChart.ComboChartCreateSeries(
    "MCFD""line""function"True)
                    gChart.ComboChartCrosshair(
    "both""both")
       
                    gChart.ComboChartSetAxisTitlesPosition = 
    "out"
                    gChart.ComboChartSetHorizontalAxisTitle(
    "DATE""magenta""verdana"14FalseTrue)
                    gChart.ComboChartSetVerticalAxisTitle(
    "MCFD""magenta""verdana"14FalseTrue)
                    gChart.ComboChartSeriesColor = comboSeriesColor
               
                    gChart.ShowComboChart

    End Sub
    Thank you for helping
     
  5. NJDude

    NJDude Expert Licensed User

    That would be something like:
    Code:
    gChart.ComboChartSetColumnValues("20140423", lstMCFD) 

    ...
    You only have 1 column, so you'll have only the Label and 1 value, to better understand, you can play around with the sample code I attached on the 1st post. It might take a little bit of getting used to but is not difficult.
     
  6. Mahares

    Mahares Well Known Member Licensed User

    I played around with your sample for quite some time. The dates change. How can your suggestion work NJDude. Each value in the MCFD column must correspond to a given value in the DATE field that changes. The problem is : How do you extract the dates from the DATE field that is in the table. You can't possibly have this:
    Code:
    Dim lstMCFD As List
    lstMCFD.Initialize
    For i=0 To Cursor1.RowCount-1
           Cursor1.Position=i
           lstMCFD.Add(Cursor1.GetString(
    "AVMCFD"))
    Next
    for i= 0 to Cursor1.Rowcount -1
       gChart.ComboChartSetColumnValues(cursor1.getstring(
    "DATE"), lstMCFD)
    next
     
  7. NJDude

    NJDude Expert Licensed User

    You will have to get all the dates (e.g. 20140423, 20140703, etc) and add them to an array or list, then all the values, after that add them to the chart, in other words, is not a one shot deal, you will have to gather the data first before you add it to the chart.
     
    Peter Simpson likes this.
  8. NJDude

    NJDude Expert Licensed User

    @Mahares Take a look at the attached sample.
     

    Attached Files:

    Peter Simpson and Mahares like this.
  9. Mahares

    Mahares Well Known Member Licensed User

    @NJDude: It is great what you do for the forum. Please allow me to make a couple of observations:
    1. Iterating through all the records and initializing the list every record may cause the chart to load very slowly particularly if the table has hundreds of records to plot.
    2. I can see vertical grid lines but not horizontal grid lines.
    3. I attempted to save the chart of course by initializing the chart=true, but all it saves is the word 'Hidden'
    4. Also when printed, it just prints the word 'Hidden' which is the content of the file saved. Google cloud lib is installed.
    If you have any comments on the above, please set me straight. It is Friday, going to a fish fry. I will be close to the confessional.
    Thank you
     
  10. NJDude

    NJDude Expert Licensed User

    That's normal, and due to the way the API works, which incidentally is meant to be used on desktops, but even on desktops, it might take a little bit of time to render.
    I'm not sure what you mean by that, all the charts show horizontal grid lines.
    I'm puzzled, setting TRUE on the initialization will show a MENU button, and on the attached sample I demonstrated how to save a chart, no idea what that "hidden" is all about, would you please give me more details?
    The printing part is nothing but the printed representation of what was saved, so, if something weird was saved something weird will be printed.
     
    Devan and Peter Simpson like this.
  11. Mahares

    Mahares Well Known Member Licensed User

    Sorry, I meant: I see horizontal gridlines, but not vertical gridlines.

    The same thing happened with your original example on your first post. I get the 'hidden' word I really do not know. It is weird. I even changed the extension to jpg and it did not make a difference. For your information, I have been using Machiane's GoogleCharts class for quite some time and it works very well and quite fast even for a large number of points plotted. But, I wanted to give your library a try because everything you do is always pragmatic and simplified. Machiane's class does not have the saving and printing capabilities.
    Thank you
     
  12. NJDude

    NJDude Expert Licensed User

    Really?, ok, now I'm really puzzled, let me take a look at the sample.
     
  13. NJDude

    NJDude Expert Licensed User

    Well, I downloaded the sample, compiled it, saved the Combo chart, looks fine. Here is the Screenshot
     
    Peter Simpson likes this.
  14. Mahares

    Mahares Well Known Member Licensed User

    I think it might have something to do with OS 5.0. I use the Samsung S5 phone with OS 5.0. The word hidden actually appears as soon as I press the 'Menu' button before I even save or print the file. I even downloaded your sample again and the same odd thing happened. However, I installed the app on a tablet with OS4.2.2 and the graph saved as it is supposed to and looked good.

    On another issue, did you have a chance to look into Google line chart when you created your library without associating it with the COMBO chart. It might be simpler to implement. The reason I used your COMBO chart is because it was the only one that allowed me to mimic a line chart.
    Thank you for your expertise
     
  15. NJDude

    NJDude Expert Licensed User

    That's interesting, I have 5.1 and 5.0.2 devices and the charts work fine on all of them.

    The combo chart is well, a combination of all those separate charts I don't think it will make a difference.
     
    Devan and Peter Simpson like this.
  16. Peter Simpson

    Peter Simpson Expert Licensed User

    @Mahares there are no vertical lines only horizontal in @NJDude's screen shot above. Can you point to a particular chart or reply with a screen shot as I'm completely baffles too. Most charts (not all) only use horizontal lines. I presume that you're talking about the horizontal background value lines.

    I've tested this library on devices running Android 4.4.2, 5.0.1, 5.0.2 and 5.1 with no issues whatsoever.
     
    Devan likes this.
  17. Mahares

    Mahares Well Known Member Licensed User

    It would have been nice if the graph generated by NJDude's lib displays vertical gridlines that intersect the X value axis. It would add better readability for the chart. See the chart that is generated by the lib and the other chart where I manually added the vertical gridlines.
     

    Attached Files:

  18. NJDude

    NJDude Expert Licensed User

    I don't t think that's possible in Google Charts.
     
  19. Mahares

    Mahares Well Known Member Licensed User

    Take a look at the below link, Google line chart displays vertical and horizontal gridlines. The rest of us have been accustomed to challenge someone like you to figure it out because of your vast knowledge. We have been spoiled with powerhouses like you. With or without offering that option, your lib is still very useful and deserves great accolade.
    https://developers.google.com/chart/interactive/docs/gallery/linechart
     
  20. NJDude

    NJDude Expert Licensed User

    Well, I was referring to the way you want the vertical lines, but yes, vertical gridlines could be added, but I will have to modify the library.
     
    Peter Simpson 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