Hello,

I'm currently testing Nevron Charts.
I want to generate charts in .NET, export them into svg file and embed some interactivity in this SVG.

I already tested the online example where we can link a data to an URL ("svg & browser redirection" in http://examplesaspnetchart.nevron.com/)
But I would like to link an event (onMouseOver, onClick,....) to a custom Javascript and to a data (possibility to display a custom tooltip, to send the data I click on to a webService query, ....)

Can you provide me an example that show me how to do that with your tool?

Thank you!

Hi Lionel,

You can generated SVG content with interactivity - the following code snippet shows how to create a chart with per bar interactivity:

         NChart chart = nChartControl1.Charts[0];

         NBarSeries bar = new NBarSeries();

         // value 0
         bar.Values.Add(10);
         NInteractivityStyle bar0IS = new NInteractivityStyle();
         bar0IS.CustomMapAreaAttribute.JScriptAttribute = "onclick = 'Alert(\"Bar0\")'";
         bar.InteractivityStyles.Add(0, bar0IS);

         // value 1
         bar.Values.Add(20);
         NInteractivityStyle bar1IS = new NInteractivityStyle();
         bar1IS.CustomMapAreaAttribute.JScriptAttribute = "onclick = 'Alert(\"Bar1\")'";
         bar.InteractivityStyles.Add(1, bar1IS);

         // value 2
         bar.Values.Add(30);
         NInteractivityStyle bar2IS = new NInteractivityStyle();
         bar2IS.CustomMapAreaAttribute.JScriptAttribute = "onclick = 'Alert(\"Bar2\")'";
         bar.InteractivityStyles.Add(2, bar2IS);

         chart.Series.Add(bar);

         NSvgImageFormat svgImageFormat = new NSvgImageFormat();
         svgImageFormat.EnableInteractivity = true;

         StringBuilder customScript = new StringBuilder();

         customScript.AppendLine("function Alert(message)");
         customScript.AppendLine("{");
         customScript.AppendLine("alert(message);");
         customScript.AppendLine("}");

         svgImageFormat.CustomScript = customScript.ToString();

      // configure the control to generate SVG.
         NImageResponse imageResponse = new NImageResponse();
   imageResponse.ImageFormat = svgImageFormat;

         nChartControl1.ServerSettings.BrowserResponseSettings.DefaultResponse = imageResponse;

This code will generate an svg chart, which will call the Alert method defined in the custom script generated by control. You can of course change that to any valid JavaScript method etc.

Hope this helps - let us know if you meet any problems or have any questions.

Best Regards,
Nevron Support Team