Share My Creation Google Charts

This example shows how you can draw a googles chart on a webview. The code uses a two classes to do so. The code is quite simple and straightforwad. As you pass some properties to the class to generate the class.

Types of charts available:
  • Pie and 3D Pie chart
  • Donut
  • Map (markers not displaying??)
  • Motion Chart (not displaying yet??)
  • Bubble chart
  • Bar Chart
  • Stacked Bar
  • Gauge
  • Column Chart
  • Stacked Column
  • Combination Chart
  • Line Chart
  • Area Chart
  • Organizational Chart
  • Geo Chart - Regions
  • Geo Chart - Markers
  • Table
  • Table - Arrow Format
  • Table - Bar Format
  • Table - Number Format
  • Timelines
Ability to change series colors has been added. A color value should be a string value though.

The examples uses are similar to the Google Charts Development website. There are also a few charts to add herein. See the images for more details and the source code has all the examples via the menu.
 

Attachments

  • Screenshot_2013-07-26-17-03-32.png
    Screenshot_2013-07-26-17-03-32.png
    60.9 KB · Views: 9,193
  • Screenshot_2013-07-26-17-13-38.png
    Screenshot_2013-07-26-17-13-38.png
    79.1 KB · Views: 1,414
  • Screenshot_2013-07-27-00-10-06.png
    Screenshot_2013-07-27-00-10-06.png
    93.2 KB · Views: 1,286
  • Screenshot_2013-07-27-00-10-29.png
    Screenshot_2013-07-27-00-10-29.png
    58.3 KB · Views: 1,185
  • Screenshot_2013-07-27-00-10-46.png
    Screenshot_2013-07-27-00-10-46.png
    55 KB · Views: 1,139
  • Screenshot_2013-07-27-00-10-51.png
    Screenshot_2013-07-27-00-10-51.png
    53.7 KB · Views: 1,174
  • Screenshot_2013-07-27-00-59-33.png
    Screenshot_2013-07-27-00-59-33.png
    73.5 KB · Views: 1,195
  • Screenshot_2013-07-27-01-22-22.png
    Screenshot_2013-07-27-01-22-22.png
    63.7 KB · Views: 1,354
  • mashiane_googlecharts.zip
    23.9 KB · Views: 1,372
Last edited:

Mashiane

Expert
Licensed User
Longtime User
More charts have been added, organizational chart, area, geo with markers etc. A datatable is now used to store the values in the charts class thus, all methods have been updated to include adding columns and adding rows to the datatable using the Map object. Also the class to draw the chart has been optimised. The updated version is on the first post!
 

Paulsche

Well-Known Member
Licensed User
Longtime User
Is there a way without data connection / internet connection to use the charts?
There are many users who still have no internet flatrate.
 

Mahares

Expert
Licensed User
Longtime User
1. I would like to open the example by displaying the line chart first instead of the pizza chart. I get the following error:'lastException.java.lang.NullPointerException error
B4X:
Sub Activity_Resume
'  DrawPizzaChart
  cmdLine_Click 'lastException.java.lang.NullPointerException error
End Sub
2. How can I get vertical gridlines to show on a line chart?
3. When you type: clsGoogleChart. you get many members. Some are self explanatory and some are not. Where can I find an explanation or an example for the members that are not included in the example?
Thank you very much for your help.
 

Mashiane

Expert
Licensed User
Longtime User
@Mahares

There are a lot of examples that I have included in the code, thus when you select your device menu you are able to select and view different chart examples and the code in each chart is at times specific for that chart. Whilst some charts use the same data, just changing the chart type draws a different chart, for example, the AnyChart... sub.

Here are the responses to your question

Q1. The activity resume sub calls the DrawPizzaChart sub. The cmdLine_Click Sub calls the AnyChart(clsGoogleChart.ChartTypeEnum.LineChart) sub, so replace DrawPizzaChart with AnyChart(clsGoogleChart.ChartTypeEnum.LineChart) in your Activity_Resume sub.

Q2. I will research and find out how one can do that and post an update in case I come accross something.

Q3. In terms of members not included in the examples, you can google 'google chart visualization' or perhaps indicate to me what you would like included in the charts and I can research about how it works and include it for you when I crack it! Remember I develop and add more to this when I have time.
 

Mahares

Expert
Licensed User
Longtime User
Hi Mashiane: Thank you very much for your responses. I already tried the below but it is returning the same error: Please check it out for yourself: 'lastException.java.lang.NullPointerException error
B4X:
Sub Activity_Resume
' DrawPizzaChart
    AnyChart(clsGoogleChart.ChartTypeEnum.LineChart) 
End Sub
 

Mahares

Expert
Licensed User
Longtime User
Installing file.
** Activity (main) Pause, UserClosed = false **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
PackageAdded: package:b4a.mashiane_googlechart
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
main_activity_resume (B4A line: 1159)
AnyChart(clsGoogleChart.ChartTypeEnum.LineChart)
java.lang.NullPointerException
at b4a.mashiane_googlechart.main._activity_resume(main.java:376)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:169)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:153)
at b4a.mashiane_googlechart.main.afterFirstLayout(main.java:95)
at b4a.mashiane_googlechart.main.access$100(main.java:16)
at b4a.mashiane_googlechart.main$WaitForLayout.run(main.java:74)
at android.os.Handler.handleCallback(Handler.java:605)
at android.os.Handler.dispatchMessage(Handler.java:92)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:4424)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:511)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
at dalvik.system.NativeStart.main(Native Method)
 

Mahares

Expert
Licensed User
Longtime User
@Machiane: The project is entirely your code sample. try it for yourself and use this in the resume sub instead of the original. You will get the error:

B4X:
Sub Activity_Resume
   AnyChart(clsGoogleChart.ChartTypeEnum.LineChart) 
End Sub

I have come up with a workaround the error though by running a sub that works first. See the below workaround code I use which makes it work, but lacks logic:
B4X:
Sub Activity_Resume
   DrawGaugeChart
  AnyChart(clsGoogleChart.ChartTypeEnum.LineChart)
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
@ Mahares, thanks for pointing this out. I have checked the source code and just changed a 0 to a 1 on the series properties. The problem still persists. If you notice the code on the DrawColumnChart and AnyChart, its the same with the exception of the ChartType, however if you have AnyChart running on activity resume, it does not work but if you call DrawColumnChart it works. I also tried Calling AnyChart from DrawColumnChart without the source code but it also does not work on activity resume. I think the trick for activity resume is to call the complete method with all the source. I have updated the first post. Thanks.
 

Mahares

Expert
Licensed User
Longtime User
@machiane:
1. I was able to figure out a way to run your first program by starting the line graph without getting the line: nullpointerexception:
I added the following code to the end of the sub Activity_Create and eliminate any code in the Sub Activity_resume:
B4X:
clsGoogleChart.Initialize   'This needed to be initialized first
AnyChart(clsGoogleChart.ChartTypeEnum.LineChart)

2. I tried to read in the Google Visualisation to figure out some of the members, but was unsuccessful. For example, in the table option, when you change the background color to a different color, it does not change, but changes for the line graph.
B4X:
clsGoogleChart.BackgroundColor = "yellow"
Also the sort does not work when you click on a column in a table, the sort does not take place:
B4X:
clsGoogleChart.sortColumn = 1
If you can figure out these and other important members and give an example of each member in the class that is not selef explanatory, it will make your class extremely useful.
Thanks you for a great contribution.
 

Touch

Active Member
Licensed User
Longtime User
Hello Mashiane,
How i can change the colors axis in a chart?
Exist a documentation for the class clsGoogleChart?

Thanks
 
Top