Simple sparkline chart with MPAndroidChart

栏目: IT技术 · 发布时间: 4年前

内容简介:If your app has anything to do with numbers there's a big chance that at some point you will need to visualize those numbers with a chart. There are many libraries for Android out there. But most of them are either not maintained anymore or don't have enou

If your app has anything to do with numbers there's a big chance that at some point you will need to visualize those numbers with a chart. There are many libraries for Android out there. But most of them are either not maintained anymore or don't have enough activity to inspire confidence about their future.

I think the most popular open-source charting library for Android is MPAndroidChart . With 31k+ stars in GitHub and quite a few questions in StackOverflow, I think it will be around for the foreseeable future. The popularity is probably due to the variety of supported chart types (line chart, bar chart, pie chart, you name it) and to the excellent (but kind of long) documentation.

There are a few other promising libraries (e.g. Spark ) but I decided to go with the flow and stick to the popular and tested choice. In this post, I will explore how to make a simple sparkline chart using MPAndroidChart. Think of it as a quick start for the library.

Setup

You would need to add a new repository in your project-level build.gradle .

repositories {
    maven { url 'https://jitpack.io' }
}
build.gradle (project)

Then add the actual dependency in your module-level build.gradle (check out the project site for the latest version ).

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}
build.gradle (app)

Viewport

After syncing, you can refer to the MPAndroidChart view in your XML.

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chartView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp" />

This will be the viewport where the chart will be drawn.

Customize viewport

For creating a sparkline, we need to customize the viewport by changing some of the default settings.

with(chartView) {
    // (1)
    axisLeft.isEnabled = false
    axisRight.isEnabled = false
    xAxis.isEnabled = false
    legend.isEnabled = false
    description.isEnabled = false

    // (2)
    setTouchEnabled(true)
    isDragEnabled = true
    setScaleEnabled(false)
    setPinchZoom(false)
}

In (1) we hide all the axis, hide the description and the legend. Necessary for every sparkline.

(Optional) In (2) we enable drag but disable all scaling, pinching, and zooming. This is needed for showing a small label when a data point in the chart is selected. The dragging is needed for allowing the selection to be changed dynamically while the finger is moving.

Dataset

The library has an Entry data type that represents a single data point in the graph. You need to convert from whatever format you hold your data, into a List<Entry> , with each entry defining an X and Y (as Float ).

val entries =
    myData.map {
        Entry(
            it.timestamp.toFloat(),
            it.value.toFloat()
        )
    }

Customize dataset

Similarly to how we customized the viewport, you can customize the dataset. Whatever you want to change in the line itself (e.g. color, width) is defined here.

val dataSet = LineDataSet(entries, "Unused label")
    it.color = Color.BLACK
    it.valueTextColor = Color.GRAY
    it.highLightColor = Color.RED
    it.setDrawValues(false)
    it.lineWidth = 1.5f
    it.isHighlightEnabled = true
    it.setDrawHighlightIndicators(false)
}

This is a sample config that sets different colors for different states, make the line thicker, and disables highlight indicators (orthogonal lines that meet at the highlighted point).

Render

Finally, set the dataset in the chart and call invalidate() . Every time you change the chart data, you would need to call this for the chart to refresh.

chartView.data = LineData(dataSet)
chartView.invalidate()

(Optional) Marker

A marker is a small "popup" view that appears when a user clicks on a data point on the graph. This is useful, especially in a sparkline with no axis and labels, to show the exact value of the data point.

The library provides all you need for this functionality. You only need to extend MarkerView to provide a layout file for your marker (i.e. the "popup" view) and the logic for updating the values.

class MyMarker(context: Context) : MarkerView(context, R.layout.my_marker) {

    override fun refreshContent(entry: Entry, highlight: Highlight) {
        super.refreshContent(entry, highlight)
        dateView.text = formatDate(entry.x.toLong())
        valueView.text = formatCurrency(entry.y.toLong())
    }
}
chartView.marker = MyMarker(context)

That's it! Now you have a simple sparkline chart with the (optional) ability to highlight some values (and works even while dragging). Happy charting!

Simple sparkline chart with MPAndroidChart

以上所述就是小编给大家介绍的《Simple sparkline chart with MPAndroidChart》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

MySQL技术内幕

MySQL技术内幕

姜承尧 / 机械工业出版社 / 2013-5 / 79.00元

《MySQL技术内幕:InnoDB存储引擎(第2版)》由国内资深MySQL专家亲自执笔,国内外多位数据库专家联袂推荐。作为国内唯一一本关于InnoDB的专著,《MySQL技术内幕:InnoDB存储引擎(第2版)》的第1版广受好评,第2版不仅针对最新的MySQL 5.6对相关内容进行了全面的补充,还根据广大读者的反馈意见对第1版中存在的不足进行了完善,《MySQL技术内幕:InnoDB存储引擎(第2......一起来看看 《MySQL技术内幕》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试