RFC: html/javascript file to plot graph by accessing timing data from report.json file‏

Mon Jun 16 14:57:00 CDT 2014

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test Timing Plot</title>

        <script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="./report.json"></script>
        <script type="text/javascript">
function load()
{
        var obj = testreport
        var keys = Object.keys(obj)
        var values = []
        for (var i in keys) {
                values[i] = obj[keys[i]]
        }

$(function () {
        $('#container').highcharts({
            chart: {
                zoomType: 'x',
                animation: true
            },
            title: {
                text: 'Test Timing Plot'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
            },
            xAxis: {
                categories: keys,
                min: 0,
                max: 15
            },
            scrollbar: {
                enabled: true,
            },
            yAxis: {
                title: {
                    text: 'Ellapsed time(ms)'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1,
Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'Time(ms)',
                data: values
            }]
        });
    });
}

        </script>
    </head>
    <body onload="load()" bgcolor="#E6E6FA">

<div id="container" style="min-width: 310px; height: 400px; margin: 0
auto"></div>

    </body>
</html>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://selenic.com/pipermail/mercurial-devel/attachments/20140617/75ffd34e/attachment.html>