Can I use iron-localstorage and iron-ajax with highcharts

Question

I have a polymer element that uses iron-ajax to create a highchart. Could I now incorporate iron-localstorage so the chart will render from the data in ls unless ls is empty in which case it will call iron-ajax to load the data from an api?

My working element is as follows:

    <dom-module id="sales-chart">
  <template>
    <iron-ajax id="ajax" url="{{url}}" last-response="{{data}}"></iron-ajax>
    <div id="container" style="max-width: 600px; height: 360px;"></div>
  </template>

  <script>
    Polymer({
      is: "sales-chart",

      properties: {
        url: String,
        data: Object
      },

      observers: [
        // These functions only run once the observed properties contain
        // something other than undefined.
        '_requestData(url)',
        '_chartData(data)'
      ],

      _requestData: function(url) {
        // Note: Use `generateRequest()` instead of the `auto` property
        // because `url` may not be available when your element is
        // first created.
        this.$.ajax.generateRequest();
      },

      _chartData: function (data) {
        $(this.$.container).highcharts({
          chart: {
            type: 'spline',
            renderTo: 'container'
          },

          series: [{

            data: (data.series)
          }]
        }); 


      }
    });
  </script>
</dom-module>

Answer 1

Something along these lines should work (did't test it tough):

<dom-module id="sales-chart">
  <template>
    <iron-ajax id="ajax" url="{{url}}" last-response="{{data}}"></iron-ajax>
    <div id="container" style="max-width: 600px; height: 360px;"></div>
    <iron-localstorage name="{{url}}"
        value="{{data}}"
        on-iron-localstorage-load-empty="_requestData">
    </iron-localstorage>
  </template>

  <script>
    Polymer({
      is: "sales-chart",

      properties: {
        url: String,
        data: Object
      },

      observers: [
        // These functions only run once the observed properties contain
        // something other than undefined.
        '_chartData(data)'
      ],

      _requestData: function() {
        // Note: Use `generateRequest()` instead of the `auto` property
        // because `url` may not be available when your element is
        // first created.
        this.$.ajax.generateRequest();
      },

      _chartData: function (data) {
        $(this.$.container).highcharts({
          chart: {
            type: 'spline',
            renderTo: 'container'
          },

          series: [{

            data: (data.series)
          }]
        }); 


      }
    });
  </script>
</dom-module>