CODEWITHSUNDEEP
androidgradientmpandroidchartlinechart
yakamuki
yakamuki

Reputation: 106

MPAndroidChart gradient line depending on dataset values

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.

current graph

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

Upvotes: 1

Views: 1757

Answers (2)

Guillermo Gerard
Guillermo Gerard

Reputation: 892

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:

enter image description here

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)

the gradient generated using 0,0,0,100

And in the following image, I've changed it to 0,0,0,50:

the gradient generated with 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)

Upvotes: 1

Umer Farooq
Umer Farooq

Reputation: 593

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.

Upvotes: 0

Related Questions