Introduction:
A few hours only past since my first post [1] on this matter, but there's nothing like Connect to keep the momentum.
So this evening I have 3 elements to add to the project:
- The generic SQL query to summarise the content of the SWD Execution table
- The houlry exec count per Advertisement Name
- A sample page with a chart to validate the basic look and feel
SQL Query I:
The first query I ran is very simple: list all the software delivery execution in the event table by run count. Order the result by count descending, and lilmit the data set to 100 results, albeit we could limit the dataset to any policy that has more than n execution just as well:
select top 100 AdvertisementName , COUNT(*) as '#' from Evt_AeX_SWD_Execution group by AdvertisementName, AdvertisementId order by COUNT(*) desc
Note that we use the AdvertisementId field in the group by as a safety measure, in case we have multiple policies with the same name.
SQL Query II:
With the first stage of our 'rocket' done (I'm into rocket nowadays), we can tackle the 2nd stage now, with a hard coded variable (the policy name) instead of dynamic data:
select AdvertisementName , COUNT(*) as '#', DATEPART(YY, e.Start) as 'Year', DATEPART(MM, e.Start) as 'Month', DATEPART(DD, e.Start) as 'Day', DATEPART(hh, e.Start) as 'Hour' from Evt_AeX_SWD_Execution e where e.AdvertisementName = 'XYZ' group by AdvertisementName, DATEPART(YY, e.Start), DATEPART(MM, e.Start), DATEPART(DD, e.Start), DATEPART(hh, e.Start) order by DATEPART(MM, e.Start) desc, DATEPART(DD, e.Start) desc, DATEPART(hh, e.Start) desc
Formatted results:
With a basic stage 1 and 2 we can now work on the payload: transforming the result set into a Javascript array that will be consumed by the Google Chart API. Here's what the results from Query II looks like after manual editing:
[ ['Hour', 'Exec #'], ['2014-02-04 21',189], ['2014-02-04 20',1041], ['2014-02-04 19',699], ['2014-02-04 18',996], ['2014-02-04 17',3624], ['2014-02-04 16',6731], ['2014-02-04 15',1751], ['2014-02-04 14',2185], ['2014-02-04 13',2941], ['2014-02-04 12',11994], ['2014-02-04 11',3655], ['2014-02-04 10',5685], ['2014-02-04 09',13165], ['2014-02-04 08',21919], ['2014-02-04 07',5920], ['2014-02-04 06',2114], ['2014-02-04 05',734], ['2014-02-04 04',941], ['2014-02-04 03',598], ['2014-02-04 02',688], ['2014-02-04 01',820], ['2014-02-04 00',1613], ['2014-02-03 23',1328], ['2014-02-03 22',1493], ['2014-02-03 21',1528], ['2014-02-03 20',5135], ['2014-02-03 19',1190], ['2014-02-03 18',1264], ['2014-02-03 17',3099], ['2014-02-03 16',29990], ['2014-02-03 15',6941], ['2014-02-03 14',727], ['2014-02-03 13',88], ['2014-02-03 12',7] ]
Sample Chart rendered in Chrome:
The full html code is shown below, but rather than detailing it (it's very very simple) let's look at the output in Chrome:
Conclusion:
The result is quite interesting, but a little plain.
So I wouldn't want this to be the only data displayed in a full browser page (this would be an acceptable view on a pop-up inside the console, after a right click on a policy for example).
So I'm thinking about the next step: we probably want to have two line in there: the first (blue) for success, the second (red) for failures.
And also I think that we could build up a page with 20 ~ 50 charts quite easily, to provide side by side comparison (not quite like the calendar view in aila2 but something along this line).
We shall see!
References:
Full sample html code:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>aila2-web: Result Viewer</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
</head>
<body>
<h3 id ="hourly_chart">Hourly hit counts</h3>
<div id="hourly_chart_div" style="width: 900px; height: 300px;"></div>
</body>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
var table = [['Hour', 'Exec #'],['02-04 21',189], ['02-04 20',1041], ['02-04 19',699], ['02-04 18',996], ['02-04 17',3624], ['02-04 16',6731], ['02-04 15',1751], ['02-04 14',2185], ['02-04 13',2941], ['02-04 12',11994], ['02-04 11',3655], ['02-04 10',5685], ['02-04 09',13165], ['02-04 08',21919], ['02-04 07',5920], ['02-04 06',2114], ['02-04 05',734], ['02-04 04',941], ['02-04 03',598], ['02-04 02',688], ['02-04 01',820], ['02-04 00',1613], ['02-03 23',1328], ['02-03 22',1493], ['02-03 21',1528], ['02-03 20',5135], ['02-03 19',1190], ['02-03 18',1264], ['02-03 17',3099], ['02-03 16',29990], ['02-03 15',6941], ['02-03 14',727], ['02-03 13',88], ['02-03 12',7]];
var data_hourly = google.visualization.arrayToDataTable(table);
var options_hourly = {
//title: 'Hourly statistics',
hAxis: {title: 'Hour'}
};
var chart_hourly = new google.visualization.LineChart(document.getElementById('hourly_chart_div'));
chart_hourly.draw(data_hourly, options_hourly);
}
</script>
</html>