Android Tutorial Android Charts Framework

The purpose of this framework is to allow you to easily add different types of charts to your projects.
The current version supports pie charts, line charts and bar charts.

The framework is implemented as code modules. You are free to customize the code as needed.

I also recommend you to go over the code. It demonstrates several concepts including: usage of custom types, drawings, string measurements and region clipping.

The code module is attached as part of the example project.
Questions, comments and suggestions are welcomed.

Klaus has posted a version that includes automatic scaling: http://www.b4x.com/android/forum/threads/android-charts-framework.8260/page-7#post-240181

 

[Erel]

This code doesn't support these features.

 

[GMan]

I am trying to load datas from file into the BarGraph-Routine, but i have no idea how to start.

The file lokks like this:

18.04.2013 21:34 42
21.04.2013 18:23 54
21.04.2013 22:45 54
22.04.2013 10:18 54
22.04.2013 23:17 54
23.04.2013 10:37 54

These datas i like to display in that graph, with a fixed timeline of 100 days, starting from a given date.

Normally one dataset per da is necessary.
(if more they maybe can be displayed as StackBar - but not necessary at all)


Has anyone an point of entrance how to solve this ?

 

[Erel]

First step: read the file and parse it (you can use StringUtils.LoadCSV2 with space as the separator character).

Now you should add each day with AddBarPoint. You will probably want to add empty days as well.

 

[GMan]

I read the file this way:

Dim heightlist As List
Dim heightliststring As String
heightlist = File.ReadList  (RichtigerSDKartenPfad & "lists","test.his")

(The testlist contains the data shown above.)

So, this works and when i let me show the datas in the arrays it looks like this:

(ArrayList) [18.04.2013 21:34 42,21.04.2013 18:23 54,21.04.2013 22:45 54,22.04.2013 10:18 54,22.04.2013 23:17 54,23.04.2013 10:37 54]

With this array i wil use this sample:

Dim MyArray As Int
Dim MyMap As Map
Dim MyList As List
MyMap.Initialize
MyList.Initialize
MyList = heightlist

For Each Item As Int In MyArray
    MyMap.Put(Item,"")
Next

For i = 0 To MyMap.Size-1
    MyList.Add(MyMap.GetKeyAt(i))
Next


MyList.Sort(True)

For Each Item As Int In MyList
    Log(Item)
Next

Log(MyList.Size&" Unique Entries")

But an errors occurs:
"Dim MyArray as Int .......java.lang.NumberFormatException"

So i dont can work out HOW i can place the written array in the sample code AND strip the datas into parameters for a BarChart

Mostly i can figure that out (the sample works fine) - but i have no TabHost and uses only the BarGraph on a panel (is this ok this way ?)

 

[GMan]

When i use a list , only with the last numbers, it works this way and puts the numbers to the StatListView:

Dim heightlist As List
heightlist.Initialize' ("heightlist")
Dim heightliststring As String
heightlist = File.ReadList  (RichtigerSDKartenPfad & "lists","test.his")


For Each Item As Int In heightlist
    Log(Item)
   StatListView.AddSingleLine (Item)
Next

Log(heightlist.Size&" Unique Entries")

But now i have only the height, without the needed data to diaply a bargraph...and still cant figure out how to strip the date and height datas from the array(list)

 

[Erel]

Please start a new thread with the parsing question and I'll help you there.

 

[GMan]

No, no hope - it doesn't and wouldn't work

I tried also this:

Dim Graffi As Graph
For Each Item As Int In heightlist
    Log(Item)
   StatListView.AddSingleLine (Item)
   Charts.DrawBarsChart(Graffi, heightlist ,Colors.blue)
Next

With this a long error message appears, that datas like Yaxis=Null, Yaxis=Null etc. are missing, wrong or what ever

So can you please post a simple sample code, with which i can paint one bargraph (on a panel best) with date and the height.

the splitting of the datas in date and height i can solve in another way.

I didnt found a wiki about that, otherwise i could figure it out (i think)

 

[Erel]

The x axis is just a string. So it doesn't matter whether you are adding a date or a number. There are several problems with your code. I recommend you to carefully go over the example code.

 

[GMan]

Hoi Erel,

i read the whole afternoon the docs and samples

After reading and trying i get these results:

- the graph will be displayed in the manner i want it
- the axis etc. are formatted and well displayed
- i can displayed datas, but not from my list.

Here is my additional code so far:

pnlBars.Initialize("pnlBars")
   StatBarGraphPanel.AddView(pnlBars,2,2,296,196 )
   Dim BD As BarData   
   BD.Initialize
   BD.Target = pnlBars
   BD.BarsWidth = 4dip
   BD.Stacked = False
   
   ' set the bar colors
   Charts.AddBarColor(BD, MakeTransparent(Colors.Red, 230)) '1 bar each

   ' Add the items:
   For i = 1 To heightlist.Size ' i read out the size(=amount) with "heightlist.Size"
      
   For Each Item As Int In heightlist
      Charts.AddBarPoint(BD, 1 + i, Array As Float(0,Item))
    Next
   Next

   Dim GStat As Graph
   GStat.Initialize
   GStat.Title = "Testitem1"
   GStat.XAxis = "Days"
   GStat.YAxis = "Height"
   GStat.YStart = 0                  ' min vertical scale
'   GStat.YStart = 0
   GStat.YEnd = 200                        ' max vertical scale
   GStat.YInterval = 20                  ' vertical scale divisions
   GStat.AxisColor = Colors.black
   Charts.DrawBarsChart(GStat, BD, Colors.DarkGray)

When i give an integer instead of item it works:

For i = 1 To 5

otherwise an error occurs:

"charts_drawbarchart......Invalid index 1, size is 1"

 

[GMan]

Well, figured it out.

Isnt perfect, but the bars will be displayed.
in the y-axiis legend is alwys "1" instead of the real day, but i can live with that.

 

[Harris]

Is it possible to make chart look like this?

 

[Erel]

Not with this module. You will need to manually draw it.

 

[Laurent95]

Candles in charts

Hi All,

I have worked with the charts framework and add the possibility to have candles in my project.
There are below an example, in case that's interesting for someone.
That's not a big contribution but can be a good start for do better.
That's issued from my poject who's an appwidget, you must put the widget on the screen for test it.

Best regards and enjoy it

P. S. : Erel, i hope that's the good place for put it. If it's not, forgive me, thanks.

 

[Erel]

Erel, i hope that's the good place for put it. If it's not, forgive me, thanks.

Thank you for sharing this. This is a good place. You can also post it in the "additional libraries / classes" forum.

 

[ivanomonti]

Ciao Erel, avrei bisogno di modificare la tua classe, ma ho dei problemi... in realtime dovrei vedere da un minimo di 4 canali ad un massimo di 8 o 10 simultaneamente. inoltre vorrei modificare le label y e x o metterle non visibili in quanto no e molto carino come vedi su immagine, oltre che avere la possibilità di modificare lo sfondo... mi dai qualche indicazione di massima, devo monitorare un oscilloscopio.

Erel Hello, I need to change your class, but I have problems ... Realtime should see from a minimum of 4 to a maximum of 8 channels or 10 simultaneously. I would also like to change the label put yexo not visible because no and very cute as you can see on picture, in addition to having the ability to change the background ... give me some guideline, I have to monitor an oscilloscope.

value y -10 to 10

 

[Erel]

This framework is not intended for real-time updates. It might be simpler to start with this example: http://www.b4x.com/forum/basic4android-share-your-creations/13759-oscilloscope.html#post77775

 

[CharlesR]

Redrawing 2 line graph

This framework is not intended for real-time updates. It might be simpler to start with this example: http://www.b4x.com/forum/basic4android-share-your-creations/13759-oscilloscope.html#post77775

I have integrated the 2 line graph into my project successfully using a panel, but I would like to know how to erase the current graph so that one with new values can be drawn on the same panel. Is there a simple line/lines of code which can be added to the Charts module which erases any existing data before drawing?

Many thanks

Charles

 

[klaus]

Could you post your code as a zip file ?
It would be much easier to find the best solution.
The solution would depend on how you initialize the different objects.

You could draw a rectangle with the background color on the chart panel but you must also reinitialize the line points.

But instead of imaging a possible solution it would be more efficient to do it with your code.

Best regards.

 

[CharlesR]

Could you post your code as a zip file ?
It would be much easier to find the best solution.
The solution would depend on how you initialize the different objects.

You could draw a rectangle with the background color on the chart panel but you must also reinitialize the line points.

But instead of imaging a possible solution it would be more efficient to do it with your code.

Best regards.

Hi Klaus

Thanks for helping. I am really struggling with this. The attached zip contains the program which reads 2 potentiometers on an Arduino Uno board which represent thermostats before turning the led on or off to represent a boiler. You may have to enter some simulated readings, but the sine/cosine curves from the example will work equally well. I would like the "Clear Graph" routine to clear the existing graph so a new one can be drawn. I am sure there is a simple solution but once again my lack of appreciation of Android graphics is hampering me.

Thanks in advance.

Charles

 

[klaus]

Here you are.
No change in the Graph module, the clearing is done in the main code.
The modified lines have a 'klaus comment.

Best regards.