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.

 

[Mashiane]

@Lin

I'm sorry I dont understand your question. Can you please be more explicit so that I can help you solve this?

 

[Mashiane]

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]

Thanks, good job

 

[Mashiane]

Added...

• Table
• Table - Arrow Format
• Table - Bar Format
• Table - Number Format and
• Timelines

 

[Paulsche]

Is there a way without data connection / internet connection to use the charts?
There are many users who still have no internet flatrate.

 

[Mashiane]

Added Donut, Map (markers not displaying though???) and MotionChart (not displaying but source code fine, perhaps a flash issue). You can now change the color of a series. At Paulsche, unfotunately Terms of Use from Google disallows distribution.

 

[Mahares]

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

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]

@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]

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

Sub Activity_Resume
' DrawPizzaChart
    AnyChart(clsGoogleChart.ChartTypeEnum.LineChart) 
End Sub

 

[Mashiane]

@Mahares

Please can you post your screen dump of the error. Maybe if I see that I can be able to detect where the problem is.

 

[Mahares]

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)

 

[Mashiane]

I assume that you are reading your data from a database to draw the chart. if so, check if any returned value is null and handle that in code, or else please email me your code to anele@mbangas.com so that I can run from my side and try and detect your error.

 

[Mashiane]

On another note, is the code you are running the exact downloaded source code from this post or your own version?

 

[Mahares]

@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:

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:

Sub Activity_Resume
   DrawGaugeChart
  AnyChart(clsGoogleChart.ChartTypeEnum.LineChart)
End Sub

 

[Mashiane]

@ 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]

@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:

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.

clsGoogleChart.BackgroundColor = "yellow"

Also the sort does not work when you click on a column in a table, the sort does not take place:

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.

 

[Mashiane]

@ Mahares
Thanks a lot for your feedback, very much appreciated. I have updated the code and updated the first post. The error was due to some classes not initialized first. This has been corrected.

 

[Mashiane]

You might find this interesting too... http://www.b4x.com/android/forum/threads/charting-frameworkds-googlecharts-dhtmlxchart-etc.33279/

 

[Touch]

Hello Mashiane,
How i can change the colors axis in a chart?
Exist a documentation for the class clsGoogleChart?

Thanks