Unable to understand how to call HighCharts methods

[j2496i]

Please excuse the basic level of my understanding - I am from a bash / *nix background, and just starting to learn Rails.

I need to call the addPoint() method, at a defined interval. I would like this to be triggered from within a method in my controller, so that anything calling that method can add points.

If you could provide a working example of how to call the addPoint example and add points, I should be able to get my head around the rest.

Thanks to help from Miguel, I now understand that I will need to define this behaviour using JavaScript which will be rendered to the page content. However, I am still unsure how I would call a defined JS function from my rails controller, and how I would pass arguments...

I am currently using the following as a test case in my controller:

@chart = LazyHighCharts::HighChart.new('StockChart') do |f|
      f.rangeselector({ :selected=>1})
      f.title({ :text=>"Simulator Throughput"})
      f.series(:name=> 'flow1', :data=>[14,23,32,4], :tooltip=>{ :valuedecimals=>2})
      f.options[:foo] = "function(point) { f.series['0'].addPoint(point) }".js_code
 end

I have no idea how I would be able to call that function... I am speculating at:

@chart.options[:foo => 1]

...although I am sure this is way off. Any help would be greatly appreciated.

Kind Regards
Julian

[Deshi Xiao]

Here is a example list, could you please have a try to get a hint?
https://github.com/xiaods/highcharts-bootstrap

[j2496i]

Hi,

I've been through the sample project that you've linked to, and from this I can see that within your chart.rb model you have defined custom JS functions similar to for the formatter option:

      f.yAxis([{ #// left y axis
                title: {
                  text: nil
                },
                labels: {
                  align: 'left',
                  x: 3,
                  y: 16,
                  formatter: %|function() {
                    return Highcharts.numberFormat(this.value, 0);
                  }|.js_code
                },
                showFirstLabel: false

Unfortunately, I am still unable to understand how I can define a function which can be called after the page has loaded... such as to call myChart.Series[0].addPoint(1,1,0) on the click of a button... or perhaps on a callback from an auto-refresh method.

If you have any advice on how to approach this, it would certainly be helpful.

... I can see that my code, as follows:

    @chart = LazyHighCharts::HighChart.new('StockChart') do |f|
      f.rangeselector({ :selected=>1})
      f.title({ :text=>"Simulator Throughput"})
      f.series(:name=> 'flow1', :data=>[14,23,32,4], :tooltip=>{ :valuedecimals=>2})
      f.options[:foo] = "function(point) { f.series['0'].addPoint(point) }".js_code
    end

...renders to page source within the JSON:

        <script type="text/javascript">
        (function() {
          var onload = window.onload;
          window.onload = function(){
            if (typeof onload == "function") onload();
                    var options = { "title": { "text": "Simulator Throughput" },"legend": { "layout": "vertical","style": {  } },"xAxis": {  },"yAxis": { "title": { "text": null },"labels": {  } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "line","renderTo": "my_id4" },"subtitle": {  },"rangeselector": { "selected": 1 },"foo": function(point) { f.series['0'].addPoint(point) },"data": {  },"series": [{ "name": "flow1","data": [ 14,23,32,4 ],"tooltip": { "valuedecimals": 2 } }] };

        window.chart_my_id4 = new Highcharts.StockChart(options);

          };
        })()
        </script>

...and I am also unsure how I reference my specific chart instance? is f.method() correct? Or perhaps I should be using window.chart_my_id4.method() ?

Either way - thanks for taking the time to respond.

Julian

[Deshi Xiao]

@j2496i the gem is not magic gem. if you don't understand the logic. i have a proposal for you.
you can create a static html page + pure highcharts to implement your feature. then i can give a example to concert the html to rails project.

[j2496i]

Deshi,

Thanks again for responding. Please don't mistake my lack of experience for stupidity… No I don't understand the logic - had I come from a background where 'the logic' was already in place, then I would surely be left with the question of "why use this half-developed solution in the first place?"

It seems that you guys have implemented half of the interface - primarily the properties / options side of things. But not the rest. Additionally, some very poor method validation.

I come from a background where most of my free time is spent working. Commercially. In order to live. This venture was something to do for fun - although you personally have managed to extract any remnant of fun that was left.

I can't help but feel this is a university / dissertation project, maintained and designed by kids who have no real world experience, nor the ability to complete the design spec.

In fact your 'proposal' of creating a "static" page has - for now - been exactly what I resorted to. This was intended - much like the philosophy of ruby - to be a fun and verbose way to get to learn the logic. Instead, I ended up making things harder by persevering with your poorly implemented abstraction.

Thanks for pretty… ummm.. nothing Deshi. At least you have a good friend / compatriot in Miguel, who seems genuinely to have decent intentions.

[Miguel Michelson Martinez]

Hi @j2496i .

The solution is very straightforward, but you have to look at the static example, and understand how highcharts works. Deshi's proposal have nothing mean when says , do the static example (pure high charts), then you could backport it to ruby, and continue this conversation thread. If you can do that , then we can't spend our free time doing it for you. Im sorry , but we are not here to amuse you.