hc-chart-behaviours.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../iron-ajax/iron-ajax.html"/>

<script src="../highstock-release/adapters/standalone-framework.js"></script>
<script src="../moment/min/moment.min.js"></script>
<script src="../highstock-release/highcharts-more.js"></script>

<script>
  	HCProperties =  {
		properties: {
	        // URL - set this to a web service/API or json file. _requestData function fetches new data every 5seconds.
	        url: String,
	        // Data - can override url property.
	        data: Object,
	        // Chart Width
	        chartWidth: {
	        	type: Number,
	        	value: 150
	        },
	        // Chart Height
	        chartHeight: {
	        	type: Number,
	        	value: 150
	        },
	        // Min Value
	        min: Number,
	        // Max Value
	        max: Number,
	        // enable or disable legend
	        legendEnabled: {
	        	type: Boolean,
	        	value: false
	        },
	        chartPlotBands: {
	        	type: Array,
	        	value: [{
	                from: 0,
	                to: 35,
	                color: '#55BF3B' // green
	            }, {
	                from: 35,
	                to: 40,
	                color: '#DDDF0D' // yellow
	            }, {
	                from: 40,
	                to: 50,
	                color: '#DF5353' // red
	            }]
	        },
	        // GE Data Viz colours
	        dataVisColors: {
	          type: Object,
	          value: {
	            "dv-basic-blue": "rgb(93, 165, 218)",
	            "dv-basic-orange": "rgb(250, 164, 58)",
	            "dv-basic-green": "rgb(96, 189, 104)",
	            "dv-basic-pink": "rgb(241, 124, 176)",
	            "dv-basic-brown": "rgb(178, 145, 47)",
	            "dv-basic-purple": "rgb(178, 118, 178)",
	            "dv-basic-yellow": "rgb(222, 207, 63)",
	            "dv-basic-red": "rgb(241, 88, 84)",
	            "dv-basic-gray": "rgb(77, 77, 77)",

	            "dv-light-blue": "rgb(136, 189, 230)",
	            "dv-light-orange": "rgb(251, 178, 88)",
	            "dv-light-green": "rgb(144, 205, 151)",
	            "dv-light-pink": "rgb(246, 170, 201)",
	            "dv-light-brown": "rgb(191, 165, 84)",
	            "dv-light-purple": "rgb(188, 153, 199)",
	            "dv-light-yellow": "rgb(237, 221, 70)",
	            "dv-light-red": "rgb(240, 126, 110)",
	            "dv-light-gray": "rgb(140, 140, 140)",

	            "dv-dark-blue": "rgb(38, 93, 171)",
	            "dv-dark-orange": "rgb(223, 92, 36)",
	            "dv-dark-green": "rgb(5, 151, 72)",
	            "dv-dark-pink": "rgb(229, 18, 111)",
	            "dv-dark-brown": "rgb(157, 114, 42)",
	            "dv-dark-purple": "rgb(123, 58, 150)",
	            "dv-dark-yellow": "rgb(199, 180, 46)",
	            "dv-dark-red": "rgb(203, 32, 39)",
	            "dv-dark-gray": "rgb(0, 0, 0)"
	          }
	        },
	        seriesColorOrder: {
	          type: Array,
	          value: [
	            "dv-basic-blue",
	            "dv-basic-orange",
	            "dv-basic-green",
	            "dv-basic-pink",
	            "dv-basic-brown",
	            "dv-basic-purple",
	            "dv-basic-yellow",
	            "dv-basic-red",
	            "dv-basic-gray",

	            "dv-light-blue",
	            "dv-light-orange",
	            "dv-light-green",
	            "dv-light-pink",
	            "dv-light-brown",
	            "dv-light-purple",
	            "dv-light-yellow",
	            "dv-light-red",
	            "dv-light-gray",

	            "dv-dark-blue",
	            "dv-dark-orange",
	            "dv-dark-green",
	            "dv-dark-pink",
	            "dv-dark-brown",
	            "dv-dark-purple",
	            "dv-dark-yellow",
	            "dv-dark-red",
	            "dv-dark-gray"
	          ]
	        }
    	},
    	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.
	        var ajax = this.$$('iron-ajax');

	        ajax.addEventListener('response', function(evt) {
	          // console.log(evt.detail.response);
	        });

	        setInterval(function(){ 
	          ajax.generateRequest();
	        }, 5000);

	        ajax.generateRequest();
      	},
      	createSeriesColorsArray: function(colors, keysInOrder){
        	return keysInOrder.map(function(key) {
              var color = colors[key];
              if (color) {
                return color;
              }
            });
      	}
    }
</script>