googlechart.html

<!--
  Copyright 2014 Urbiworx

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/x-red" data-template-name="chart request">
    <div class="form-row">
        <label for="node-input-charttype"><i class="icon-tasks"></i> Charttype</label>
        <select type="text" id="node-input-charttype" style="width: 150px;">
			<option value="AreaChart">AreaChart</option>
			<option value="BarChart">BarChart</option>
			<option value="ColumnChart">ColumnChart</option>
			<option value="ScatterChart">ScatterChart</option>
			<option value="AnnotationChart">AnnotationChart</option>
			<option value="LineChart">LineChart</option>
        </select>
    </div>
	<div class="form-row">
        <label for="node-input-path"><i class="icon-tag"></i> Path</label>
        <input type="text" id="node-input-path" placeholder="Path">
    </div>
	<div class="form-row">
        <label for="node-input-refresh"><i class="icon-tag"></i> Refresh (seconds)</label>
        <input type="text" id="node-input-refresh" placeholder="60">
    </div>
	<div class="form-row">
        <label for="node-input-formatx"><i class="icon-tag"></i> X-Axis Format</label>
        <input type="text" id="node-input-formatx" placeholder="dd/MM/yyyy HH:mm">
    </div>
	<div class="form-row">
        <label for="node-input-formaty"><i class="icon-tag"></i> Y-Axis Format</label>
        <input type="text" id="node-input-formaty" placeholder="#$">
    </div>
	<div class="form-row">
		<label for="node-input-attrivs"><i class="icon-tag"></i> Attributes</label>
		<div id="attribs"/>
		<a id="add" class="btn btn-mini"><i class="icon-plus"></i>add</a>
    </div>
</script>

<script type="text/x-red" data-help-name="chart request">
    <p>Receives a Chart Request under a given URL<br/></p>
	<p>Specify the URL under which the chart should be made available and the chart type (see <a href="https://developers.google.com/chart/interactive/docs/gallery">examples</a>)</p>
	<p>Also define which attributes should be displayed in the chart. If you are using dates you can use the AnnotatedChart, your first attribute should the be of type 'date'.</p>
	<p>All charts refresh ever 1 min, besides the Annotated Chart</p>
	<p>Use a "chart response" node to send the response to the client. The data should be provided in the msg.payload. Example for a function node that provides chart data:</p>
	<p><pre>
msg.payload=[
	{name:'ute',age:20},
	{name:'schnute',age:21},
	{name:'kasimir',age:25},
];
return msg;
	</pre>
	In this example you will need to add two attributes: Click "add" in the "Chart request" node details to add the attribute "name" as a string, and "age" as a number.</p>
	<p>or when using dates</p>
	<p><pre>
msg.payload=[
	{day:new Date(2014,10,1),sales:500},
	{day:new Date(2014,10,2),sales:600},
	{day:new Date(2014,10,3),sales:400}
];
return msg;
	</pre></p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('chart request',{
        category: 'advanced-function',
        color:"darksalmon",
        defaults: {
			charttype: {value:"AreaChart",required:true},
			path: {value:"/googlechart",required:true},
			refresh: {value:"60"},
			formatx:{},
			formaty:{},
			attribs:{}
        },
        outputs:1,
        icon: "arrow-in.png",

        label: function() {
            return this.name||this.command||"Chart Request";
        },
		oneditprepare:function(){	
			var node=this;
			if (typeof(node.attribs)!="undefined"&&(node.attribs.length)!="undefined"&&node.attribs.length>0){
				for (var i=0;i<node.attribs.length;i++){
					addRule(node.attribs[i].name,node.attribs[i].type);
				}
			}
			function addRule(attribute, type){
				var types=['number','string','date'];
				var container=$("<div>",{class:"attrib"});
				$("#attribs").append(container);
				var inputfield=$('<input/>',{class:"node-input-rule-value name",type:"text",style:"margin-left: 5px; width: 145px;"});
				container.append(inputfield);
				if (typeof(attribute)!="undefined"){
					inputfield.val(attribute);
				}
				var selectField = $('<select/>',{class:"type",style:"width:120px; margin-left: 5px; text-align: center;"});
				container.append(selectField);
				for (var d in types) {
					selectField.append($("<option></option>").val(types[d]).text(types[d]));
				}
				if (typeof(type)!="undefined"){
					selectField.val(type);
				}
				var remover=$("<a class='btn btn-mini'><i class='icon-minus'></i>remove</a>").click(function(){
						container.remove();
				});
				container.append(remover);
			}
			$("#add").click(function(){
				addRule();
			});
		},
		oneditsave: function() {
			var node=this;
			node.attribs=[];
			$(".attrib").each(function(index){
				node.attribs[node.attribs.length]={name:$(this).find(".name").val(),type:$(this).find(".type").val()};
			});
		}
    });
</script>





<script type="text/x-red" data-template-name="chart response">
    <div class="form-row">
       Nothing to define
    </div>
</script>

<script type="text/x-red" data-help-name="chart response">
    <p>Renders a chart request received by a chart request node<br/></p>
	<p>Please note that you will need a chart request to use this chart response node.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('chart response',{
        category: 'advanced-function',
        color:"darksalmon",
      
        inputs:1,
        icon: "arrow-in.png",
        align: "right",
        label: function() {
            return "Chart Response";
        }
    });
</script>