Blog

How to add spotlights to pies

Author:
Date:
September 14, 2015
Category:
Chart Polish, Design Approaches, Developer Products, NetCharts Pro

Maybe you have a chart template such as a PieChart or MultiPieChart that is a couple years old and the pie doesn’t pop or look as stylish as you’d wish it would. Your chart may look similar to this PieChart below:

Older looking pie chart before enhancement

In version 7.0, we have introduced a new spotlights parameter that will allow you to enhance the styling further and will make your charts really stand out and impress! This particular parameter adds a concentrated lighter area that simulates a spotlight. Adding this new parameter is quite simple and best of all, you don’t need to learn or be fluent in our Chart Definition Language (CDL).

All you need to do is to add a PieSpotlights parameter which will simulate a light source coming from the left to complement the shadow. Adding the PieSpotlights parameter to combine it with the PieDropShadow parameter already used in this particular example, will allow you to simulate a much more realistic depth effect to your charts.

In this blog we will guide you through the simple steps of updating the pies in an older chart to look much better with just a couple changes to your chart template:

  1. The only step required is to add a PieSpotlights parameter into your chart template. This will produce a simulated light source from the left. Locate and replace the default PieSpotlights parameter with:

    PieSpotlights = (xffffff_180, xffffff_0, CENTER, 0.0009, 0.0091, -0.45, -0.02, 0.9999);

    If you would like a simulated light source from the center you can try this parameter:

    PieSpotlights = (xffffff_120, xffffff_0, CENTER, 0.0001, 0.0001, -0.1, -0.03, 0.9);

    Updated pie chart after enhancement

That’s it, you are done. Your chart has now been updated with a new stylish look!

To enhance the styling even further, we recommend also using the PieEdgeHighlights parameter to add a simulated light source. Combined with the PieSpotlights, adding a PieEdgeHighlights parameter will enhance the depth even further. Stay tuned for the next blog in this series that will feature the PieEdgeHighlights parameter and How to add edge highlights to pies.

See more information on the PieSpotlights parameter in our CDL Reference Guide here:
NetCharts Pro – Visual Mining CDL Reference for v7.2 Products (PDF)
NetCharts Pro – Visual Mining Online CDL Reference Guide for v7.2 Products (HTML)

Our data visualization tool and design studio NetCharts Designer can be used to generate the PieSpotlights CDL parameter for you and make the styling tweaks even easier. Included in NetCharts Designer are a couple of default PieSpotlights parameter options allowing for quick styling updates.

NetCharts Pro API users can use the netcharts.pro.common.NFSpotlight and netcharts.pro.common.NFSpotlightSeries classes and the .setPieSpotlightSeries(netcharts.pro.common.NFSpotlightSeries) API to dynamically define the line symbol spotlights. For example:

NFSpotlightSeries pieSymbolSpotlightSeries = new NFSpotlightSeries();

NFSpotlight pieSymbolSpotlight = new NFSpotlight();
pieSymbolSpotlight.setStart(NFColor.get(“xffffff_180”));
pieSymbolSpotlight.setStop(NFColor.get(“xffffff_0”));
pieSymbolSpotlight.setCenter(NFSpotlight.CENTER);
pieSymbolSpotlight.setCenterOffsetX(0.0009);
pieSymbolSpotlight.setCenterOffsetY(0.0091);
pieSymbolSpotlight.setFocusOffsetX(-0.45);
pieSymbolSpotlight.setFocusOffsetY(-0.02);
pieSymbolSpotlight.setRadius(.9999);

pieSymbolSpotlightSeries.addElement(pieSymbolSpotlight);
chart.setPieSpotlightSeries(pieSymbolSpotlightSeries);

Also see related blog posts:
How to add a drop shadow to pies
How to add symbol spotlights to lines
How to add drop shadows to lines
How to add highlights to bars
How to add drop shadows bars
Good and Not So Good Ideas of chart design – 3D Depth
How to update pre 7.0 chart templates into the new 7.0 look

If you have any questions, feel free to contact us at support@visualmining.com.

Comments are closed.