Search code examples
highchartsf#websharper

Highcharts renderer in websharper

I am new to websharper and i am trying to use Highcharts.

I am able to display some nice charts and wished to add a picture.

So i found this example (and some more)

http://jsfiddle.net/F4qS8/793/

...
}, function(chart) { // on complete

    chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30)
        .add();   

});

And i also found the class WebSharper.Highcharts.Renderer.

But I don't see a relation between Renderer and the chart (in the WebSharper.Highcharts assembly).

I can call (static) Renderer.Image(...) but in the browser (javascript) i get an undefined (also it would't make sense since the renderer can't know where to draw, or ?).

So is there a way to get an renderer instance from the chart or let the static renderer know where to draw ? Or a different way to draw into the chart in websharper?

Solution

  • Thanks for the report. The WebSharper bindings for HighCharts are generated from the JSON API. Highsoft made some changes to the JSON structure lately, and we haven't updated for it correctly. We will look into it, in the meantime, you can use inlined JS:

    open WebSharper
open WebSharper.JavaScript
open WebSharper.Highcharts

[<JavaScript>]
module Client =

    [<Inline "$chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30).add()">]
    let onComplete (chart: Chart) = ()