Dynamically add series to existing chart via Ajax

[wjgilmore]

Love lazy_high_charts, so far it's working out beautifully. However I can't sort something which otherwise seems like it should be so obvious that I'm adding it here as an issue/feature request. I can add a chart to a page via lazy_high_charts' LazyHighCharts::HighChart.new static method. The JavaScript which is generated to add the chart to the desired DIV looks generally like this:

<script type="text/javascript">
    (function() {
        var onload = window.onload;
    window.onload = function(){
        if (typeof onload == "function") onload();
      var options, chart;
      options = { "title": { "text": "Amazon" },
        "legend": { "layout": "vertical","style": {  } },
        "xAxis": { "categories": ["2012-07-01","2012-07-02","2012-07-03""],
        "labels": { "rotation": -45,"align": "right" } },
        "yAxis": { "title": { "text": null },"labels": {  } },"tooltip": { "enabled": true },
        "credits": { "enabled": false },"plotOptions": { "areaspline": {  } },
        "chart": { "defaultSeriesType": "line","renderTo": "charty" },
        "subtitle": {  },"series": [{"name":"Amazon","data":[287,499,385]}] };

      chart = new Highcharts.Chart(options);
    };
})()
</script>

I subsequently want to add new series to the existing chart via Ajax. This is usually very easily done with HighCharts by creating a new series and adding it to the chart object via the addSeries method. However this is not (to my understanding) possible using lazy_high_charts because the chart variable is not global. While I certainly understand why one does not want to make it a habit of creating global JavaScript variables, I'm a bit perplexed by this decision because it means that it is not possible to subsequently add dynamic series to an existing chart, precisely because that chart object is not available?

Surely there is some very easily solution to this problem?

Thanks! Jason

[michelson]

maybe we can add a window.chart instead of chart to globally access the chart ?

but take a look to http://www.highcharts.com/demo/dynamic-update , it has another approach to update the data , i think you can add a remote load there to update the data , make sense ?

[koukou73gr]

I dealt with the same issue recently. I ended up patching lib/lazy_high_charts/layout_helper.rb like this:

      graph =<<-EOJS
      <script type="text/javascript">
      (function() {
        var onload = window.onload;
        window.highcharts = window.highcharts || {}
        window.onload = function(){
          if (typeof onload == "function") onload();
          var options, chart;
          options = { #{options_collection.join(',')} };
          #{capture(&block) if block_given?}
          chart = new Highcharts.#{type}(options);
          window.highcharts['#{placeholder}']=chart;
        };
      })()
      </script>
      EOJS

which is more or less along the lines of the window.chart idea. It would be nice to have something like this, since there is no other way to grab a reference to the created HighChart object outside the onload event anonymous function.

[michelson]

yep, it seems to be a good idea, the only issue there is the chart variable name should be unique. so , if i have many charts in the same page the global variables dont overlap.

patches welcome!

Atte. Miguel Michelson Martinez www.artenlinea.com

On Fri, Aug 10, 2012 at 12:04 PM, koukou73gr [email protected]:

I had more or less the same issue recently. I ended up patching lib/lazy_high_charts/layout_helper.rb like this:

  graph =<<-EOJS
  <script type="text/javascript">      (function() {        var onload = window.onload;
    window.highcharts = window.highcharts || {}
    window.onload = function(){          if (typeof onload == "function") onload();          var options, chart;
      options = { #{options_collection.join(',')} };          #{capture(&block) if block_given?}          chart = new Highcharts.#{type}(options);          window.highcharts['#{placeholder}']=chart;        };      })()      </script>      EOJS

which is more or less along the lines of the window.chart idea. It would be nice to have something like this, since there is no other way to grab a reference to the created HighChart object outside the anonymous function any other way.

— Reply to this email directly or view it on GitHubhttps://github.com/michelson/lazy_high_charts/issues/65#issuecomment-7648925.

[koukou73gr]

Check the code I posted above, I think it addresses your concern.

[michelson]

ah , i see, sure it should work

if you want add some tests to and apply a pull request, i will merge it asap

thanks

Atte. Miguel Michelson Martinez www.artenlinea.com

On Fri, Aug 10, 2012 at 12:37 PM, koukou73gr [email protected]:

Check the code I posted above, I think it addresses your concern.

— Reply to this email directly or view it on GitHubhttps://github.com/michelson/lazy_high_charts/issues/65#issuecomment-7649880.

[koukou73gr]

The pull request, I can it handle shortly. But the tests... I have no experience with them :((