<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/SIG/SiteNew.Master" CodeBehind="BienvenidaNew.aspx.vb" Inherits="SGHweb.BienvenidaNew" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="scripts/Chart.js"></script>
    <script>

        var pieData = [
				{
				    value: 300,
				    color: "#F7464A",
				    highlight: "#FF5A5E",
				    label: "Red"
				},
				{
				    value: 50,
				    color: "#46BFBD",
				    highlight: "#5AD3D1",
				    label: "Green"
				},
				{
				    value: 100,
				    color: "#FDB45C",
				    highlight: "#FFC870",
				    label: "Yellow"
				},
				{
				    value: 40,
				    color: "#949FB1",
				    highlight: "#A8B3C5",
				    label: "Grey"
				},
				{
				    value: 120,
				    color: "#4D5360",
				    highlight: "#616774",
				    label: "Dark Grey"
				}

        ];

        var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
        var lineChartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
				{
				    label: "My First dataset",
				    fillColor: "rgba(220,220,220,0.2)",
				    strokeColor: "rgba(220,220,220,1)",
				    pointColor: "rgba(220,220,220,1)",
				    pointStrokeColor: "#fff",
				    pointHighlightFill: "#fff",
				    pointHighlightStroke: "rgba(220,220,220,1)",
				    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
				},
				{
				    label: "My Second dataset",
				    fillColor: "rgba(151,187,205,0.2)",
				    strokeColor: "rgba(151,187,205,1)",
				    pointColor: "rgba(151,187,205,1)",
				    pointStrokeColor: "#fff",
				    pointHighlightFill: "#fff",
				    pointHighlightStroke: "rgba(151,187,205,1)",
				    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
				}
            ]

        }

        var barChartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                },
                {
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,0.8)",
                    highlightFill: "rgba(151,187,205,0.75)",
                    highlightStroke: "rgba(151,187,205,1)",
                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                }
            ]

        }


        window.onload = function () {
            var ctx1 = document.getElementById("A").getContext("2d");
            window.myChartA = new Chart(ctx1).Pie(pieData); 

            var ctx2 = document.getElementById("B").getContext("2d");
            window.myChartB = new Chart(ctx2).Line(lineChartData);

            var ctx3 = document.getElementById("C").getContext("2d");
            window.myChartC = new Chart(ctx3).Bar(barChartData);
            
        };
        

	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <br />
    <center>
        <img alt="" src="Resources/head.jpg" />
    </center>

<%--            <div style="align-content:center">
                <div id="canvas-holder" style="float:left">
                    <canvas id="A" width="300" height="300"/>
                </div>

                <div id="canvas-holder" style="float:left">
                    <canvas id="B" width="300" height="300"/>
                </div>

                <div id="canvas-holder" style="float:left">
                    <canvas id="C" width="300" height="300"/>
                </div>
            </div>--%>
			
	
</asp:Content>
