project:uptimerobot:sample

<html> <script src=“ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <script src=“cdn.amcharts.com/lib/3/amcharts.js” type=“text/javascript”></script> <script src=“cdn.amcharts.com/lib/3/pie.js” type=“text/javascript”></script> <script src=“cdn.amcharts.com/lib/3/serial.js” type=“text/javascript”></script>

<script src=“cdn.amcharts.com/lib/3/exporting/amexport.js” type=“text/javascript”></script> <script src=“cdn.amcharts.com/lib/3/exporting/rgbcolor.js” type=“text/javascript”></script> <script src=“cdn.amcharts.com/lib/3/exporting/canvg.js” type=“text/javascript”></script> <script src=“cdn.amcharts.com/lib/3/exporting/filesaver.js” type=“text/javascript”></script> <!– amCharts javascript code –> <script>

var chartData = [];

var chart = AmCharts.makeChart(“chart_div”,{

	"type": "serial"
	,"pathToImages": "http://cdn.amcharts.com/lib/3/images/"
	,"dataProvider": chartData
	,"chartScrollbar": {
		"updateOnReleaseOnly": false
	}
	,height:200
	,"mouseWheelZoomEnabled":true
	,"chartScrollbar": {
		"autoGridCount": true
	  ,"scrollbarHeight": 20
	}
	,"chartCursor": {
		"cursorPosition": "mouse"
	}
	,"amExport": {
		"exportPNG": true
		,"imageFileName": "chart"
		,"buttonTitle": "Save chart"
	}
	,"categoryField": "category"

,“startDuration”: 2 animacijos greitis

	,"colors" : ["#B0DE09", "#FF6600"]
	,"categoryAxis": {
		"gridPosition": "start"
		,"labelRotation": 30
	}
	,"graphs": [
		{
			"title": "Online"
			,"balloonText": "[[value]] hours of [[category]] was in operative state"
			,"fillAlphas": 1
			,"id": "AmGraph-1"
			,"type": "column"
			,"valueField": "col1"
			,"color": "#0000FF"
		}
		,{
			"title": "Down"
			,"balloonText": "[[value]] hours of [[category]] was down"
			,"fillAlphas": 1
			,"id": "AmGraph-2"
			,"type": "column"
			,"valueField": "col2"
			,"color": "#FF0000"
		}
		]
	,"guides": []
	,"valueAxes": [{
			"id": "ValueAxis-1"
			,"stackType": "regular"
			,"title": "Operative time"
	}]
	,"allLabels": []
	,"balloon": {}
	,"legend": {
		"useGraphSettings": true
	}
	,"titles": [{
		"size": 20
		,"text": ""
		}]
}

);

var pie_data = []; var pie_chart = AmCharts.makeChart(“pie_chart_div”, {

  "type": "pie"
  ,"theme": "none"
	,"pathToImages": "http://cdn.amcharts.com/lib/3/images/"
	,"dataProvider": pie_data
	,"colors" : ["#B0DE09", "#FF6600"]
  ,"titleField": "title"
  ,"valueField": "value"
  ,"labelRadius": 5
  ,"radius": "42%"
  ,"innerRadius": "60%"
  ,"labelText": "[[percent]] % ([[value]] hours)"
	,"titles": [{ "size": 20, "text": "" }]
	,"amExport": {
		"exportPNG": true
		,"imageFileName": "chart"
		,"buttonTitle": "Save chart"
	}

});

kol kas nenaudojama, iki kol bus išplėsta galimybė nuspausti rodyti savaitės, mėnesio, pusmečio ir pan chart.addListener(“rendered”, zoomChart); zoomChart(); chart.addListener(“zoomed”, function(event){ console.log(event);

var totalUp = totalDown = totalUpPercent = totalDownPercent = 0; for (i = event.startIndex; i ⇐ event.endIndex; i++) {

totalUp = totalUp + parseFloat(chartData[i].col1);
totalDown = totalDown + parseFloat(chartData[i].col2)*(-1);

} total = totalUp + totalDown;

totalUpPercent = (100 / (totalUp + totalDown) * totalUp).toFixed(1); totalDownPercent = (100 / (totalUp + totalDown) * totalDown).toFixed(1);

pie_data = [{“title”: “Online”, “value”: (totalUp).toFixed(1), “percent”: totalUpPercent}, {“title”: “Down”, “value”: (totalDown).toFixed(1), “percent”: totalDownPercent}];

pie_chart.dataProvider = pie_data; pie_chart.titles[0].text = “From ” + event.startValue + “ to ” + event.endValue; pie_chart.validateData();

});

jQuery(document).ready(function(){

jQuery(“#api_key”).keypress(function(e){ if (e.which == 13) {

  $('#submit').trigger('click');
  return false;    //<---- Add this line
}

});

jQuery(“#submit”).click(function(){

jQuery.ajax({
	url:"//www.bukys.eu/VMI/ajax.php"
	,dataType: "json"
	,data: {
		"key": jQuery("#api_key").val()
	}
	,success: function(result){
		chartData = result.logs;
		chart.dataProvider = result.logs;
		chart.titles[0].text = result.name;
		chart.validateData();
	}
	,error: function(result){
		alert(result.responseText);
	}
});
});
jQuery("#myPage").click(function(){
jQuery("#api_key").val("m776379875-2dc93273904f9b25f13333bc");
$('#submit').trigger('click');
});

$(document).on({

  ajaxStart: function() { jQuery("body").addClass("loading");    },
   ajaxStop: function() { jQuery("body").removeClass("loading"); }    

});

});

</script> <input type=“text” style=“width: 70%;” id=“api_key” name=“api” placeholder=“Enter your uptimerobot api key”><input type=“button” value=“Vizualize” id=“submit”> or <a href=“javascript:;” id=“myPage”>Ignas.in</a>

</html>

  • project/uptimerobot/sample.txt
  • Last modified: 2021/05/06 18:29
  • by Ignas