<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>