- .Effecto
Membro Elevado - Posts : 209
Créditos : 15
Respeito : 0
Illusion, I do not beli
Warning :
[C#] Criando gráficos
Sáb 14 Set 2013, 13:20
Caro leitor, hoje eu vou falar e mostrar como criar gráficos dinâmicos usando a linguagem C#, da Microsoft. O gráfico será criado usando uma API do Google, que em resumo utiliza JavaScript e HTML5.
Utilizado para desenvolvimento:
Ferramenta Visual Studio 2012
Linguagem C#
API do Google para gerar gráfico
Não é difícil criar gráficos de linha, de pizza e de blocos. O Google mesmo te ajuda a desenvolver esses tipos de gráficos. Nesse site você consegue utilizar as ferramentas sem qualquer problema.
Inclusive, o Google mostra alguns códigos fontes criados como exemplo. O problema é o código HTML, JavaScript e C#. A dificuldade que tive foi juntar o código C# com o HTML. Depois de vários testes, consegui criar o gráfico pegando os dados do banco de dados. Agora vou mostrar pra vocês como eu fiz isso.
Eu não vou mostrar aqui como pegar os dados do banco de dados, a única coisa que precisa é de um “DataTable” ou uma variável do tipo “numérica” mesmo. Com o “DataTable” basta fazer o “loop” usando “for” e pronto.
Quando você cria a página .aspx no seu projeto, o primeiro passo é importar o arquivo JavaScript no topo da página.
Listagem 1 – Importando JavaScript
Listagem 2 – Literal
Listagem 3 – Adicionando div
Listagem 4 – Código C#
No meio do código eu fiz um “for” do “DataTable” e caso exista dado, começa a escrever os valores. Para escrever os valores, bastou adicionar o “Append” com os dados em C#. Os meus dados são: dia e contador.
No final do código eu adicionei os valores montados para o componente literal adicionado no começo do código HTML. Existe o comando “replace” para retirar a vírgula a fim de imprimir o gráfico corretamente no C#.
A figura 1 mostra como ficou a imagem na página. Os dados apareceram sem qualquer problema.
Fonte: iMasters
Utilizado para desenvolvimento:
Ferramenta Visual Studio 2012
Linguagem C#
API do Google para gerar gráfico
Não é difícil criar gráficos de linha, de pizza e de blocos. O Google mesmo te ajuda a desenvolver esses tipos de gráficos. Nesse site você consegue utilizar as ferramentas sem qualquer problema.
Inclusive, o Google mostra alguns códigos fontes criados como exemplo. O problema é o código HTML, JavaScript e C#. A dificuldade que tive foi juntar o código C# com o HTML. Depois de vários testes, consegui criar o gráfico pegando os dados do banco de dados. Agora vou mostrar pra vocês como eu fiz isso.
Eu não vou mostrar aqui como pegar os dados do banco de dados, a única coisa que precisa é de um “DataTable” ou uma variável do tipo “numérica” mesmo. Com o “DataTable” basta fazer o “loop” usando “for” e pronto.
Quando você cria a página .aspx no seu projeto, o primeiro passo é importar o arquivo JavaScript no topo da página.
Listagem 1 – Importando JavaScript
- Código:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Listagem 2 – Literal
- Código:
<asp:Literal id="ltlResultado" runat="server" />
Listagem 3 – Adicionando div
- Código:
<div id="chart_div" style="width:950px; height: 550px;"></div>
Listagem 4 – Código C#
- Código:
protected void cmdBuscar_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
try
{
DataTable _dt = buscaDados();
if (_dt != null && _dt.Rows.Count > 0)
{
StringBuilder str = new StringBuilder();
str.Append("<script type='text/javascript'>");
str.Append("google.load(\"visualization\", \"1\", { packages: [\"corechart\"] });");
str.Append("google.setOnLoadCallback(drawChart);");
str.Append("function drawChart() {");
str.Append(" var data = new google.visualization.arrayToDataTable([");
str.Append(@" ['Dia', 'Likes'], ");
if (_dt.Rows.Count == 1)
str.Append("['0',0], ");
for (int i = 0; i < _dt.Rows.Count; i++)
{
str.Append("['" + _dt.Rows[i]["dia"].ToString() + "'," +
_dt.Rows[i]["contador"].ToString() + "], ");
}
str.Append(@" ]);
var options = {
colors: ['#4C7951'],
series: {2: {type:'line'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>");
ltlResultado.Text = str.ToString().Replace("], ]", "] ]").TrimEnd(',');
}
else
ltlResultado.Text = "<Br><br> Nenhum valor encontrado.";
}
catch (Exception ex)
{
throw ex;
}
}
}
No meio do código eu fiz um “for” do “DataTable” e caso exista dado, começa a escrever os valores. Para escrever os valores, bastou adicionar o “Append” com os dados em C#. Os meus dados são: dia e contador.
No final do código eu adicionei os valores montados para o componente literal adicionado no começo do código HTML. Existe o comando “replace” para retirar a vírgula a fim de imprimir o gráfico corretamente no C#.
A figura 1 mostra como ficou a imagem na página. Os dados apareceram sem qualquer problema.
Fonte: iMasters
Permissões neste sub-fórum
Não podes responder a tópicos
|
|