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