FORUMS
Remove All Ads from XDA

[Library] HelloCharts - charting library for Android Api 8+

19 posts
Thanks Meter: 25
 
By lech0, Junior Member on 13th October 2014, 06:51 PM
Post Reply Email Thread
Hi Xda, I've been working on this library for past few months. At last I managed to finish most of functionality and I would like to share it with you. I would like to see what you think about it and I hope someone will will find it useful.
Library is based on InteractiveChartView sample available on Google Developers page: http://developer.android.com/trainin...res/scale.html

Github project page: http://github.com/lecho/hellocharts-android
Apache License 2.0.

Features:
- Line chart
- Column chart
- Pie chart
- Bubble chart
- Combo chart
- Preview charts(for column chart and line chart)
- Zoom(pinch to zoom, double tap zoom), scroll and fling
- Custom and auto-generated axes
- Animations

Few screens from demo application:

Temp/Height chart example

Line/Column chart dependecy

Preview column chart

Pie chart

Basic usage:
Every chart view can be defined in layout xml file:
Code:
    <lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
or created in code and added to layout later:
Code:
    LineChartView chart = new LineChartView(context);
    layout.addView(chart);
Every chart has its own method to set chart data and its own data model, example for line chart:
Code:
    List<PointValue> values = new ArrayList<PointValue>(numValues);
    values.add(new PointValue(0, 2));
    values.add(new PointValue(1, 4));
    values.add(new PointValue(2, 3));
    values.add(new PointValue(3, 4));

    Line line = new Line(values).setColor(Color.Blue).setCubic(true);
    List<Line> lines = new ArrayList<Line>(1);
    lines.add(line);

    LineChartData data = new LineChartData();
    data.setLines(lines);

    LineChartView chart = new LineChartView(context);
    chart.setLineChartData(data);
The Following 13 Users Say Thank You to lech0 For This Useful Post: [ View ] Gift lech0 Ad-Free
 
 
15th October 2014, 08:31 AM |#2  
Recognized Developer
Thanks Meter: 680
 
Donate to Me
More
Hello,

Your work seems great !

I will try your library when I will need charts in my next applications and I will make you a feedback .

Sylvain
The Following User Says Thank You to sylsau For This Useful Post: [ View ]
15th October 2014, 11:42 AM |#3  
SaschaHa's Avatar
Senior Member
Thanks Meter: 1,787
 
More
This charts look awesome! Maybe I try to use it in my math app anytime
15th October 2014, 01:16 PM |#4  
daksh143's Avatar
Senior Member
Flag Mumbai
Thanks Meter: 56
 
More
Congratulations..!
You are on portal now...
Congratulations.!
By the way nice Work...Thanks for sharing.
Keep coming like this..
15th October 2014, 03:26 PM |#5  
Junior Member
Thanks Meter: 5
 
More
So beautiful!
Thx
15th October 2014, 04:54 PM |#6  
OP Junior Member
Thanks Meter: 25
 
More
Wow, thanks, really nice to see that you like it
The Following User Says Thank You to lech0 For This Useful Post: [ View ] Gift lech0 Ad-Free
18th October 2014, 04:07 PM |#7  
Junior Member
Thanks Meter: 2
 
More
Hi,
After doing some research about charting lib on the internet, I decide to use your lib on my project. Thank you for your work.
On my project, I want to implement time series on X axis. And the gap between time nodes may be different.
Here's a sample:
flickr.com/photos/[email protected]/15540381266/in/photostream/lightbox
18th October 2014, 05:19 PM |#8  
OP Junior Member
Thanks Meter: 25
 
More
Hi,
I'm glad you noticed this library. .

Quote:

On my project, I want to implement time series on X axis. And the gap between time nodes may be different.

That should be possible to do with HelloCharts. Auto-generated axis tries to keep gaps between axis values equal so for this problem custom axis will be needed. You can pass to custom axis list of AxisValues with values that represents some date or time(for example each AxisValue could hold day number). To define axis labels use AxisValue.setLabel() or AxisValue.setFormatter() methods.
You may need to use method Axis.setMaxLabelChars() to define how much space should be taken by single label. Unfortunately if label is longer than maxLabelCharts it will not be truncated.

Sample code:
Code:
List<AxisValue> axisValues = new ArrayList<AxisValues>();
//fill list with your custom values

//Create new Axis with your custom values
Axis axis = new Axis(values);

//optionaly set max characters for axis labels
axis.setMaxLabelChars(4);

//set axis as bottom horizontal axis
chartData.setAxisXBottom(axis);
The Following User Says Thank You to lech0 For This Useful Post: [ View ] Gift lech0 Ad-Free
20th October 2014, 08:47 AM |#9  
Junior Member
Thanks Meter: 2
 
More
That's great to hear it. Okay I'll try to do it as u said.
Thanks for your help.
21st October 2014, 04:12 PM |#10  
Junior Member
Thanks Meter: 2
 
More
Can I ask u sth?
1. Is it able to swipe the chart to right/left if the X axis is too long ?
2. Is it able to break line in X axis value? (Ex: 15:00\n12.Oct) ?
3. How to use value formatter?
Thanks in advance.
21st October 2014, 05:31 PM |#11  
OP Junior Member
Thanks Meter: 25
 
More
Quote:

1. Is it able to swipe the chart to right/left if the X axis is too long ?

Yes, for example if you have chart with X values from 0 to 100 you can configure viewport to show values only from 0 to 50, and user will have to scroll/fling to see rest of that chart.
Code:
//create chart view and set chart data
//now configure viewport
Viewport v = new Viewport(chart.getMaximumViewport());
v.left = 0;
v.right = 50;
//chart.setMaximumViewport(v); //Sorry!, that was mistake, you don't have to change maximum viewport in this case.
chart.setCurrentViewport(v, false);
Quote:

2. Is it able to break line in X axis value? (Ex: 15:00\n12.Oct) ?

Unfortunately for now not, text measurement and wrapping is slow and problematic so I decided to not do that.

Quote:

3. How to use value formatter?

If you need your own formatter(you have some logic that decides what label should be displayed) , create class that implements ValueFormatter interface or extends SimpleValueFormatter, for example look at HeightValueFormater class in SpeedChartActivity.java file in samples project(available on github).

If you need to display some numbers with text SimpleValueFormatter should be enough:
Code:
//Example of SimpleValueFormatter usage that displays Foo<some_number>Bar on X axis
//first parameter means how many digits after comma should be visible
ValueFormatter formatter = new SimpleValueFormatter(1, false, "Foo".toCharArray(), "Bar".toCharArray());
Axis xAxis = new Axis(someValues);
xAxis.setFormatter(formatter )
The Following User Says Thank You to lech0 For This Useful Post: [ View ] Gift lech0 Ad-Free
Post Reply Subscribe to Thread

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes