bmarrdev / android-decoview-charting Goto Github PK
View Code? Open in Web Editor NEWDecoView: Android arc based animated charting library
License: Apache License 2.0
DecoView: Android arc based animated charting library
License: Apache License 2.0
Is there a way to get last index color of chart?
I've noticed a problem when comparing the charts on different screen sizes. While the line width might look perfect on one phone, if you use a phone with a smaller screen size the line width looks too thick.
If you use addEdgeDetail() with a value different from 0.5f (for example 0.2f), it works fine only if setShowPointWhenEmpty(false) is set. Otherwise it keeps on drawing edge detail with 0.5f value.
This works correctly:
SeriesItem seriesItem1 = new SeriesItem.Builder(Color.argb(255, 64, 196, 0))
.setRange(0, 100, 0)
.setInitialVisibility(false)
.setLineWidth(32f)
.addEdgeDetail(new EdgeDetail(EdgeDetail.EdgeType.EDGE_OUTER, Color.parseColor("#22000000"), 0.2f))
.setShowPointWhenEmpty(false)
.build();
This draws a edge detail of 0.5f, instead of 0.2f:
SeriesItem seriesItem1 = new SeriesItem.Builder(Color.argb(255, 64, 196, 0))
.setRange(0, 100, 0)
.setInitialVisibility(false)
.setLineWidth(32f)
.addEdgeDetail(new EdgeDetail(EdgeDetail.EdgeType.EDGE_OUTER, Color.parseColor("#22000000"), 0.2f))
.build();
Change the minSdkVersion
API level to 8 and ensure compatibility back to this API version. This should be changed both in the gradle file for the library and the sample app.
Note: Current minimum API supported for the library is 10.
Hi,
I have a series having setDrawAsPoint(true)
and a label attached. But the label stays in the middle of the arch. Here is an example:
I have 5 series (3 for the red-yellow-greed background, 1 for the target (the gray point), and 1 for the real value). As you can see, the point series is in the right, but the attached label is on the left, in the middle of the arch that will be drawn if the series was not drawn as a point.
It would be great if the label was just next to the point.
How to draw the line path along with the text as mentioned in below picture!
Any heads up on this would be really helpful for me. Thanks in advance.
See the Sample Image in below link
Hello,
I'm trying to add labels to my Decoview, one at 0%, the other at 100% so they must be drawn at the extremities of the chart and I can't figure out how to do it.
Is there a method like getStartCapPoint(), getEndCapPoint()
Any thoughts ?
Hi,
I have use decoview within the fragment, then i minimized the application, decoview gets hide.
Please help me!
First of all not sure if this is the right place to place feature requests, anyway if would be nice if you could add some sort of functionality to stop the view from expanding the full height or width.
So when recalcLayout is called it would draw a square with the lowest of the width/height.
It would help with placing content below the DecoView without having to alignParentBottom.
Thanks
Hey there. Cool library. Unfortunately, I cannot use it, as your Android Manifest contains "allowBackup" and "label" attrs, which conflict with the ones in our app. Now don't worry, this is mainly caused by an issue in the gradle Manifest Merger, as it doesn't accept the replace function for replacing those attrs.
However, until the issue inside gradle is fixed, could you push a build with those attrs removed so that we can use your library? I hardly think a library needs the allowBackup attr, even the label one.
I've had a request to have a concave endcap at the start of a data series, and a convex endcap at the end of the series. I've only been able to approximate such a thing by adding another series at the top layer, which just draws a dot, a little larger than the main data series width. Then I show and hide that layer at times when I know the data will overlap. This doesn't really work very well, as you can see below:
The area between about 92% and 100% is pretty much undefined. If I remove the grey circle, the endcap of the start of the data series shows, and looks odd.
I'm considering forking this repository to add this alternate endcap style, but thought I'd ask first in case there was another way this could be achieved in the library that I haven't discovered yet.
When i show fragment with DecoView with simple animation for the first time, CPU load in android monitor jumps to 25%. I think, it is normal, but CPU load doesn't drop down after DecoView animation has canceled. On the contrary, CPU load continues to grow.
Hello, what is the best way to update the series positions manually? I have to update them very regularly but the bars series stop very quickly to move forward (Screen seems blocked). Should not we stop one event before starting another? Here is the code that creates the events, this method is called every second between 50 and 100 times.
`override fun updateGetCount(progress: Int, total: Int, percent: Float) {
Timber.i("SyncService: $progress : $percent %")
mPercent = percent.toInt()
if (total != 0) {
when {
percent <= 15 -> {
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries1Index).setDuration(1).build())
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries2Index).setDuration(1).build())
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries3Index).setDuration(1).build())
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries4Index).setDuration(1).build())
}
percent <= 25 -> {
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries2Index).setDuration(1).build())
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries3Index).setDuration(1).build())
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries4Index).setDuration(1).build())
}
percent <= 70 -> {
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries3Index).setDuration(1).build())
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries4Index).setDuration(1).build())
}
else -> {
mArcView.addEvent(DecoEvent.Builder(percent).setIndex(mSeries4Index).setDuration(1).build())
}
}
}
}`
Hi, I tried to open the project and tweak the position of the label so it can follow the position of the end of each seriesitem. currently, it will follow the middle position and located in the middle.
I think this code affected the position, but still not sure how I can achieve what I need:
public RectF draw(@NonNull Canvas canvas, @NonNull RectF rect,
float percentAngle, float percentComplete, float positionValue) {
if (!mVisible) {
return null;
}
float radius = rect.width() / 2;
float radians = ((360f * percentAngle)-90) * (float) (Math.PI / 180f);
float xVal = (float) Math.cos(radians) * radius + rect.centerX();
float yVal = (float) Math.sin(radians) * radius + rect.centerY();
final float halfWidth = (mTextBounds.width() / 2) + mBufferX;
final float halfHeight = (mTextBounds.height() / 2) + mBufferY;
if (0 > xVal - halfWidth) {
xVal = halfWidth;
}
if (canvas.getWidth() < xVal + halfWidth) {
xVal = canvas.getWidth() - halfWidth;
}
if (0 > yVal - halfHeight) {
yVal = halfHeight;
}
if (canvas.getHeight() < yVal + halfHeight) {
yVal = canvas.getHeight() - halfHeight;
}
mTextDraw.set(xVal - halfWidth,
yVal - halfHeight,
xVal + halfWidth,
yVal + halfHeight);
canvas.drawRoundRect(
mTextDraw,
10f, 10f, mPaintBack);
yVal -= mTextCenter;
canvas.drawText(getDisplayString(percentComplete, positionValue), xVal, yVal, mPaintText);
return mTextDraw;
}
here's illustration what I want to achieve:
thank you
I wish to use the same progress bar but need to show it in a gradient. Is there a way to show gradient
Is it possible to add a SeriesItem that reaches for example from 25% to 50%, without having to overdraw the first 25%?
Hi
I am working with the DecoView library and am wondering how to work with only one of the charts?
And also, can the chart be generated by data in my application and not just set figures?
So there are 2 Series that I'm using with the DecoView, one as the background with light gray, which represents the total amount, and a 2nd one with blue, which overlaps the first one, which represents a partial amount. I've set the line width on both as follows:
.setLineWidth(32f)
Then I animate them as follows:
mDecoView.addEvent(new DecoEvent.Builder(DecoEvent.EventType.EVENT_SHOW, true) .setDelay(500) .setDuration(500) .build()); // reveal the background series mDecoView.addEvent(new DecoEvent.Builder(percentage).setIndex(seriesIndex).setDelay(1000).setDuration(2000).build()); // animate the blue series
Now, most of the times, this works like a charm, the blue series overlaps the gray one perfectly, as you'd expect. However, when the animation (2nd one) is cut off (for example, hitting the home button as soon as the animation starts), when coming back to the app, the blue series line width is changed and is not the same as the grey series anymore, like you can see in the attached screenshot.
Any idea what can be causing this?
Is it possible to set a specific height/width to the arc.
I am looking for a semi circle pie (180degrees) but when setting the height to a specific value the arc height takes only 50% of the view height.
Is there an option to set the width/height of the canvas that will contain the pie?
If not at least will it be possible to clip the un-needed excess empty area from the view?
Also is it possible to add range labels as in the next image?
The decoview misbehaves within a RecyclerView , the same view gets repeated without creating a new object for the viewholder.
Hi there,
I've been using this awesome library more than a year in my app, I'm really happy with current setup except one thing.
The series item animation stops when i scroll recyclerview fast before the series animation begin. Meaning the item fill animation stops at one point. Series fill animation code inside viewholder.
Why is this happening recycler adapter skips the viewholder series animation method?
Please suggest a solution.
Thanks!
Hi,
I am integrating you library in my project and I am facing one issue is that : chart is recreated many time like in recursive. I want to show chart will show one time and it will not get hide. I have remove the code
decoView.addEvent(new DecoEvent.Builder(EventType.EVENT_HIDE, false)
.setIndex(mBackIndex)
.setDelay(100)
.setDuration(9000)
.setListener(new DecoEvent.ExecuteEventListener() {
@OverRide
public void onEventStart(DecoEvent event) {
}
@Override
public void onEventEnd(DecoEvent event) {
// decoView.setVisibility(View.VISIBLE);
// createTracks();
// setupEvents();
}
})
.build());
Above code recreate the track and event, So I just comment out.
Please help me and resolve my issue asap.
Thanks!
Hello,
Is it possible somehow to create a rectangular chart instead of circular?
Error:Execution failed for task ':app:transformResourcesWithMergeJavaResForDebug'. > com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK META-INF/maven/com.nineoldandroids/library/pom.properties File1: C:\Users\Hassan.gradle\caches\modules-2\files-2.1\com.nineoldandroids\library\2.4.0\e9b63380f3a242dbdbf103a2355ad7e43bad17cb\library-2.4.0.jar File2: C:\Users\Hassan\AndroidStudioProjects\excel2016\app\build\intermediates\exploded-aar\com.specyci\residemenu\1.6\jars\libs\nineoldandroids-library-2.4.0.jar
Hi, please i want to know how to display the current value at the center of the circle. Do i have to add a textview to my layout? And if yes, how to make it to appear at the center of the circle. Thank you
Is it possible to set shadow or elevation for SeriesItem
?
Using more than one library, may cause error: "Attribute has already been defined" .
Could you mind use prefix for attributes ?
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.