<html> <script src=“http://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(“#submit”).click(function(){ chart.animationPlayed = false; pie_chart.animationPlayed = false; jQuery.ajax({ url:“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'); }); }); </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>