Skip to content

A Graph library which can leverage missing data points with dotted lines!

License

Notifications You must be signed in to change notification settings

postmates/sparkles-android

Repository files navigation

Now Archived and Forked

sparkles-android will not be maintained in this repository going forward. Please use, create issues on, and make PRs to the fork of sparkles-android located here.

built with ♥

Sparkles

A custom Graphing library which can leverage missing data points with dotted lines!

Adding Dependencies

Add this in your root build.gradle file (and not your module build.gradle file):

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

Add this to your app module's build.gradle file (make sure the version matches the JitPack badge above):

dependencies {
	...
	implementation "com.github.postmates:sparkles-android:${sparklesVersion}"
	...
}

Usage

1. Import in your xml layout:

        <com.postmates.android.sparkles.widget.line.SparklesLineView
            xmlns:sparkles="http://schemas.android.com/apk/res-auto"                                                         
            android:id="@+id/sparkles_line_graph"
            android:layout_width="match_parent"
            android:layout_height="@dimen/graph_height"
            ...  
            <!-- customize it -->                                                       
            sparkles:pm_sparkles_animationType="translate_up"
            sparkles:pm_sparkles_lineColor="@android:color/white"
            sparkles:pm_sparkles_lineWidth="2dp"
            sparkles:pm_sparkles_baseLineColor="@android:color/gray"
            sparkles:pm_sparkles_baseLineWidth="1dp"
            sparkles:pm_sparkles_fillOpacityPercent="50"
            sparkles:pm_sparkles_shouldFill="true" />

2. In your Activity:

Kotlin:

        sparklesAdapter = SparklesAdapter()
        sparklesAdapter.setInput(..)
        sparklesGraphView.adapter = sparklesAdapter

Java:

        sparklesGraphView = findViewById(R.id.sparkles_line_graph);
        SparklesAdapter adapter = new SparklesAdapter();
        adapter.setInput(..);
        sparklesGraphView.setAdapter(adapter);

3. Adapter Input:

4. Dynamic Runtime Changes:

To update your graph input (just call setInput on adapter with the new values):

Kotlin:

    sparklesAdapter.setInput(..)

Java:

    sparklesAdapter.setInput(..);

To update your graph style:

Kotlin:

        sparklesGraphView.apply {
            lineColor = ContextCompat.getColor(context, R.color.primary)
            lineWidth = resources.getDimension(R.dimen.graph_line_width)
            baseLineColor = ContextCompat.getColor(context, R.color.accent)
            baseLineWidth = resources.getDimension(R.dimen.graph_base_line_width)
            animationType = AnimationType.TRANSLATE_UP | AnimationType.LINE_PATH
            fillOpacityPercent = resources.getInteger(R.integer.fill_percent)
            shouldFill = true | false
        }

Java:

        sparklesGraphView.setLineColor(ContextCompat.getColor(this, R.color.primary));
        sparklesGraphView.setLineWidth(getResources().getDimension(R.dimen.graph_line_width));
        sparklesGraphView.setBaseLineColor(ContextCompat.getColor(this, R.color.accent));
        sparklesGraphView.setBaseLineWidth(getResources().getDimension(R.dimen.graph_base_line_width));
        sparklesGraphView.setAnimationType(AnimationType.TRANSLATE_UP | AnimationType.LINE_PATH);
        sparklesGraphView.setFillOpacityPercent(getResources().getInteger(R.integer.fill_percent));
        sparklesGraphView.setShouldFill(true | false);

GIF

Demo GIF

Screenshots

Screenshot 1 Screenshot 2