Posicionar gráfico no centro

23/04/2012

0

.NET

Tenho uma página com seguinte layout:
DIV -> Topo(Cabeçalho)
DIV -> Corpo(Gráfico de botões)
DIV -> Rodapé

Preciso informar a minha página, que o meu gráfico vai iniciar na DIV -> Corpo. Eu preciso fazer isso, porque do jeito que está os tres botões estão iniciando em cima do gráfico e não em baixo, conforme o layout me passado. Como eu faço isso? Abaixo o cófigo:

<head runat=server>
<title></title>
<link href=~/Style/FrameWork.css type=text/css rel=stylesheet />
</head>
<body>
<form id=form1 runat=server>
<div class=topo>
<cc1:FControl ID=FControl1 runat=server Arquivo=~/FrameWork/CabecalhoLogin.ascx
Controle=Pagebanner />
</div>

<div class=conteudo>
<table width=60% style=margin-left:20%;margin-right:10%>
O gráfico deve aparecer aqui e os botões em baixo.
<tr align=right>
<td>
<asp:Button runat=server ID=btnImprimir Text=Imprimir class=buttonLogin100 Width=60px />
 
 
<asp:Button runat=server ID=btnSalvar Text=Salvar class=buttonLogin100 Width=60px />
 
 
<asp:Button runat=server ID=btnVoltar Text=Voltar class=buttonLogin100 Width=60px ForeColor=/>
</td>
</tr>
</table>

<div class=rodape>
<cc1:FControl ID=FControl2 runat=server Controle=Rodape></cc1:FControl>
</div>
</form>
</body>
Pjava

Pjava

Responder

Posts

23/04/2012

Pjava

Em realidade preciso fazer com que o gráfico inicie na <div class=conteudo>
Responder
Gostei + 0

23/04/2012

Joel Rodrigues

Bom, tente definir o atributo runat=server e dê um id pra div do meio, no seu código então você faz referência a ela.
Uma pergunta: por que você já não coloca o tal gráfico ali e altera apenas os dados via C#?
Responder
Gostei + 0

24/04/2012

Pjava

Como eu faço isso Joel? Sou meio cru ainda com C#, mas estou achando legal trampar com ele. Mas ainda preciso aprender algumas coisas e a melhor forma é essa, fazendo algo real. Abaixo meu código C# desse gráfico.

        protected void Page_Load(object sender, EventArgs e)
        {
            int codUsuario = 123;
            DesempenhoMensalBL bl = new DesempenhoMensalBL();
            bl.Execute(codUsuario);

            //Cria o objeto Chart, base de todos os gráficos
            RadChart radChart1 = new RadChart();
            radChart1.ChartTitle.TextBlock.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Center;
            radChart1.ChartTitle.TextBlock.Text = EVOLUÇÃO MENSAL APROVADAS DÉBITO;            

            //Muda a cor de fundo do gráfico para transparente
            radChart1.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
            radChart1.Appearance.FillStyle.MainColor = System.Drawing.Color.Transparent;
            radChart1.PlotArea.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
            radChart1.PlotArea.Appearance.FillStyle.MainColor = System.Drawing.Color.Transparent;
            this.Controls.Add(radChart1);

            RadChart radChart2 = new RadChart();
            radChart2.ChartTitle.TextBlock.Text = EVOLUÇÃO MENSAL APROVADAS CRÉDITO;

            //Muda a cor de fundo do gráfico para transparente
            radChart2.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
            radChart2.Appearance.FillStyle.MainColor = System.Drawing.Color.Transparent;
            radChart2.PlotArea.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
            radChart2.PlotArea.Appearance.FillStyle.MainColor = System.Drawing.Color.Transparent;
            this.Controls.Add(radChart2);
                                    
            ChartSeries chartSeries1 = radChart1.CreateSeries(Débito-Master, System.Drawing.Color.Red, System.Drawing.Color.Red, ChartSeriesType.Bar);
            ChartSeries chartSeries2 = radChart2.CreateSeries(Crédito-Master, System.Drawing.Color.Red, System.Drawing.Color.Red, ChartSeriesType.Bar);
            ChartSeries chartSeries3 = radChart1.CreateSeries(Débito-Visa, System.Drawing.Color.Silver, System.Drawing.Color.Silver, ChartSeriesType.Bar);
            ChartSeries chartSeries4 = radChart2.CreateSeries(Crédito-Visa, System.Drawing.Color.Silver, System.Drawing.Color.Silver, ChartSeriesType.Bar);

            ChartSeries chartSeries5 = radChart1.CreateSeries( , System.Drawing.Color.Black, System.Drawing.Color.Black, ChartSeriesType.Line);
            ChartSeries chartSeries6 = radChart2.CreateSeries( , System.Drawing.Color.Black, System.Drawing.Color.Black, ChartSeriesType.Line);

            chartSeries1.Type = ChartSeriesType.Bar;
            chartSeries2.Type = ChartSeriesType.Bar;
            chartSeries3.Type = ChartSeriesType.Bar;
            chartSeries4.Type = ChartSeriesType.Bar;

            chartSeries5.Type = ChartSeriesType.Line;
            chartSeries6.Type = ChartSeriesType.Line;
                 

            //A orientação do gráfico
            radChart1.SeriesOrientation = ChartSeriesOrientation.Vertical;
            radChart2.SeriesOrientation = ChartSeriesOrientation.Vertical;
                                   
            //Tamanho da área do gráfico em pixels
            radChart1.Height = 200;
            radChart1.Width  = 800;

            radChart2.Height = 200;
            radChart2.Width = 800;

            chartSeries1.SetValues(bl.doubleArrayDebitoMaster);
            chartSeries3.SetValues(bl.doubleArrayDebitoVisa);

            chartSeries2.SetValues(bl.doubleArrayCreditoMaster);
            chartSeries4.SetValues(bl.doubleArrayCreditoVisa);

            chartSeries5.SetValues(bl.doubleArrayDebito);
            chartSeries6.SetValues(bl.doubleArrayCredito);

            
        }
    }
}


Meu código ASPX, onde deveria subir o gráfico

<body>
    <form id=form1 runat=server>
        <div class=topo>
        <cc1:FWServerControl ID=FWServerControl1 runat=server Arquivo=~/Modulos/FrameWork/CabecalhoLogin.ascx
            Controle=Pagebanner />
    </div>
    
    <div class=conteudo>   
           

        <table width=60% style=margin-left:20%;margin-right:10%>            
            <tr align=right>
                <td>
                    <asp:Button runat=server ID=btnImprimir Text=Imprimir class=buttonLogin100 Width=60px />
                     
                     
                    <asp:Button runat=server ID=btnSalvar Text=Salvar class=buttonLogin100 Width=60px />
                     
                     
                    <asp:Button runat=server ID=btnVoltar Text=Voltar class=buttonLogin100 Width=60px ForeColor=/>
                </td>
            </tr>
        </table>
    </div>
           
     <div class=rodape>
        <cc1:FWServerControl ID=FWServerControl2 runat=server Controle=Rodape></cc1:FWServerControl>
    </div>
        
    </form>
</body>
Responder
Gostei + 0

24/04/2012

Pjava

Faltou dizer que o gráfico sobe na DIV conteudo.
Responder
Gostei + 0

24/04/2012

Joel Rodrigues

Bem, o que eu quis dizer foi o seguinte:
1) Primeiramente definir os atributos da div para que ela seja reconhecida no lado servidor.
<div id=divConteudo runat=server>
</div>


2) No code behind (no arquivo C#), você criaria seu gráfico e depois adicionaria à div.
divConteudo.Controls.Add(meuGraficoJaCriado);


Não testei, mas faz sentido. Teste aí e veja no que dá.
Responder
Gostei + 0

24/04/2012

Joel Rodrigues

Com relação à minha pergunta, a ideia era declarar o gráfico já no HTML e referenciá-lo no C#. Ficaria algo parecido com isso:
<body>
<div id=divTopo></div>

<div id=divConteudo>
<tag_do_grafico id=meuGrafico runat=server/>
</div>

<div id=divRodape></div>

</body>


Então você alteraria as propriedades do gráfico pelo código C#:
meuGrafico.Propriedade = valor;


Boa sorte.
Responder
Gostei + 0

24/04/2012

Joel Rodrigues

Confesso que essa forma de trabalhar eu descobri sozinho, fazendo testes, ´´fuçando´´ a linguagem, mas pra você que está começando, tem uns bons livros que indico:
- Visual C# 2010 - Step by Step
- ASP.NET 4 Unleashed

Boa sorte em seus projetos.
Responder
Gostei + 0

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar