<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SimpleAppForTesting._Default" %>

<%@ Register assembly="JQChart.Web" namespace="JQChart.Web.UI.WebControls" tagprefix="jqChart" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link rel="stylesheet" type="text/css" href="~/Styles/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="~/Styles/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="~/Styles/themes/base/jquery.ui.theme.css" />

    <script src="<% = ResolveUrl("~/Scripts/jquery-1.6.3.js") %>" type="text/javascript"></script>
    <script src="<% = ResolveUrl("~/Scripts/jquery.jqRangeSlider.min.js") %>" type="text/javascript"></script>
    <script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="<% = ResolveUrl("~/Scripts/excanvas.js") %>"></script><![endif]-->

    <style type="text/css">
    .ToolTip
    {
        padding: 3px;
        background:white;
        color: Black;
        z-index: 1000;
        border: 1px solid;
    }
    </style>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var chartName = '#<%= MonthlyChart.ClientID %>';

        $(chartName).bind('tooltipFormat', function (e, data) {
            return "<div class='ToolTip'>Billing Date: " + data.x + "<br/>" +
                   "kWh Usage: " + data.y + "<br/></div>";
        });
    });
</script>


        <jqChart:Chart ID="MonthlyChart" runat="server" Width="750px" Height="400px">
        <Title Text="My Electricity Use by Billing Period"></Title>
        <Border StrokeStyle="emboss" />
        <Background FillStyleType="LinearGradient" X1="0">
            <ColorStops>
                <jqChart:ColorStop Color="#F2DCBB" />
                <jqChart:ColorStop Color="white" Offset="1" />
            </ColorStops>
        </Background>
        <ChartAreaBackground Color="#FEF7EA">
        </ChartAreaBackground>
        <Legend Location="Bottom" Border-Visible="false" Margin="15">
        <CustomItems>
            <jqChart:LegendItem>
                <Text Text="Off Peak Usage"></Text>
                <Marker>
                    <FillStyle Color="#F4C065"></FillStyle>
                </Marker>
            </jqChart:LegendItem>
            <jqChart:LegendItem>
                <Text Text="Pre-Smart Meter data"></Text>
                <Marker>
                    <FillStyle Color="#B9DEEA"></FillStyle>
                </Marker>
            </jqChart:LegendItem>
        </CustomItems>
        </Legend>
        <Axes>
            <jqChart:LinearAxis Location="left" ExtendRangeToOrigin="true">
                <Title Text="KWh - Kilowatt Hours"></Title>
            </jqChart:LinearAxis>
            <jqChart:CategoryAxis CategoriesField="BillPeriodEndDate" Location="Bottom">
                <Labels Angle="-45"></Labels>
            </jqChart:CategoryAxis>
        </Axes>

        <Series>
            <jqChart:ColumnSeries YValuesField="TotalUse" Title="Monthly Total Usage">
                <FillStyle Color="#F4C065"></FillStyle>
                <%-- <Markers LineWidth="1" StrokeStyle="Black" MarkerType="Rectangle"></Markers> --%>
            </jqChart:ColumnSeries>
            <jqChart:ColumnSeries YValuesField="OffPeakUse">
                <%-- <Markers LineWidth="1" StrokeStyle="Black" MarkerType="Rectangle"></Markers> --%>
            </jqChart:ColumnSeries>
        </Series>
    </jqChart:Chart>
</asp:Content>