swiftplot icon indicating copy to clipboard operation
swiftplot copied to clipboard

Implement new chart type - Pie Chart

Open KarthikRIyer opened this issue 5 years ago • 25 comments

A pie chart is a circular graph that shows the relative contribution that different categories contribute to an overall total. A wedge of the circle represents each category’s contribution, such that the graph resembles a pie that has been cut into different sized slices.

This task will require you to implement the following:

  • A new plot type (PieChart) similar to LineChart, BarChart implemented currently. (Very basic implementation)
  • Code to draw wedges using atleast two of the three renderers (AGG/SVG/CoreGraphics).

The input type can be Pair<StringConvertible , FloatConvertible>. You can take a look at this for reference. But instead of drawing text over the chart we can use legends.

KarthikRIyer avatar Nov 25 '19 18:11 KarthikRIyer

Hi Karthik, Can I work on this task? I would like to build a pie chart similar to the example provided.

anigasan avatar Dec 28 '19 19:12 anigasan

I am GCI'19 participant

anigasan avatar Dec 28 '19 19:12 anigasan

Sure @anigasan . Be sure to claim the task on the GCI website and specify there which issue you plan to work on. Let me know if you need any help getting started.

KarthikRIyer avatar Dec 29 '19 04:12 KarthikRIyer

I am currently completing other task and wanted to get head-start for this task. Can I start work without claiming task? That way I will setup the environment, etc.?

anigasan avatar Dec 29 '19 16:12 anigasan

Sure!

KarthikRIyer avatar Dec 29 '19 16:12 KarthikRIyer

Thanks @KarthikRIyer ! I will start preparing for drawing basic pie-chart!! Which example that I should look at?

anigasan avatar Dec 29 '19 17:12 anigasan

or other modules (such as Line Chart, etc.)?

anigasan avatar Dec 29 '19 17:12 anigasan

Ananya, you can take a look at LineChart.swift to see how a Plot type is made. Also take a look at Renderer.swift, and the AGGRenderer , SVGRenderer and QuartzRenderer modules to see how primitives are to be drawn. There are a few other files you would need to see to understand how you the Plot type is created, for that just follow LineChart.swift and a search through the codebase for anything you need should point you to the correct file.

If you get stuck anywhere or need any help, please ask.

KarthikRIyer avatar Dec 29 '19 18:12 KarthikRIyer

Thanks and I will start getting myself familiar with the other

anigasan avatar Dec 30 '19 02:12 anigasan

Great to see another GCI participant working on SwiftPlot. Good luck on your task!

P.S. If you'd like, in addition to legends, you can also try to use the new Text annotation to overlay text onto the pie chart.

WilliamHYZhang avatar Dec 30 '19 07:12 WilliamHYZhang

@anigasan are you still working on this? Any progress?

KarthikRIyer avatar Jan 04 '20 17:01 KarthikRIyer

Hi @KarthikRIyer, Due to one of the other tasks, I ran into space issues with my notebook and hence switched off my docker instance for the moment. I will be reinstalling Swift by Tue and will work on the task. Apologies for delay!!

anigasan avatar Jan 04 '20 23:01 anigasan

No worries. Just wanted to know if you were stuck somewhere.

KarthikRIyer avatar Jan 05 '20 04:01 KarthikRIyer

Thanks @KarthikRIyer !

anigasan avatar Jan 05 '20 05:01 anigasan

Hi Karthik - I have started working on piechart from today and am looking at Line Chart / Bar Chart to get some understanding. thanks

anigasan avatar Jan 18 '20 19:01 anigasan

Good luck @anigasan !

KarthikRIyer avatar Jan 19 '20 08:01 KarthikRIyer

Hi Karthik, QQ - To draw wedges, do I use DrawPolygon primitives?

thanks

anigasan avatar Jan 20 '20 03:01 anigasan

Wedges aren't polygons. So I think you should draw two lines and implement a function to draw an arc.

KarthikRIyer avatar Jan 20 '20 09:01 KarthikRIyer

Sure, I will try! Thanks for the guidance.

anigasan avatar Jan 20 '20 15:01 anigasan

@KarthikRIyer I want to contribute to the task to closure! Can you please provide guidance on drawing wedges?

anigasan avatar Jan 26 '20 17:01 anigasan

I'm glad that you want to take this task to closure! I'll need some more time to look into it in detail. I'll get back to you soon.

KarthikRIyer avatar Jan 27 '20 12:01 KarthikRIyer

@anigasan this task is definitely not trivial (especially in the case of the AGGRenderer). It doesn't have good documentation (actually next to no documentation). So you'll have to go through the code of the AGG library and try to find a solution. I took a brief look at the code and found this:

https://github.com/KarthikRIyer/swiftplot/blob/71f5e6c05aa03f06480482c2092783b6e17f44e9/Sources/AGG/include/agg_bezier_arc.h#L44

bezier_arc(double x,  double y, 
                   double rx, double ry, 
                   double start_angle, 
                   double sweep_angle)
        {
            init(x, y, rx, ry, start_angle, sweep_angle);
        }

You should be able to draw an arc using this method. But I haven't tried it myself. I think you should be able to use it similar to how the circle drawing has been implemented.

As for the other two renderers, I found these answers on stackoverflow:

For SVG Renderer: https://stackoverflow.com/questions/13092979/svg-javascript-pie-wedge-generator

For QuartzRenderer: https://stackoverflow.com/questions/35752762/making-a-pie-chart-using-core-graphics

Hope this helps.

KarthikRIyer avatar Jan 28 '20 15:01 KarthikRIyer

Thank you very much @KarthikRIyer. I had tried with bezier_arc and it was drawing one wedge. It was failing with more wedges. I will try again with these inputs in the next few days and come back to you.

anigasan avatar Jan 29 '20 00:01 anigasan

@anigasan can you open a PR with the additions you made? Maybe we could try to find a solution after looking at your code.

KarthikRIyer avatar Jan 29 '20 07:01 KarthikRIyer

Hi @KarthikRIyer - Sorry for the delay in reply!! I will do PR over weekend to submit partial work. Thanks

anigasan avatar Jan 31 '20 03:01 anigasan