Blog

How to add symbol spotlights to lines

Maybe you have a chart template such as a LineChart, ComboChart, or XYChart that is a couple years old and the lines doesn’t pop or look as stylish as you’d wish it would. Your chart may look similar to this LineChart below: In version 7.0, we have introduced a new symbol spotlights parameter that will […]

Author:
Date:
September 9, 2015
Category:
Chart Polish, Design Approaches

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

Older looking line chart before enhancement

In version 7.0, we have introduced a new symbol spotlights parameter that will allow you to enhance the styling further and will make your charts really stand out and impress! 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 LineSymbolSpotlights parameter which will simulate a light source coming from the left to complement the shadow. Adding the LineSymbolSpotlights parameter to combine it with the LineDropShadow 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 lines in an old chart to look much better with just a couple changes to your chart template:

  1. The only step required is to add a LineSymbolSpotlights parameter into your chart template. Locate and replace the default LineSymbolSpotlights parameter with:

    LineSymbolSpotlights = (xffffff_150, xffffff_0, CENTER, 0, 0, -0.5, -0.25, 0.9999);

    Updated line chart after enhancement

That’s it, you are done. Your chart will now have been updated to have a new stylish look!

See more information on the LineSymbolSpotlights 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 symbol spotlights CDL parameter for you and make the styling tweaks even easier. Included in NetCharts Designer are a couple of default LineSymbolSpotlights 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 .setLineSymbolSpotlightSeries(netcharts.pro.common.NFSpotlightSeries) API to dynamically define the bar highlights. For example:

NFSpotlightSeries symbolSpotlightSeries = new NFSpotlightSeries();

NFSpotlight symbolSpotlight = new NFSpotlight();
symbolSpotlight.setStart(NFColor.get(“xffffff_150”));
symbolSpotlight.setStop(NFColor.get(“xffffff_0”));
symbolSpotlight.setCenter(NFSpotlight.CENTER);
symbolSpotlight.setCenterOffsetX(0);
symbolSpotlight.setCenterOffsetY(0);
symbolSpotlight.setFocusOffsetX(-0.5);
symbolSpotlight.setFocusOffsetY(-0.25);
symbolSpotlight.setRadius(.09999);

symbolSpotlightSeries.addElement(symbolSpotlight);
chart.setLineSymbolSpotlightSeries(symbolSpotlightSeries);

Also see our previous blog in this series of how to add a LineDropShadow parameter to enhance the depth even further. Stay tuned for the next blog in this series that will feature the PieDropShadow parameter and will show How to add drop shadows to a pie.

See related blog posts:
How to add highlights to bars
How to add drop shadows to 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.