HighCarts Custom Graph

Feb 23, 2012 at 9:29 AM
Edited Feb 23, 2012 at 9:36 AM

Hello there,

Do we have the possibility to made Custom graph with your .Net API on HighCharts like this :

For exemple Gauge : http://jsfiddle.net/highcharts/bLks3/

And use custom plugin ? like this :  http://highcharts.com/jsbin/okohot/3/edit#javascript,live

Thanks a lot

Benjamin

Developer
Feb 25, 2012 at 9:00 AM
Edited Feb 25, 2012 at 7:06 PM

Hi Benjamin,

It is not possible to make the Gauge visualization with Highcharts .Net.

It IS possible to use plugins like the one in  the second link. To make it work, you will need to do two things :

  1. Include the javascript for the plugin on your page manually.
  2. Make minor changes in the code so that the 'Highchart.Core.Events.PointEvents' class also includes a definition for 'drop' along with the existing ones such as 'click', 'mouseOver', 'mouseOut' etc..
    • You could do this by taking the existing code for the project and changing the code in the class file. However, since this is a plug-in, I wouldn't recommend doing that.
    • The other approach could be to take a class that inherits from 'Highchart.Core.Events.PointEvents' and then set the <point>.event = new DerivedPointEvent(); That way, this class can be included if you are using the plugin and excluded  otherwise, without changing existing code :)

Hope that helps. Let us know it it works for you..

Regards,

Rahul

 

Update 1:

There appears to be a problem with registering the drag/drop events for the plugin. I'm looking into it. Will post an update once I learn a little more.

Update 2:

Finally got the draggable charts plugin working. See solution below.


Developer
Feb 25, 2012 at 7:28 PM
Edited Feb 25, 2012 at 7:37 PM

I was pretty much on target last time around. However, as it turns out, implementing the plugin is just a little bit more tricky than I had thought earlier. To achieve this, I made 2 derived classes shown below :

First : 
namespace
Highchart.Core.Events { [Serializable] [JsonObject(MemberSerialization.OptOut)] public class ExtendedPointEvents : PointEvents { private string _drop; public string drop { get { if (!string.IsNullOrEmpty(_drop)) return string.Format("function(event){{ {0} }}", _drop); else return null; } set { _drop = value; } } } }

Second : namespace Highchart.Core.Data.Chart { [Serializable] [JsonObject(MemberSerialization.OptOut)] public class DraggableSerie : Serie { public bool? draggable; } }

After this, usage simply becomes:

var series = new Collection<Serie>();
series.Add(new DraggableSerie { data = new object[] { 400, 435, 446, 479, 554, 634, 687, 750, 831 }, draggable = true });
hcVendas.PlotOptions.cursor = "ns-resize";
hcVendas.PlotOptions.point = new PlotPointEvents() {events = new ExtendedPointEvents() {drop = "alert(this.y);"}};
            

But as it turns out, there is a problem with WHERE exactly you register the plugin script on the page. If the script is registered at the top of the page, the browser returns an error 'Highcharts' symbol is not defined. This is because the Highcharts.js file is registered just before the rendering of the First chart on the page. There are at least 3 solutions to this (that I could think of).

 

  1. Register the plugin script at the bottom of the page (using "<script type='text/javascript' src='<path_to_plugin_file'>.js ></script> ") so that if a chart has been registered, Highcharts.js is already available. Remember, the JS to create the chart does not run till AFTER the complete page has loaded, so registering the plugin anywhere on the page before it has finished loading will work for us. This is the approach that I used. However, if Highcharts.js has not been registered on the page, firebug will throw a JS error. Therefore, it might be prudent to check for the base library before registering the plugin.
  2. Remove the code for registering Highcharts.js from the Chart.cs file, and register the base lib and the plugin manually at the top of the page, in the correct order.
  3. Change Charts.cs so that the plugin file is also registered programmatically, AFTER Highcharts.js

I avoided approaches 2 and 3 since making permanent code changes to the original library would undermine the whole purpose of this being a 'plug-in'

Hope this helps. Let us know if you still face some problems..

Regards,

Rahul

PS:

The drop event seems to be firing twice. Maybe its a problem with the way I registered the event, or maybe that's just how it is. Don't know. Just thought I should warn you in advance.. Let us know if you figure this one out..

Feb 25, 2012 at 7:34 PM
Thanks a lot, we will try soon and say to you if it work ;) Keep in touch ;)
Benjamin

--
Benworld
Send with Nothing

Le samedi 25 février 2012 à 20:28, testmyo a écrit :

From: testmyo

I was pretty much on target last time around. However, as it turns out, implementing the plugin is just a little bit more difficult than I had thought earlier. To achieve this, I made 2 derived classes shown below :

First : 
namespace
Highchart.Core.Events { [Serializable] [JsonObject(MemberSerialization.OptOut)] public class ExtendedPointEvents : PointEvents { private string _drop; public string drop { get { if (!string.IsNullOrEmpty(_drop)) return string.Format("function(event){{ {0} }}", _drop); else return null; } set { _drop = value; } } } }

Second : namespace Highchart.Core.Data.Chart { [Serializable] [JsonObject(MemberSerialization.OptOut)] public class DraggableSerie : Serie { public bool? draggable; } }

But as it turns out, there is a problem with WHERE exactly you register the plugin script on the page. If the script is registered at the top of the page, the browser returns an error 'Highcharts' symbol is not defined. This is because the Highcharts.js file is registered just before the rendering of the First chart on the page. There are at least 3 solutions to this (that I could think of).

  1. Register the plugin script at the bottom of the page (using "<script type='text/javascript' src='<path_to_plugin_file'>.js ></script> ") so that if a chart has been registered, Highcharts.js is already available. Remember, the JS to create the chart does not run till AFTER the complete page has loaded, so registering the plugin anywhere on the page before it has finished loading will work for us. This is the approach that I used. However, if Highcharts.js has not been registered on the page, firebug will throw a JS error. Therefore, it might be prudent to check for the base library before registering the plugin.
  2. Remove the code for registering Highcharts.js from the Chart.cs file, and register the base lib and the plugin manually at the top of the page, in the correct order.
  3. Change Charts.cs so that the plugin file is also registered programmatically, AFTER Highcharts.js

I avoided approaches 2 and 3 since making permanent code changes to the original library would undermine the whole purpose of this being a 'plug-in'

Hope this helps. Let us know if you still face some problems..

Regards,

Rahul

Read the full discussion online.

To add a post to this discussion, reply to this email (highcharts@discussions.codeplex.com)

To start a new discussion for this project, email highcharts@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com