Arc Chart View (Draw Creative Statistic Arc Charts)

Overview

License APK Android Arsenal

ArcChartViewDemo

You can use this library to draw Arc charts

and show your statistics or anything you want

or maybe get some ratings from user.

you can download the Demo apk file (you can first adjust your Chart in the app and then implement it in code)

1 - Getting Started

By this instructions you can add this library and i will explain how use it.

Add Maven to your root build.gradle

First of all Add it in your root build.gradle at the end of repositories:

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Add Dependency

Add the dependency to your app build.gradle file

dependencies
{
    implementation 'com.github.imaNNeoFighT:ArcChartView:1.0.3.1'
    // Or in older versions : 
    // compile 'com.github.imaNNeoFighT:ArcChartView:1.0.3.1'
}

And then sync your gradle and take a tea .

2 - About The View

You can simply use this View like other Views in android, just add ArcChartView in your java code or xml.

View Properties

you can customize StepBarView, all of this attributes can change via xml or code (runtime)

Attribute Type Kotlin Description
acv_lines_count Integer linesCount lines count of chart (i mean arc lines), default value is 10
acv_lines_space Dimensions linesSpace lines space (lines margin), default value is 4dp
acv_lines_width Dimensions linesWidth lines width , default value is 6dp
acv_sections_count Integer sectionsCount sections count , default value is 8
acv_sections_space Dimensions sectionsSpace sections space (sections margin) , default value is 4dp
acv_mid_start_extra_offset Dimensions midStartExtraOffset center extra offest size, default value is 16dp
acv_icon_size Dimensions iconSize the icons size, default value is 32dp
acv_start_degree_offset Float startDegreeOffset offset of start degree to design the view, default value is 0f
acv_allow_setting_value_by_touch Boolean allowSettingValueByTouch disable or enable allow setting value by touch feature, default value is true
acv_allow_animations_on_set_values Boolean allowAnimationsOnSetValue disable or enable allow play animation on setting values, default value is true

Set and get Sections value

keep in mind that sections position starts with 0

to get a section value use this function

value = myArcChartView.getSectionValue(sectionPos)

and to set a section value use this function

myArcChartView.getSectionValue(sectionPos,sectionValue)

Change filled and unFilled colors

to set the unFilled color (the section color that drawn behind) use this function

myArcChartView.setFilldeColor(sectionPos, Color.BLACK)

and to set the filled color (the section color that drawn in top) use this function

myArcChartView.setUnFilldeColor(sectionPos,Color.LTGRAY)

Change section icons

to set the icons use this function

myArcChartView.setSectionIcons(sectionIcons : MutableList<Bitmap?>)

View listener (ArcListener)

you can handle some actions (only sectionsIconClick for now) just set a listener and make your logic

myArcChartView.listener = object : ArcChartView.AcvListener {
            override fun onSectionsIconClicked(sectionPos: Int) {
                //Handle Your Logic Here
                Toast.makeText(applicationContext, sectionPos.toString(),Toast.LENGTH_SHORT).show()
            }
        }

setValueByTouch (and callback)

You can set values by touch and you can disable this feature by 'acv_allow_setting_value_by_touch' attribute. Also you can set a callBack listener to find out when values changed.

myArcChartView.listener = object : ArcChartView.AcvListener {
            override fun onStartSettingSectionValue(sectionPos: Int, sectionValue: Int) {
                tvSectionsValue.setText("onStartSettingSectionValue $sectionPos $sectionValue")
            }

            override fun onContinueSettingSectionValue(sectionPos: Int, sectionValue: Int) {
                tvSectionsValue.setText("onContinueSettingSectionValue $sectionPos $sectionValue")
            }

            override fun onFinishedSettingSectionValue(sectionPos: Int, sectionValue: Int) {
                tvSectionsValue.setText("onFinishedSettingSectionValue $sectionPos $sectionValue")
            }
        }

Implementing Rotate Animation (using startDegreeOffset attribute)

    val anim = ValueAnimator.ofFloat(0f,360f).apply {
                repeatCount = ValueAnimator.INFINITE
                repeatMode = ValueAnimator.RESTART
                interpolator = OvershootInterpolator()
                duration = 3000
            }
            anim.addUpdateListener {
                if(isAnimating)
                    myArcChartView.startDegreeOffset =
                            it.animatedValue as Float
            }
            anim.start()

3 - Some Samples

Sample 1

    <com.neo.arcchartview.ArcChartView
        android:id="@+id/arc_chart_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/view_separator"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:acv_lines_count="10"
        app:acv_lines_width="6dp"
        app:acv_lines_space="4dp"
        app:acv_sections_count="8"
        app:acv_sections_space="2dp"
        app:acv_icon_size="32dp"
        app:acv_mid_start_extra_offset="12dp"
        />

Sample 2

    <com.neo.arcchartview.ArcChartView
        android:id="@+id/arc_chart_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/view_separator"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:acv_lines_count="4"
        app:acv_lines_width="17dp"
        app:acv_lines_space="2dp"
        app:acv_sections_count="3"
        app:acv_sections_space="6dp"
        app:acv_icon_size="36dp"
        app:acv_mid_start_extra_offset="0dp"
        />

Sample 3

    <com.neo.arcchartview.ArcChartView
        android:id="@+id/arc_chart_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/view_separator"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:acv_lines_count="6"
        app:acv_lines_width="14dp"
        app:acv_lines_space="0dp"
        app:acv_sections_count="18"
        app:acv_sections_space="0dp"
        app:acv_icon_size="14dp"
        app:acv_mid_start_extra_offset="8dp"
        />

Sample 4

    myArcChartView.allowAnimationsOnSetValue = true 

License

Copyright 2018 Iman Khoshabi

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
A basic chart written by kotlin. Support animation loading, touch event monitoring and JSON data.
A basic chart written by kotlin. Support animation loading, touch event monitoring and JSON data.

A basic chart written by kotlin. Support animation loading, touch event monitoring and JSON data.

ChartPOC - Chart POC-Android
ChartPOC - Chart POC-Android

ChartPOC Chart POC-Android Time Frame Bar Chart Component To use the component j

An Elementary Chart library for Jetpack Compose
An Elementary Chart library for Jetpack Compose

Charty : Elementary Chart library for Compose Chart Library built using Jetpack Compose and is highly customizable. Updates coming soon! Made with โค๏ธ

A powerful ๐Ÿš€ Android range bar chart library as well as scaling, panning and animations.
A powerful ๐Ÿš€ Android range bar chart library as well as scaling, panning and animations.

RangeBarChart โšก Range bar chart library for Android using MPAndroidChart โšก There were no charts in MPAndroidChart to show ranges. We were forced to sh

Android Library to rapidly develop attractive and insightful charts in android applications.
Android Library to rapidly develop attractive and insightful charts in android applications.

williamchart Williamchart is an Android Library to rapidly implement attractive and insightful charts in android applications. Note: WilliamChart v3 h

An easy-to-use Android charts library with animation.
An easy-to-use Android charts library with animation.

AndroidCharts A simple Android charts library. Known Uses in Pomotodo Including in Your Project Eclipse Import /AndroidCharts folder. Move /java folde

TChart - Simple and fast charts.
TChart - Simple and fast charts.

TChart - Simple and fast charts.

YBKChart is a library of 3D graphics charts for Android. ๐Ÿ“Š
YBKChart is a library of 3D graphics charts for Android. ๐Ÿ“Š

YBKChart is a library of 3D graphics charts for Android. ๐Ÿ“Š For more information, see the Wiki. Chart List Pie Chart Download Use gradle. rep

Library for charts in android with animations
Library for charts in android with animations

Charts Gradle Setup Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories: allprojects {

Comments
  • setAllowSettingValueByTouch disabled icon touch event

    setAllowSettingValueByTouch disabled icon touch event

    I would like to get icon touch event callback and disable setting value by touch. This is my code

    arcChartView.setListener(new ArcChartView.AcvListener() {
                @Override
                public void onSectionsIconClicked(int i) {
                    String[] displayTextArray = activity.getResources().getStringArray(R.array.radar_plot_icon_label_array);
                    Toast.makeText(activity, displayTextArray[i], Toast.LENGTH_SHORT).show();
                }
    
                @Override
                public void onStartSettingSectionValue(int i, int i1) {
    
                }
    
                @Override
                public void onContinueSettingSectionValue(int i, int i1) {
    
                }
    
                @Override
                public void onFinishedSettingSectionValue(int i, int i1) {
    
                }
            });
    arcChartView.setAllowSettingValueByTouch(false);
    

    However, arcChartView.setAllowSettingValueByTouch(false) will remove icon touch event callback.

    opened by NoelChew 2
  • Text instead of Bitmaps

    Text instead of Bitmaps

    Hi, thanks so much for your library. It really helps me out. I will create a dart board with it to show the hit quotas for the different targets around the board. However, as you see in the Screenshots, I need to show numbers instead of bitmap icons around the chart. Could you add a simple feature to add texts instead of bitmaps?

    Thanks a lot, Niko

    Screenshot_20201220-232656_Dart Pro Training Sheet

    opened by NikoBoerger 1
  • Library adds and light modifiations

    Library adds and light modifiations

    Hi, I add a defaultTouchlistener to your arcChart so we can directly change the value with the chart. I also added kind of a limiter if for example we want a maximum of N filled bar considering all the sections.

    /** Commit comments : Adding a DefaultTouchListener so seekbar not needed anymore out of the box (can be ameliorate somehow). Adding a counter/limiter showing in the middle Rename some methods **/ Hope it helps.

    See you

    opened by FoxXav 1
  • Class Cast Exception on ArcChartView.kt line 698

    Class Cast Exception on ArcChartView.kt line 698

    Caused by java.lang.ClassCastException: java.lang.Object[] cannot be cast to java.lang.Integer[] at com.neo.arcchartview.ArcChartView$SavedState.(ArcChartView.kt:698) at com.neo.arcchartview.ArcChartView$SavedState$CREATOR.createFromParcel(ArcChartView.kt:665) at com.neo.arcchartview.ArcChartView$SavedState$CREATOR.createFromParcel(ArcChartView.kt:664) at android.os.Parcel.readParcelable(Parcel.java:2777) at android.os.Parcel.readValue(Parcel.java:2671) at android.os.Parcel.readSparseArrayInternal(Parcel.java:3126) at android.os.Parcel.readSparseArray(Parcel.java:2354) at android.os.Parcel.readValue(Parcel.java:2728) at android.os.Parcel.readArrayMapInternal(Parcel.java:3045) at android.os.BaseBundle.initializeFromParcelLocked(BaseBundle.java:288) at android.os.BaseBundle.unparcel(BaseBundle.java:232) at android.os.Bundle.getSparseParcelableArray(Bundle.java:1010)

    on Mi 8 (android v9), Redmi 5 plus (android v8.1.0)

    opened by NyiNyiLin 1
Releases(1.0.3.1)
Owner
Iman khoshabi
Flutter Developer
Iman khoshabi
Open-source native Android graph/chart framework includes line chart,stick chart,candlestick chart,pie chart,spider-web chart etc.

Welcome to Android-Charts Welcome to Android-Charts project page on github.com. We just moved from Google Code. Android-Charts is an open-source andro

limc.cn 812 Nov 11, 2022
AnyChart Android Chart is an amazing data visualization library for easily creating interactive charts in Android apps. It runs on API 19+ (Android 4.4) and features dozens of built-in chart types.

AnyChart for Android AnyChart Android Charts is an amazing data visualization library for easily creating interactive charts in Android apps. It runs

AnyChart 2k Nov 18, 2022
Jetpack-linear-chart - A simple way to draw linear chart using Jetpack Compose

jetpack-linear-chart A simple way to draw linear chart using Jetpack Compose We

Bruno Gabriel dos Santos 7 Sep 4, 2022
A powerful ๐Ÿš€ Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

โšก A powerful & easy to use chart library for Android โšก Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Philipp Jahoda 35.8k Nov 28, 2022
Charts/graphs library for Android compatible with API 8+, several chart types with support for scaling, scrolling and animations

HelloCharts for Android Charting library for Android compatible with API 8+(Android 2.2). Works best when hardware acceleration is available, so API 1

Leszek Wach 7.3k Nov 23, 2022
Straiberry Charts - An awesome Chart library for android

Straiberry Charts An awesome Chart library for android Straiberry ยท Report Bug ยท Request Feature Getting Started Adding dependecies Add it in your roo

StrAIberry 28 Oct 24, 2022
Android library for drawing Pie charts and Donut charts with the ability to customize almost anything in it.

A Pie/Donut*/Ring chart for Android, customizable to the most extent possible. For tutorial and examples refer to the website. build.gradle[.kts] impl

Mahdi Hosseinzadeh 20 Nov 18, 2022
An open source library used to draw charts in Android with Jetpack Compose with a simple and easy to use

android-compose-charts This is an open source library used to draw charts in Android with Jetpack Compose with a simple and easy to use. Just couples

Mahmoud Ibrahim 16 Sep 23, 2022
An Android chart and graph library

EazeGraph EazeGraph is an Android library for creating beautiful and fancy charts. Its main goal was to create a lighweight library which is easy to u

Paul Cech 1.6k Nov 28, 2022
Simple Line, Circle, Bar chart for Android

SimpleChart Simple Line, Circle, Bar chart for Android LineChart <com.aghajari.simplechart.LineChart android:id="@+id/line_chart" android:layo

AmirHosseinAghajari 5 Jul 28, 2022