Android Tutorial Add Charts With Google Charts Service

Discussion in 'Tutorials & Examples' started by Erel, Mar 24, 2014.

  1. Erel

    Erel Administrator Staff Member Licensed User

    The attached project is a port of this example: [Server] Google Charts service to Basic4android.
    A similar example with more charts is available here: http://www.basic4ppc.com/android/forum/threads/google-charts.31240/#post-186963

    upload_2014-3-24_16-7-18.png upload_2014-3-24_16-7-34.png

    Google Charts is a web service that allows adding all kinds of nice looking and interactive charts. The charts are rendered in Google Charts servers. A WebView is used to show the result. This means that it will not work without an internet connection.

    The required html is created with a template file. The data and options JSON strings are added to the template and then loaded to the WebView.

    The code is quite simple. Note that the charts will only be displayed on Android 3+ devices.
     

    Attached Files:

  2. stef110

    stef110 New Member Licensed User

    Thanks Erel just what i need for a on going project!

    Stef
     
  3. Jausa

    Jausa Member Licensed User

    Hi.
    I want to know if i can save the result of the Webview to an image or to an static HTML containing the data.
    Regards.
     
  4. Erel

    Erel Administrator Staff Member Licensed User

    Yes, with WebView.CaptureBitmap.
     
    Jausa likes this.
  5. stanks

    stanks Active Member Licensed User

    LineChart question. I want to show different data (3 diff values) for same date in a month (e.g. 1.7. -> 2.10; 1.7 -> 2.5 1.7 -> 2.23 ... 3.7-> 3.01; 3.7. -> 3.02; 3.7. -> 3.4 ...
    Landscape only -> X axis days and Y values
    How?

    thanks
     
  6. stanks

    stanks Active Member Licensed User

    i think i solved the problem....which was ...i put for date wrong value and whole chart didn't draw correct
    btw Erel can we set all options from
    Code:
    https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options
    or not?

    thanks
     
  7. stanks

    stanks Active Member Licensed User

    hm i tried with hAxis.title and vAxis.title but no change
     
  8. stanks

    stanks Active Member Licensed User

    i noticed that google charts have problems with values lower then 1.0...will check that more
     
  9. solfinker

    solfinker Member Licensed User

    Hello.
    I have troubles when changing
    Code:
    Spinner1.AddAll(Array As String("Bar""Line""Pie""Geo"))
    and
    Code:
    Select Value
            
    Case "Pie"
                CreatePieChartData(cols, rows)
                CreatePieChartOptions(options)
            
    Case "Bar"
                CreateBarChartData(cols, rows)
                CreateBarChartOptions(options)
            
    Case "Line"
                CreateLineChartData(cols, rows)
                CreateLineChartOptions(options)
    into
    Code:
    Spinner1.AddAll(Array As String("Bar1""Line1""Pie1""Geo"))
    and
    Code:
    Select Value
            
    Case "Pie1"
                CreatePieChartData(cols, rows)
                CreatePieChartOptions(options)
            
    Case "Bar1"
                CreateBarChartData(cols, rows)
                CreateBarChartOptions(options)
            
    Case "Line1"
                CreateLineChartData(cols, rows)
                CreateLineChartOptions(options)
    which creates no charts at all.

    Thanks for your hints
     
  10. Erel

    Erel Administrator Staff Member Licensed User

    Put a breakpoint in the Select Value line and check the value of 'Value'.
     
  11. solfinker

    solfinker Member Licensed User

  12. Erel

    Erel Administrator Staff Member Licensed User

    What happens when you press F8? The correct code is not executed?
     
  13. solfinker

    solfinker Member Licensed User

    The correct code is executed, but you get a blank screen with no chart at all, but for "Geo". "Geo" is working fine until I change "Geo" into "Geo1".
    The same happens with the rest of them.
     

    Attached Files:

  14. Erel

    Erel Administrator Staff Member Licensed User

    I didn't remember the code. So I clicked on Value and pressed F7:
    [​IMG]

    You can immediately see that the value is used in another place. If you open template.html you will see that the JavaScript method is set based on this Value parameter.
     
    solfinker likes this.
  15. solfinker

    solfinker Member Licensed User

    Thank you!
    Code:
    Select Value
            
    Case "PieWhatever"
                CreatePieChartData(cols, rows)
                CreatePieChartOptions(options)
                value2 = 
    "Pie"
            
    Case "BarWhatever"
                CreateBarChartData(cols, rows)
                CreateBarChartOptions(options)
                value2 = 
    "Bar"
    Code:
    html = html.Replace("$TYPE$", value2 & "Chart")
     
  16. incendio

    incendio Well-Known Member Licensed User

    Last edited: Aug 12, 2015
  17. incendio

    incendio Well-Known Member Licensed User

    I have a pie chart, how to set Title font size to 18?
     
  18. Erel

    Erel Administrator Staff Member Licensed User

  19. incendio

    incendio Well-Known Member Licensed User

    I read that, but how to pass it to map option?

    I have tried
    Code:
    Option.put ("title.fontSize",18)
    But no avail.
     
  20. Erel

    Erel Administrator Staff Member Licensed User

    Code:
    Options.Put("title", CreateMap("fontSize"18))
     
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