| 1 | | <!DOCTYPE html |
|---|
| 2 | | PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
|---|
| 3 | | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|---|
| 4 | | <html xmlns="http://www.w3.org/1999/xhtml" |
|---|
| 5 | | xmlns:py="http://genshi.edgewall.org/" |
|---|
| 6 | | xmlns:xi="http://www.w3.org/2001/XInclude"> |
|---|
| 7 | | <xi:include href="layout.html" /> |
|---|
| 8 | | <xi:include href="macros.html" /> |
|---|
| 9 | | <head> |
|---|
| 10 | | |
|---|
| 11 | | <style type="text/css"> |
|---|
| 12 | | #chart { height: 500px } |
|---|
| 13 | | </style> |
|---|
| 14 | | |
|---|
| 15 | | <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> |
|---|
| 16 | | <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script> |
|---|
| 17 | | <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js"></script> |
|---|
| 18 | | <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/json/json-min.js"></script> |
|---|
| 19 | | <!-- OPTIONAL: Connection (enables XHR) --> |
|---|
| 20 | | <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script> |
|---|
| 21 | | <!-- Source files --> |
|---|
| 22 | | <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/charts/charts-experimental-min.js"></script> |
|---|
| 23 | | </head> |
|---|
| 24 | | <body> |
|---|
| 25 | | <p/> |
|---|
| 26 | | <span class="chart_title"> |
|---|
| 27 | | <h1>Ticket Statistics</h1> |
|---|
| 28 | | </span> |
|---|
| 29 | | <div id="content"> |
|---|
| 30 | | <div id="chart"></div> |
|---|
| 31 | | <form action="" method="post" id="dt_frm"> |
|---|
| 32 | | <label for="start_date">Start Date: </label> |
|---|
| 33 | | <input type="text" name="start_date" id="start_date" value="${start_date}"/> |
|---|
| 34 | | <label for="end_date">End Date: </label> |
|---|
| 35 | | <input type="text" name="end_date" id="end_date" value="${end_date}"/> |
|---|
| 36 | | <label for="resolution">Resolution: </label> |
|---|
| 37 | | <input type="text" name="resolution" id="resolution" value="${resolution}"/> |
|---|
| 38 | | <input type="submit" value="Update Chart"/> |
|---|
| 39 | | </form> |
|---|
| 40 | | </div> |
|---|
| 41 | | |
|---|
| 42 | | <script type = "text/javascript"> |
|---|
| 43 | | YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.5.2/build/charts/assets/charts.swf"; |
|---|
| 44 | | |
|---|
| 45 | | var mychartdata = |
|---|
| 46 | | [ |
|---|
| 47 | | <py:for each="t in ticket_data"> |
|---|
| 48 | | { date: "${t['date']}", new_tickets: ${t['new']}, closed: ${t['closed']}, open: ${t['open']} }, |
|---|
| 49 | | </py:for> |
|---|
| 50 | | ]; |
|---|
| 51 | | |
|---|
| 52 | | var myDataSource = new YAHOO.util.DataSource( mychartdata ); |
|---|
| 53 | | myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
|---|
| 54 | | myDataSource.responseSchema = |
|---|
| 55 | | { |
|---|
| 56 | | fields: [ "date", "new_tickets", "open", "closed" ] |
|---|
| 57 | | }; |
|---|
| 58 | | |
|---|
| 59 | | var seriesDef = |
|---|
| 60 | | [ |
|---|
| 61 | | { displayName: "New Tickets", yField: "new_tickets", style: {color: 0xff0000, size: 40} }, |
|---|
| 62 | | { displayName: "Closed Tickets", yField: "closed", style: {color: 0x00ff00, size:40} }, |
|---|
| 63 | | { type: "line", displayName: "Open Tickets", yField: "open", style: {color: 0x0000ff} } |
|---|
| 64 | | ]; |
|---|
| 65 | | |
|---|
| 66 | | var numtixAxis = new YAHOO.widget.NumericAxis(); |
|---|
| 67 | | numtixAxis.minimum = 0 |
|---|
| 68 | | |
|---|
| 69 | | YAHOO.example.getDataTipText = function( item, index, series ) |
|---|
| 70 | | { |
|---|
| 71 | | var toolTipText = series.displayName + " for " + item.date; |
|---|
| 72 | | toolTipText += "\n" + item[series.yField] ; |
|---|
| 73 | | return toolTipText; |
|---|
| 74 | | } |
|---|
| 75 | | |
|---|
| 76 | | var mychart = new YAHOO.widget.ColumnChart( "chart", myDataSource, |
|---|
| 77 | | { |
|---|
| 78 | | xField: "date", |
|---|
| 79 | | series: seriesDef, |
|---|
| 80 | | yAxis: numtixAxis, |
|---|
| 81 | | dataTipFunction: YAHOO.example.getDataTipText, |
|---|
| 82 | | style: {legend: {display: "bottom"}} |
|---|
| 83 | | }); |
|---|
| 84 | | |
|---|
| 85 | | |
|---|
| 86 | | </script> |
|---|
| 87 | | |
|---|
| 88 | | </body> |
|---|
| 89 | | </html> |