Share My Creation Charting Frameworkds: GoogleCharts, dhtmlxChart etc

The purpose of the project is to explore the different charting frameworks available for building charts using B4A. This started as http://www.b4x.com/android/forum/threads/google-charts.31240/

Currently the implementation is for Google (Online) and dhtmlxChart (Offline) charts that get rendered to the webview control. I will keep updating it based on interest and other available charting tools that can render html source code including javascript etc.

To render the dhtmlxCharts, please go to http://www.dhtmlx.com/ and download their charts framework. Add the dhtmlxchart.js and dhtmlxchart.css in your Files folder within b4a and compile. The charts will display within your device offline.

For the google maps, the scrips are online thus needing an internet connection.

Things to note:

1. Setting the width or height using percentage e.g. 100% does not work with my dhtmlxChart, thus you need to set the width using px, e.g. 320px.
2. I will find out about making the x axis text vertical.
3. An ASP.Net webform version of the charts is available here also where you can see the examples of the charts displayed. Here is the link... https://aspnetdhtmlxchartclass.codeplex.com

 

[rboeck]

Very impressive!
I tried, but didnt understand, where to change the size as noted in point 1; the size of the webview is not relevant...
Is it right, that this javascript code is useable for free without buying any product from dhtmlx.com?
And one last question: which product should/ could be used for editing javascript code?
Greetings and thank you for your work for the b4a community!
Reinhard

 

[Mashiane]

@rboeck
A1. The size of the charts is set with the .width and .height properties of the class.
A2. Please check the dhtmlx.com website for licensing issues. The classes here generate html code to render the charts with the inclusion of the js files from dhtmlx.com charts, here is the link of their charting framework. http://dhtmlx.com/docs/products/dhtmlxChart/index.shtml, and from their site this is stated, I quote, "Download and use dhtmlxChart for free under GNU GPL v2, or buy a Commercial or Enterprise License to use this component in a non-GPL project."
A3. There is a variety of javascript editors out there. You can google ones with code highlighting abilities but your normal notepad will do, you can also check notepad++ at http://notepad-plus-plus.org/

 

[Lary Yenta]

Hi Mashiane,

I looked through the demo but I could not get the DHTMLx charts to show. I looked at the source and noticed in the dhtmlxChart2 module the following 2 lines:

jsLink = "file:///android_asset/dhtmlxchart.js"
cssLink = "file:///android_asset/dhtmlxchart.css"

Should I change these to a folder that I know is present on my system?

Your help is appreciated!

Lary

 

[Mashiane]

Hi Lary, as per first post, i have stated the following, I quote again

"To render the dhtmlxCharts, please go to http://www.dhtmlx.com/ and download their charts framework. Add the dhtmlxchart.js and dhtmlxchart.css in your Files folder within b4a and compile. The charts will display within your device offline."

 

[Lary Yenta]

Hi there, Mashiane!

Thanks for the fast reply, I went to that site and downloaded the framework. However, now, their framework is called dHTMLxSuite and the two files are now named dHTMLx.js and dHTMLx.css. There is also a deprecated js file but I didn't know if you were aware of the change?

Cheers,

lary

 

[Mashiane]

Thanks Lary, I will look into the new suite and update my framework. It should not be a difficult task. Later..

 

[Lary Yenta]

No problem Mashiane!

 

[iamfanghan]

Hi there sir, would like to know if you could help on drawing this type of graph using Google Charts. Your help would be kindly appreciated.