Posicionar gráfico no centro

23/04/2012

0

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

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

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

24/04/2012

Pjava

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

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

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

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

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

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

Aceitar