Android Tutorial Add Charts With Google Charts Service

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.b4x.com/android/forum/threads/google-charts.31240/#post-186963

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.

 

[stef110]

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

Stef

 

[Jausa]

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.

 

[Erel]

Yes, with WebView.CaptureBitmap.

 

[stanks]

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

 

[stanks]

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

https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

or not?

thanks

 

[stanks]

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

 

[stanks]

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

 

[solfinker]

Hello.
I have troubles when changing

Spinner1.AddAll(Array As String("Bar", "Line", "Pie", "Geo"))

and

Select Value
        Case "Pie"
            CreatePieChartData(cols, rows)
            CreatePieChartOptions(options)
        Case "Bar"
            CreateBarChartData(cols, rows)
            CreateBarChartOptions(options)
        Case "Line"
            CreateLineChartData(cols, rows)
            CreateLineChartOptions(options)

into

Spinner1.AddAll(Array As String("Bar1", "Line1", "Pie1", "Geo"))

and

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

 

[Erel]

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

 

[solfinker]

 

[Erel]

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

 

[solfinker]

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.

 

[Erel]

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

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]

Thank you!

Select Value
        Case "PieWhatever"
            CreatePieChartData(cols, rows)
            CreatePieChartOptions(options)
            value2 = "Pie"
        Case "BarWhatever"
            CreateBarChartData(cols, rows)
            CreateBarChartOptions(options)
            value2 = "Bar"

html = html.Replace("$TYPE$", value2 & "Chart")

 

[incendio]

Is there any options to set, fox example, I want to draw pie chart with legend in bottom and slice text display a value (not percentage)?

Never mind, found it at https://developers.google.com/chart/interactive/docs/gallery/piechart#Configuration_Options

 

[incendio]

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

 

[Erel]

See the legend property: https://developers.google.com/chart/interactive/docs/gallery/piechart#Configuration_Options

 

[incendio]

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

I have tried

Option.put ("title.fontSize",18)

But no avail.

 

[Erel]

Options.Put("title", CreateMap("fontSize": 18))