PhilJay / MPAndroidChart

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.
Other
37.54k stars 9.01k forks source link

MPAndroidChart Making Curved Graphs #3258

Open Edonfreiner opened 7 years ago

Edonfreiner commented 7 years ago

I am using the MPAndroidChart to make a graph of the sun movements and marking different points during the day. At this moment it looks like this: enter image description here

When I change it to dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER); It doesnt make it look curved just weird:

enter image description here

A really small change at the top. And when I do dataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);

It also has this weird loopy effect.

What am I doing wrong, are the points on my graph wrong?

I would like to get this type of effect: enter image description here

Please help, thanks

JStav commented 7 years ago

Try lowering the cubic intensity with dataSet.setCubicIntensity(). Default is 0.2f. Mine is set to 0.1f.

Edonfreiner commented 7 years ago

Hey @JStav Thanks for replying, this didnt work. The curve works with only 3 points so lets say, (5,5) (0,0) (-5,5) but when I add more points this stops working and looks very linear.

Here are my points:

alos: X: 240.0 ,Y: 508.0 zmanTallisAndTefillin: X: 263.0, Y: 462.0 netzHaChama: X: 302.0, Y: 386.0 sofZmanShemahMagenAvrah: X: 368.0, Y: 254.0 sofZmanShemahGra: X: 398.0, Y: 193.0 sofZmanTefilla: X: 430.0, Y: 129.0 chatzos: X: 495.0, Y: 0.0 minchaGedola: X: 511.0, Y: 31.0 plagHaMincha: X: 647.0, Y: 305.0 shkiah: X: 687.0, Y: 384.0 tzesHakochavim: X: 719.0, Y: 448.0

Thanks again @JStav

JStav commented 7 years ago

Yeah, smoothing leaves a lot to be desired in this library. We only really have CUBIC_BEZIER and HORIZONTAL_BEZIER. I have this problem too and there's not much you can really do.

Other libraries like D3 for js have many more options that work better. Unfortunately we do not have that. It's probably a good candidate for a feature addition/pull request.

Edonfreiner commented 7 years ago

Thanks @JStav.

Is there anyway to to get this to work?

Maybe make the 3 points and plot the rest of the them on that line but on a different lineset?

Or a different Library maybe?

Can I convert the D3 library and use it with android? Is that possible? Thanks, I would really need this to work.

All The best

JStav commented 7 years ago

If it works every 3 points then yeah it would be a workaround to just make a new line data set every 3 points. You would just have to make sure that it looks good in all possible scenarios.

D3 as far as I know is a JavaScript only library so I don't think you can use that unless you plop it all into a WebView but that's kind of messy.

Edonfreiner commented 7 years ago

Ok, so I made a chart for the first 3 points:

screen shot 2017-07-18 at 3 05 01 pm

And your saying that I should plot the rest on a new line with out any color? That should work?

How do I plot multiple linesets with one chart?

JStav commented 7 years ago

You can use a ScatterDataSet and use CombinedData/CombinedChart instead of LineData/LineChart.

Is this graph supposed to have different sets of data or will it always be the same? If the data changes you probably can't use this method because there's no way to tell which points you need to separate to make the curve work other than trial and error.

Edonfreiner commented 7 years ago

What I am trying to do is get a sun path. As shown below:

sunpath

The multiple lines in this graph represents different months of the year.

I have specific points of the day according to the sun and the times they occur. For example sun rise, sun set and midday (half way between sunrise and sunset) along with other times.

I thought I can plot them on a graph dividing the time by 24 to get the X and the time by midday (around 12) to get the Y. and then plot them on a graph.

These times change every day, however they are all relative to one another.

My end goal is to hopefully have something like this:

time-travel-changing-solar-view-apple-watch-screenshot

Where each of those images are separate days.

Do you think this is at all possible? Am I in way over my head?

Thanks.

JStav commented 7 years ago

I think you will run into many other problems with the library on the way, even if you fix this one. Unfortunately I don't really know a good alternative or something that could help you achieve this so I can't be of much help with that, sorry. Might have to roll your own custom solution.

Edonfreiner commented 7 years ago

hey, Thank you for your help I figured it out. I used the elevation of sun to graph the line and then plotted the points in time on the a different data set, on that graph.

I was wondering if it is possible to set highlight effect for only a specific data set. thanks