Implement new chart type - Pie Chart

[KarthikRIyer]

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.

[anigasan]

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

[anigasan]

I am GCI'19 participant

[KarthikRIyer]

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.

[anigasan]

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.?

[KarthikRIyer]

Sure!

[anigasan]

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

[anigasan]

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

[KarthikRIyer]

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.

[anigasan]

Thanks and I will start getting myself familiar with the other

[WilliamHYZhang]

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.

[KarthikRIyer]

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

[anigasan]

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!!

[KarthikRIyer]

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

[anigasan]

Thanks @KarthikRIyer !

[anigasan]

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

[KarthikRIyer]

Good luck @anigasan !

[anigasan]

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

thanks

[KarthikRIyer]

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

[anigasan]

Sure, I will try! Thanks for the guidance.

[anigasan]

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

[KarthikRIyer]

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]

@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:

swiftplot/Sources/AGG/include/agg_bezier_arc.h

Line 44 in 71f5e6c

bezier_arc(double x, double y,

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.

[anigasan]

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.

[KarthikRIyer]

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

[anigasan]

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