I am working on designing a Line chart using the MPAndroidChart library. in that chart, the "points labels" should be removed or suppressed, and once we click that point circle the marker should be displayed. However, right now it displays the point labels on each point circle, so what I need is to show the point in the marker only once it is clicked. Also, while I've tried to customize the chart the Y-axis points are displayed as float; I have tried to display them as int but that won't work.
How can I fix this?
I found the answer at last. We have to add set1.setDrawValues(false); in LineDataSet value properties. This will make the changes, as the points are not displayed.
LineDataSet set1 = new LineDataSet(yVals1, "");
set1.setDrawValues(false);
ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();
dataSets.add(set1); // add the datasets
If you want to keep the value but remove the Label (as it may already exist in the legend) the do mChart.setDrawEntryLabels(false);
i use this it worked for me
dataSet.setValueFormatter(new DefaultAxisValueFormatter(0));
or
dataSet.setValueFormatter(new DefaultValueFormatter(0));
hope this help you
Set the value of the text size to 0f, and this would accomplish what you wanted
set1.setValueTextSize(0f);
Related
I'm currently working on a project using MPAndroidChart and i want to make a LineChart to represent data per hour. I need this chart to have gradient line depending on values on yAxis.
eg. In the graph above i want the line to change the color when yAxis values are >50.
I didn't find any solution to my problem, so any suggestions or examples are welcome
I've recently had to face the exact same problem, and the solution was to define a linear gradient and apply it as a shader, like this:
(Warning: You'll notice that the code looks funny, and that is because it is xamarin code (i.e: C#, not java nor kotlin), but you'll be able to translate it easily, mostly you have to change the PascalCase for camelCase, and change some properties into setters and getter or vice versa, just use your IDE's intellisense)
[set your line chart, add the dataset, etc]
...
var gradient = new LinearGradient(0f, 0f, 0f, 100f,
[your first color], [your second color],
Shader.TileMode.Clamp);
var paint = vh.Chart.Renderer.PaintRender;
paint.SetShader(gradient);
...
[set axis, labels, grid, etc]
...
lineChart.Invalidate(); //this is to refresh the chart on the screen, you may need it or not depending on your code
In the code above you just have to add your colors, and you may want to change the gradient direction (I'm using a vertical gradient here) by changing the 4 first floats when creating the linearGradient. One typical change is to set the y0 = 0 and y1 = the height of your chart, for example. You have to play with the values according to your layout.
The result for this code is something like:
Of course, I'm showing it with a repeated sample dataset, that's why you are seeing two cards with the same line.
UPDATE:
I understand what you want to achieve, and with the code above you can do it. You will need some calculations, of course, but you can set the "trigger" where the color starts to change at any Y coordinate you want.
For example, in this first picture, I've used the coordinates 0,0,0,100
(Please keep in mind that I'm showing you the last value in dp, but in the real code I am translating it to the equivalent in pixels according to the device's resolution. It is roughly the height of my chart)
And in the following image, I've changed it to 0,0,0,50:
As you can see, you have full control over how the gradient is shown just by changing the 4 values. (or, in my case, just one of them)
(You may notice that I've changed the colors as per my design, it has nothing to do with the threshold)
Lets say you are using for-loop to populate your data. In list you need to populate a list of colors for every value and then use lineDataSet.setColors(listOfColors).
List<Integer> listOfColors = new List<>();
for(i= 0; i<dataEntries.size(); i++){
//Logic for colors
if(i<= dataEntries.size()-1){ //Otherwise app will crash on last index
if(dataEntries.get(i+1).y > 50)
listOfColors.add(Color.GREEN);
else
listOfColors.add(Color.RED);
}
Then in the last
lineDataSet.setColors(listOfColors)
Hope, this will help you.
Mpandroidchart: I am facing the issue with X-axis labels and marker, X-axis last value is not getting display and Marker is misplaced.
chart.getXAxis().setValueFormatter(new ValueFormatter() {
#Override
public String getFormattedValue(float value) {
return TimeUtils.getFormattedDateTime(dateValues.get((int) value), TimeUtils.MMM_DATE_ONLY_FORMAT);
}
});
MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view, getString(R.string.bpm), R.drawable.marker_green);
mv.setChartView(chart);
chart.setMarker(mv);
Can we add padding from the right? so the marker will take its place
Have a look at the attached image to understand the issue:- https://i.stack.imgur.com/GzqOU.png
https://i.stack.imgur.com/cs7Fx.png
After wasting a few hours on it, finally got the answer. I'm posting this answer for anyone else who has faced this issue.
Setting
chart.getXAxis().setSpaceMin(0.5f);
would add space between the X-axis line and the chart itself.
chart.getXAxis().setSpaceMax(0.5f);
for adding space between the last value and the right X-axis of the chart.
Sets the minimum interval between the y-axis values. This can be used to avoid value duplicating when zooming in to a point where the number of decimals set for the axis no longer allows to distinguish between two axis values.
xAxis.setGranularity(1f);
xAxis.setLabelCount(10);
After adding the above lines, the issue resolved! attached screenshot
https://i.stack.imgur.com/IxmWi.png
I am using MPAndroidChart library version 2.2.4. My requirement is I want to set three marker lines in a BarChart with values "Minimum", "Average" and "Maximum" like in the image below, but I can't find any solution for this.
In MPAndroidChart 3.x.x what you are asking for is called a LimitLine
There is an example of how to consume it in the sample project:
LimitLine ll1 = new LimitLine(150f, "Upper Limit");
ll1.setLineWidth(4f);
ll1.enableDashedLine(10f, 10f, 0f);
ll1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
ll1.setTextSize(10f);
ll1.setTypeface(tf);
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.removeAllLimitLines(); // reset all limit lines to avoid overlapping lines
leftAxis.addLimitLine(ll1);
If you require a customized limit line, you will have to look at the instructions in this question here
I am developing an app, for which I am using androidplot library.
My requirement is to draw a curved graph - very similar to what is shown here
I am able to draw the smooth graph fine, but I want to remove the X and Y axes that are shown along with the graph. I need to display ONLY the waveform graph and not the X and Y co-ordinates. Is this possible? If so, how I can I achieve this?
Thanks in advance.
It would be helpful to see what you currently have, but going from the image you provided it sounds like you want to:
Remove domain and range grid lines
Remove vertices from the plotted line.
To remove domain & range grid lines, add this to your plot's xml:
ap:domainLineColor="#color/ap_transparent"
ap:rangeLineColor="#color/ap_transparent"
ap:domainOriginLineColor="#color/ap_transparent"
ap:rangeOriginLineColor="#color/ap_transparent"
To remove vertices from your plotted line, just pass in a null value for the vertex param of your LineAndPointFormatter's constructor. For example, this would draw a read line with no fill or vertices:
LineAndPointFormatter myLineFormat = new LineAndPointFormatter(Color.RED, null, null, null);
I use combined chart which combines line (RED) and scatter charts. However for some reason scatter chart points are cropped at the edge of chart here is example:
Is there any way to prevent it?
here is my chart code:
chart.getAxisLeft().setAxisMaxValue(1.1f);
chart.getLegend().setEnabled(false);
chart.setTouchEnabled(false);
chart.setDragEnabled(false);
chart.setScaleEnabled(false);
chart.setPinchZoom(false);
chart.setDoubleTapToZoomEnabled(false);
chart.setHighlightPerDragEnabled(false);
chart.setHighlightPerTapEnabled(false);
chart.getAxisRight().setEnabled(false);
chart.getAxisLeft().setEnabled(false);
chart.getXAxis().setEnabled(false);
chart.setDescription("");
chart.setNoDataText("");
and my scatter data set:
foodDataSet = new ScatterDataSet(foodEntries, "Food");
foodDataSet.setColor(ContextCompat.getColor(getContext(), R.color.green_main));
foodDataSet.setScatterShape(ScatterChart.ScatterShape.CIRCLE);
foodDataSet.setScatterShapeSize(10f);
foodDataSet.setDrawValues(false);
foodDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
Update
here is chart with axis
After some tries I was able to find hack to solve issue. However it would be good if proper solution could be advised. Current solution
chart.setData(data);
chart.getXAxis().setAxisMinValue(-0.1f);
chart.setVisibleXRangeMinimum(xAxisLabels.size() - 0.81f);
chart.invalidate();
Min value should be increased if bigger data points are used, but it will require update min visible x range too. Reduce subtraction value to increase offset.
Disadvantage of such solution is it doesn't scale well
If anyone else is having this problem, here's what I did to make mine scale with the number of entries. This assumes that the number of entries is the same for each data set which may or may not be the case for your specific data.
float xAxisSideOffset = (float)(xMax - xMin) / (data.getEntryCount()/data.getDataSetCount());
combinedChart.getXAxis().setAxisMinimum(xMin - timeInterval - xAxisSideOffset/2);
combinedChart.getXAxis().setAxisMaximum(xMax - timeInterval + xAxisSideOffset/2);