Did you know that with just a couple simple steps you can add legend interactivity to your charts that are supported in both raster and vector image formats? In this blog we will guide you through the steps of adding the required CDL parameters in a chart template and the required API’s for your chart application.

Before we begin, we strongly recommend you to install our latest NetCharts Pro 7.1.3 update which includes enhanced support for SVG images in Internet Explorer and Firefox. For more information, visit our Customer Support Portal and see KB solution 522, “NetCharts Pro 7.1.3 Maintenance Release“, which describes this release in greater detail including update instructions.

Adding the Dwell Highlight CDL parameters

1. Open your chart template in a text editor.

2. Does your chart have the Legend enabled and visible? If not, locate the Legend parameter.

   Legend = (“OFF”, x000000_178, “Arial Plain”, 10, 0, CENTER);

   Then to enable the Legend, remove OFF so that it now looks like this:

   Legend = (“”, x000000_178, “Arial Plain”, 10, 0, CENTER);

3. Copy these following LegendDwellAnimation parameters:

   LegendDwellAnimationHighlightBorderStyle = (SOLID, 2, grey);
   LegendDwellAnimationStyle = HIGHLIGHT;
   LegendDwellAnimationHighlightFill = white;
   

4. Then paste these LegendDwellAnimation parameters into the CDL of the chart template so that it looks like this:

   Line3DDepth = -1;
   LineValueLabel = STYLE (“project.css”,”$DEFAULT_STYLE”,”OFF”);
   LineValueLabelBox = STYLE (“project.css”,”$DEFAULT_STYLE”);
   LineDropShadow = STYLE (“project.css”,”gray”);
   LineSymbolSpotlights = STYLE (“project.css”,”linesymbolspotlight”);
   GraphType = ROWS;
   DataLegend = OFF;
   DataLegendGrid = (null,null,null);
   DataLegendGridLine = (BOTH,SOLID,1);
   LegendDwellAnimationHighlightBorderStyle = (SOLID, 2, grey);
   LegendDwellAnimationStyle = HIGHLIGHT;
   LegendDwellAnimationHighlightFill = white;
   

5. Save the template and you’re done!

Adding the Dwell Highlight APIs

To programmatically enable the legend interactivity, add the following calls to your code:

// Configures the chart to highlight the corresponding data when the legend item is hovered over.
chart.setLegendDwellAnimationStyle(NFGraph.LEGEND_DWELL_ANIMATION_STYLE_HIGHLIGHT);
// Configures the style of the highlight to apply to the corresponding data when the legend item is hovered over.
chart.setLegendDwellAnimationHighlight(new NFFillBorder(NFColor.get(“white”), new NFLine(NFLine.SOLID, 2, NFColor.get(“grey”))));

These lines of code will generate the following CDL parameters:

LegendDwellAnimationStyle = HIGHLIGHT;
LegendDwellAnimationHighlightFill = white;
LegendDwellAnimationHighlightBorderStyle = (SOLID,2,grey);

Compile, deploy and run your chart application in a Java Servlet engine to display the chart template as either raster or vector.

To try out these newly added parameters, hover the pointer over each of the legend items. Depending on which chart type you are using you will see the matching lines, bars or slices change colors as you hover over the legend items.

To further tweak the LegendDwellAnimation styling exactly the way you like, see the CDL Reference Guide (.pdf) for detailed information on these parameters and much more.

Stay tuned for more tips on design approaches! If you have any questions, feel free to contact us at support@visualmining.com.