Child pages
  • Embed Statistics Charts
Skip to end of metadata
Go to start of metadata

The following request allows to get an OnApp statistics chart HTML code that can be then used for embedding to third party applications.

  1. Include jquery  (if you didn't include it before in your code):

    http://onapp.test/assets/jquery.js
  2. Include highcharts:

    http://onapp.test/assets/highcharts/highcharts.js
  3. Get the required chart with the following API call:

     

    curl -i -X GET -u user:userpass http://onapp.test/virtual_machines/:virtual_machine_id/cpu_usage.chart



    HTML Example

    <!DOCTYPE html>
    <html>
    <head>
    <title>Testing</title>
    </head
    
    <body>
    <!--Include jquery-->
    <script src="http://onapp.test/assets/jquery.js"></script>
    <!--Include highcharts-->
    <script src="http://onapp.test/assets/highcharts/highcharts.js"></script>
    
    <!--Output from the .chart request-->
    
    <div class='chart'>
    <div id="highcharts-interface_usage-7b20c219e68594228a6d">
    </div>
    <script type="text/javascript">
     //<![CDATA[
     new Highcharts.Chart({chart: {renderTo: 'highcharts-interface_usage-7b20c219e68594228a6d', defaultSeriesType: 'line', minWidth: 700, height: 350, zoomType: 'x'}, lang: {decimalPoint: '.', downloadPNG: 'Download PNG image', downloadJPEG: 'Download JPEG image', downloadPDF: 'Download PDF document', downloadSVG: 'Download SVG vector image', exportButtonTitle: 'Export to raster or vector image', loading: 'Loading....', months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], printButtonTitle: 'Print the chart', resetZoom: 'Reset zoom', resetZoomTitle: 'Reset zoom level 1:1', thousandsSep: 3, weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']}, credits: {enabled: false}, title: {text: 'Instant', x: -20}, xAxis: {type: 'datetime', labels: {formatter: function() { return Highcharts.dateFormat("%e %b %H:%M", this.value); }}}, yAxis: {title: {text: '<span class="translation_missing" title="translation missing: en.mbps">Mbps</span>'}}, plotOptions: {series: {marker: {enabled: false, lineWidth: 0, states: {hover: {enabled: true}}}}}, tooltip: {shared: true, crosshairs: true}, series: [{name: 'Data Sent', data: [[1361542648000, 0.0]]}, {name: 'Data Received', data: [[1361542648000, 0.0]]}]});
     //]]
    </script>
    </div>
    <div class='chart'><div id="highcharts-interface_usage-20c18666715eb47e1c92"></div>
    <script type="text/javascript">
     //<![CDATA[
     new Highcharts.Chart({chart: {renderTo: 'highcharts-interface_usage-20c18666715eb47e1c92', defaultSeriesType: 'line', minWidth: 700, height: 350, zoomType: 'x'}, lang: {decimalPoint: '.', downloadPNG: 'Download PNG image', downloadJPEG: 'Download JPEG image', downloadPDF: 'Download PDF document', downloadSVG: 'Download SVG vector image', exportButtonTitle: 'Export to raster or vector image', loading: 'Loading....', months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], printButtonTitle: 'Print the chart', resetZoom: 'Reset zoom', resetZoomTitle: 'Reset zoom level 1:1', thousandsSep: 3, weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']}, credits: {enabled: false}, title: {text: 'Hourly', x: -20}, xAxis: {type: 'datetime', labels: {formatter: function() { return Highcharts.dateFormat("%e %b %H:%M", this.value); }}}, yAxis: {title: {text: '<span class="translation_missing" title="translation missing: en.mbps">Mbps</span>'}}, plotOptions: {series: {marker: {enabled: false, lineWidth: 0, states: {hover: {enabled: true}}}}}, tooltip: {shared: true, crosshairs: true}, series: [{name: 'Data Sent', data: [[1361358000000, 0.01], [1361361600000, 0.01], [1361365200000, 0.0]]}, {name: 'Data Received', data: [[1361358000000, 0.16], [1361361600000, 0.29], [1361365200000, 0.0]]}]});
     //]]
    </script>
    </div>
    </body>
    </html>
    
  4. Embed the HTML to your page.

 

  • No labels