How to Draw Financial Transactions Graph using MPAndroid Chart Library - android

I'm Trying to create a Financial transactions Graph like banks ,As shown in this Pic
When Customer Selects the Start and End Date , Graph should show the Months on XAxis and Date and Amount when transaction was done as shown by White filled circle .
I have tried examples provided by library but I wasn't able to use string labels and plot real time values !

Try using IAxisValueFormatter
final String[] months = new String[] { "Jan", "Feb", "Mar", "Apr" };
IAxisValueFormatter formatter = new IAxisValueFormatter() {
#Override
public String getFormattedValue(float value, AxisBase axis) {
return months [(int) value];
}
#Override
public int getDecimalDigits() { return 0; }
};
XAxis xAxis = mLineChart.getXAxis();
xAxis.setGranularity(1f);
xAxis.setValueFormatter(formatter);

Related

MPAndroidChart - wrong values in getFormattedValue method. Where they come from?

I am working with a project which is using MPAndroidChart library which makes me really crazy, I want to remove it.
The problem is I have created a custom ValueFormatter and I can't understand where these values come from, all are wrong.
private void setData() {
for (int i = 1; i <= 10; i++) {
Entry entry = new Entry(i, i);
values.add(entry);
}
IAxisValueFormatter valueFormatter = new myValueFormatter();
XAxis xAxis = mChart.getXAxis();
xAxis.setValueFormatter(valueFormatter);
LineDataSet set1 = new LineDataSet(values, "DataSet 1");
ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
dataSets.add(set1); // add the datasets
// create a data object with the datasets
LineData data = new LineData(dataSets);
// set data
mChart.setData(data);
}
custom formatter class:
I have an array which has 1,2,3,4,5,6,7,8,9,10 values
but I get 2,4,6,8,10 values in getFormattedValue method.
public classmyValueFormatter implements IAxisValueFormatter {
#Override
public String getFormattedValue(float value, AxisBase axis) {
System.out.println(value); //Here I get odd values where they come from I don't know.
}
}
Well, generally that's how library is written. Have a look here:
https://github.com/PhilJay/MPAndroidChart/blob/master/MPChartLib/src/main/java/com/github/mikephil/charting/renderer/XAxisRenderer.java#L205
String label = mXAxis.getValueFormatter().getFormattedValue(mXAxis.mEntries[i / 2], mXAxis);
Author's intention was probably to give more spacing between labels. If you think this is a bug, submit issue to library's repository on Github.

Drawing horizontal bar chart with `MPAndroidChart`

Does anybody have an idea on how to make this: my app image look like this: how it should be?
My question is: how to make each line of the Horizontal Bar Chart fill between the two lines?
for (Iterator<Map.Entry<String, Float>> iterator = structuredData.entrySet().iterator(); iterator.hasNext();) {
Map.Entry<String, Float> entry = iterator.next();
//i*10 => starting position of the bar
horizontalBarChartArr.add(new BarEntry((i*10), entry.getValue()));
names.add(entry.getKey());
i++;
}
XAxis xAxis = horizontalBarChart.getXAxis();
xAxis.setValueFormatter(new IAxisValueFormatter() {
#Override
public String getFormattedValue(float value, AxisBase axis) {
return names.get((int)value % names.size());
}
});
xAxis.setDrawGridLines(true);
xAxis.setDrawAxisLine(true);
BarDataSet barDataSet = new BarDataSet(horizontalBarChartArr, "Day Expenses");
barDataSet.setColors(Color.RED);
BarData data = new BarData(barDataSet);
data.setBarWidth(9f);
horizontalBarChart.setDoubleTapToZoomEnabled(false);
Description a = new Description();
a.setText("");
horizontalBarChart.setDescription(a);
horizontalBarChart.invalidate();
horizontalBarChart.animateY(1200);
horizontalBarChart.setData(data);
Check this example to your case:
https://github.com/ddanny/achartengine
It´s Automatically exported from code.google.com/p/achartengine

How to add x axis as datetime label in MPAndroidChart?

I implemented line chart (MPAndroidChart library) for temperature report in my project.In X axis datetime should be plotted and Y axis temperature should be plotted.
I just added datetime as string in X axis label but it's collapsed. So please anyone guide me.
Using version 3.0+ of the MPAndroidChart:
Set formatter to the x axis (created below):
// Formatter to adjust epoch time to readable date
lineChart.xAxis.setValueFormatter(new LineChartXAxisValueFormatter());
Create a new class LineChartXAxisValueFormatter:
public class LineChartXAxisValueFormatter extends IndexAxisValueFormatter {
#Override
public String getFormattedValue(float value) {
// Convert float value to date string
// Convert from seconds back to milliseconds to format time to show to the user
long emissionsMilliSince1970Time = ((long) value) * 1000;
// Show time in local version
Date timeMilliseconds = new Date(emissionsMilliSince1970Time);
DateFormat dateTimeFormat = DateFormat.getDateInstance(DateFormat.MEDIUM, Locale.getDefault());
return dateTimeFormat.format(timeMilliseconds);
}
}
When the entries are added to the chartDataArray they are added in seconds, not milliseconds, to avoid potential precision issues with inputting as a float (i.e. milliseconds divided by 1000).
chartDataArray.add(new Entry(secondsSince1970Float, yValueFloat));
Happy coding!
Try the following.
To set the X Axis
XAxis xAxis = mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setValueFormatter(new MyXAxisValueFormatter());
xAxis.setLabelsToSkip(0);
Create a new class MyXAxisValueFormatter implement XAxisValueFormatter
public class MyXAxisValueFormatter implements XAxisValueFormatter {
#Override
public String getXValue(String dateInMillisecons, int index, ViewPortHandler viewPortHandler) {
try {
SimpleDateFormat sdf = new SimpleDateFormat("dd MMM");
return sdf.format(new Date(Long.parseLong(dateInMillisecons)));
} catch (Exception e) {
return dateInMillisecons;
}
}
Hope this helps
Further from #Ben's answer, if you are creating BarChart, and the time span of the bar is like an hour or a day, and you are supplying with millisecond or second data, you will end up getting the bars too thin to be visible. This is a bug posted in 2017 (https://github.com/PhilJay/MPAndroidChart/issues/2892) and remains unresolved to date unfortunately.
A workaround was proposed and it is to convert the millisecond values into your time span of the bar before setting then into BarEntry. My time span is a day, so
I have the formatter as:
static class BarChartXAxisValueFormatter extends IndexAxisValueFormatter {
#Override
public String getFormattedValue(float value) {
// Convert float value to date string
// Convert from days back to milliseconds to format time to show to the user
long emissionsMilliSince1970Time = TimeUnit.DAYS.toMillis((long)value);
// Show time in local version
Date timeMilliseconds = new Date(emissionsMilliSince1970Time);
SimpleDateFormat dateTimeFormat = new SimpleDateFormat("MM-dd");
return dateTimeFormat.format(timeMilliseconds);
}
}
And I set the X axis with:
xAxis.setValueFormatter(new BarChartXAxisValueFormatter());
Then when setting the data to the bar, I have
new BarEntry(TimeUnit.MILLISECONDS.toDays((long)valX), valY).
If it still actually...
class DateAxisValueFormatter implements IAxisValueFormatter {
private String[] mValues;
SimpleDateFormat sdf = new SimpleDateFormat("yyyy.MM.dd.hh");
public DateAxisValueFormatter(String[] values) {
this.mValues = values; }
#Override
public String getFormattedValue(float value, AxisBase axis) {
// "value" represents the position of the label on the axis (x or y)
return mValues[(int) value];
}
}
And your must on Create put String[] values (public DateAxisValueFormatter(String[] values) ) where each value is a DateString.
Data series Entries for X (new Entry(forX,forY)) must be a flat array = 0,1,2,3,4
Sorry, my poor English, I am from Russia. From 1988 main chief of RealTime Control System Developer Company for Hydro Power Plants (www.asu-epro.ru).
Borodatov Michael miclosoft#mail.ru

Android - MPAndroidChart LineChart, not able to plot according to value date

I am using MPAndroidChart for my line chart.
I have date values and score values.
Example: on 11/10/2016 my score was 45.
I am struggling with the dates. Not sure how to set it in my setYAxisValues.
I am getting my values from a rest api and putting it in the graph.
This part is where i have my problem.
yVals.add(new Entry(Float.valueOf(ocd.getScore()), foo));
If I change foo to a normal int value like 1, 2, 3 I have no problem. The graph is working. The issue, i need to use dates to plot my value at the correct place.
#Override
protected void onPostExecute(List<ResultModel> result) {
super.onPostExecute(result);
//populating my yAxis with values from rest
for (ResultModel ocd : resModelList){
long unixSeconds = Long.parseLong(ocd.getPost_date());
Date date = new Date(unixSeconds*1000L);
SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy");
String formattedDate = sdf.format(date);
int foo = Integer.parseInt(formattedDate);
yVals.add(new Entry(Float.valueOf(ocd.getScore()), foo));
}
}
The X axis is working
//set vales
private ArrayList<String> setXAxisValues(){
xVals = new ArrayList<String>();
//MM/dd/yyyy
xVals.add("01/01/2016");
xVals.add("02/01/2016");
xVals.add("03/01/2016");
xVals.add("04/01/2016");
xVals.add("05/01/2016");
return xVals;
}
private ArrayList<Entry> setYAxisValues(){
yVals = new ArrayList<Entry>();
return yVals;
}
Thanks in advance
I had the similar issue, the point is - MPChart library cannot have anything but float for X axis. I'd suggest you to have X axis represented by date's millis. Suppose you have four values with dates "01/01/2016", "02/01/2016", "03/01/2016", "04/01/2016", "05/01/2016". You add values like
yVals.add(new Entry(Float.valueOf(ocd.getScore()), "01/01/2016".toMillis()));
"01/01/2016".toMillis() is pseudocode of course, you need to convert your date to int (float).
Then, set up minX as "01/01/2016".toMillis(), maxX as"04/01/2016".toMillis(),
and provide a label formater which will format this millis back to string dates:
private class LabelFormatter implements AxisValueFormatter {
private Context context;
private LabelFormatter(Context context) {
this.context = context;
}
#Override
public int getDecimalDigits() {
return -1;
}
#Override
public String getFormattedValue(float value, AxisBase axis) {
return DateUtils.formatDateTime(context, (long) value, DateUtils.FORMAT_SHOW_DATE);
}
}

MPAndroidChart adding and display bar chart label

Just started using the MPAndroidChart version 3.0.0 beta and i have created a project that can show my values in a bar chart. My question is where do i add and display labels.
Each Bar should have its own label eg. "Flue", "Cheese" etc at the bottom. Not sure what function does this, am actively searching and reading the Docs/Wiki but no joy currently.
Depending on your preferences, you can use the data property of an Entry to store the label and then return it in your IAxisValueFormatter implementation:
public class LabelValueFormatter implements IAxisValueFormatter {
private final DataSet mData;
public LabelValueFormatter(DataSet data) {
mData = data;
}
#Override
public String getFormattedValue(float value, AxisBase axis) {
// return the entry's data which represents the label
return (String) mData.getEntryForXPos(value, DataSet.Rounding.CLOSEST).getData();
}
}
This approach allows you to use the Entry constructor (or BarEntry in this case) to add the labels, which can improve the readability of your code:
ArrayList<BarEntry> entries = new ArrayList<>();
for (int i = 0; i < length; i++) {
// retrieve x-value, y-value and label
entries.add(new BarEntry(x, y, label));
}
BarDataSet dataSet = new BarDataSet(entries, "description");
BarData data = new BarData(dataSet);
mBarChart.setData(data);
mBarChart.getXAxis().setValueFormatter(new LabelValueFormatter(data));
Also check out this answer for more information and an alternative approach on using labels with the BarChart and the new 3.0.0 version of the library.

Categories

Resources