<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WidgetGraph.Default" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Graph</title>
    <script type="text/javascript">
        function ChangeChart(type)
        {
            document.forms[0].ChartType.value = type;
            document.forms[0].submit();
        }
    </script>
    <style type="text/css">
        body
        {
            padding: 2px;
            margin: 2px;
            font-family: Calibri;
            font-size: 11pt;
        }
        
        label
        {
            font-family: Calibri;
            font-size: 11pt;
            color: #333333;
        }
        
        div.Filter
        {
            padding-top: 10px;
            padding-bottom: 10px;
            width: 748px;
            border: solid 1px #CCCCCC;
            margin-bottom: 10px;
        }
        
        div.Chart
        {
            float: left;
        }
        
        div.ChartToolbar
        {
            float: left;
            border: solid 1px #CCCCCC;
        }
    </style>
</head>
<body>
    <form id="GraphForm" runat="server">
        <input type="hidden" name="ChartType" value="column" />
        <div class="Filter">
            <label>&nbsp;Site</label>
            <asp:DropDownList ID="SiteCmb" Width="250" runat="server" AutoPostBack="true"></asp:DropDownList>
            <label>&nbsp;&nbsp;&nbsp;Asset Type</label>
            <asp:DropDownList ID="AssetTypeCmb" Width="200" runat="server" AutoPostBack="true"></asp:DropDownList>
        </div>
        <div class="Chart">
            <asp:chart ID="MainChart" Height="400" Width="700" runat="server">
                <legends>
                    <asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"></asp:Legend>
                </legends>
                <ChartAreas>
                    <asp:ChartArea Name="MainChartArea"></asp:ChartArea>
                </ChartAreas>
                <Titles>
                    <asp:Title Font="Calibri, 12pt, style=Bold" ForeColor="DimGray" Name="Title"></asp:Title>
                </Titles>
            </asp:chart>        
        </div>
        <div class="ChartToolbar">
            <a href="javascript:ChangeChart('column');"><img src="imgs/chart_column.png" width="48" height="48" alt="Column"/></a><br />
            <a href="javascript:ChangeChart('pie');"><img src="imgs/chart_pie.png" width="48" height="48" alt="Pie"/></a><br />
            <a href="javascript:ChangeChart('bar');"><img src="imgs/chart_bar.png" width="48" height="48" alt="Bar"/></a><br />
        </div>
        <div style="clear: both"></div>
    </form>
</body>
</html>
