Usuário com melhor resposta
Chart js preencher valores com C#

Pergunta
-
Boa noite pessoal. Como eu faço isso funcionar de forma simples...rs quem pode me ajudar.
Eu tenho a seguinte pagina em aspx que exibe o grafico normalmente conforme abaixo, mas como eu preencho os valores
dos seguintes campos do javascript das linhas data no modo código C#
1 data: [28, 48, 40, 19, 86, 27, 90, 200, 87, 20, 50, 20]
2 data: [38, 18, 20, 29, 56, 47, 60, 170, 97, 15, 15, 38]
3 data: [18, 38, 10, 24, 36, 17, 40, 100, 47, 10, 20, 80]
4 data: [88, 8, 90, 14, 63, 71, 10, 90, 37, 12, 10, 60]
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="grafico2.aspx.cs" Inherits="Webpainel.grafico2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script> <script type="text/javascript"> window.onload = function () { var ctx = document.getElementById("GraficoLine").getContext("2d"); var LineChart = new Chart(ctx).Line(grafico, options); } var options = { responsive: true }; var grafico = { labels: ["Jan", "Fev", "Mar", "Abr", "Maio", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"], datasets: [{ label: "Temperatura 1", fillColor: "rgba(220,220,220,0.3)", strokeColor: "#4d90fe", pointColor: "#4d90fe", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "#4d90fe", data: [28, 48, 40, 19, 86, 27, 90, 200, 87, 20, 50, 20] }, { label: "Temperatura 2", fillColor: "rgba(220,220,220,0.3)", strokeColor: "#19b633", pointColor: "#54c464", pointStrokeColor: "#4fc151", pointHighlightFill: "4fc151", pointHighlightStroke: "#54c464", data: [38, 18, 20, 29, 56, 47, 60, 170, 97, 15, 15, 38] }, { label: "Umidade 1", fillColor: "rgba(219,186,52,0.4)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", data: [18, 38, 10, 24, 36, 17, 40, 100, 47, 10, 20, 80] }, { label: "Umidade 2", fillColor: "rgba(132,150,57,0.4)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", data: [88, 8, 90, 14, 63, 71, 10, 90, 37, 12, 10, 60] }] }; </script> </head> <body> <form id="form1" runat="server"> <div style="width:50%; margin:20px auto;"> <h1> <asp:Label ID="Label1" runat="server" Font-Names="Calibri" Font-Size="20pt" ForeColor="#0066FF" Text="Termometro Web"></asp:Label> </h1> <canvas id="GraficoLine" style="width:100%;"> <asp:Literal id="ltlResultado" runat="server" /> </canvas> </div> <p> </p> </form> </body> </html>
Fabricio
- Movido welington jrModerator segunda-feira, 23 de abril de 2018 11:33 forum mais especifico
Respostas
-
Olá Fabrício, sim por ele ser em Javascript, deve-se populá-lo e formatá-lo do lado do front-end. Caso queira exclusivamente no back-end, existe o próprio componente do Visual Studio chamado Chart Control, mas ele é estático.
Abs!
Leandro de Agostini MCTS - Web Application, Framework 4
- Marcado como Resposta Fabriciovale segunda-feira, 23 de abril de 2018 21:33
- Não Marcado como Resposta Fabriciovale segunda-feira, 23 de abril de 2018 21:34
- Marcado como Resposta Fabriciovale segunda-feira, 23 de abril de 2018 21:34
Todas as Respostas
-
No codigo Cs do C# eu já tentei fazer dessa forma e também não funcionou.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;
using System.Collections;
namespace Webpainel
{
public partial class grafico2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
grafico();
}
protected void grafico()
{
StringBuilder str = new StringBuilder();
str.Append("<script type=" + "text/javascript" + ">");
str.Append("window.onload = function(){var ctx = document.getElementById(" + "GraficoLine" + ").getContext(" + "2d" + ");var LineChart = new Chart(ctx).Line(grafico, options);}");
str.Append("var options = {responsive:true};");
str.Append("var grafico = {");
str.Append("labels: [" + "Jan" + ", " + "Fev" + ", " + "Mar" + "],");
str.Append("datasets: [{label: " + "Temperatura 1" + ", fillColor: " + "rgba(220,220,220,0.3)" + ", strokeColor: " + "#4d90fe" + ", pointColor: " + "#4d90fe" + ", pointStrokeColor: " + "#fff" + ", pointHighlightFill: " + "#fff" + ", pointHighlightStroke: " + "#4d90fe" + ",");
str.Append("data: [28, 48, 40]");
str.Append("},{ label: " + "Temperatura 2" + ",fillColor: " + "rgba(220,220,220,0.3)" + ",strokeColor: " + "#19b633" + ",pointColor: " + "#54c464" + ",pointStrokeColor: " + "#4fc151" + ",pointHighlightFill: " + "4fc151" + ",pointHighlightStroke: " + "#54c464" + ",");
str.Append("data: [38, 18, 20]");
str.Append("},{ label: " + "Umidade 1" + ",fillColor: " + "rgba(219,186,52,0.4)" + ",strokeColor: " + "rgba(220,220,220,1)" + ",pointColor: " + "rgba(220,220,220,1)" + ",pointStrokeColor: " + "#fff" + ",");
str.Append("data: [18, 38, 10]");
str.Append("},{ label: " + "Umidade 2" + ",fillColor: " + "rgba(132,150,57,0.4)" + ",strokeColor: " + "rgba(220,220,220,1)" + ",pointColor: " + "rgba(220,220,220,1)" + ",pointStrokeColor: " + "#fff" + ",");
str.Append("data: [88, 8, 90]");
str.Append("}]};");
str.Append("</script>");
ltlResultado.Text = str.ToString();
}
}
}Será que alguém pode me dar uma luz ou uma idéia? rs
Fabricio
-
Olá, para funcionar corretamente converta os dados oriundos do banco em JSON e depois devolva para o front-end, seguinto o exemplo abaixo:
var RetornoBancoDados = JsonConvert.SerializeObject(lstGraficoPosicaoAcumulado);
ClientScript.RegisterStartupScript(GetType(), "JS", string.Format("CHART('{0}');", RetornoBancoDados), true);e no front-end você trata o retorno do JSON
Abs!<canvas id="ChartPIE"></canvas>
<script type="text/javascript">
var ctxPIE = document.getElementById('ChartPIE'); function CHART(reponse) { var aData = JSON.parse(reponse); var aLabels = []; var aDatasets1 = []; for (var i = 0; i < aData.length; i++) { aLabels.push(aData[i].Descricao); aDatasets1.push(aData[i].Valor); } var ChartPIE = new Chart(ctxPIE, { type: 'pie', data: { labels: aLabels, datasets: [{ label: 'Titulo', data: aDatasets1, backgroundColor: [ '#f990a7', '#aad2ed', '#9966FF', '#99e5e5', '#f7bd83', ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { cutoutPercentage: 0, rotation: -1.5 * Math.PI, circumference: 2 * Math.PI, animation: { animateRotate: true, animateScale: true }, title: { display: true, text: 'Titulo 2' }, legend: { display: true, position: 'bottom' }, responsive: true, maintainAspectRatio: true, tooltips: { callbacks: { label: function (tooltipItem, data) { var allData = data.datasets[tooltipItem.datasetIndex].data; var tooltipLabel = data.labels[tooltipItem.index]; var tooltipData = allData[tooltipItem.index]; var total = 0; for (var i = 0; i < allData.length; i++) { total += parseFloat(allData[i]); } var tooltipPercentage = Math.round((tooltipData / total) * 100); return tooltipLabel + ': ' + tooltipPercentage + '%'; } } } } }); }
</script>
Leandro de Agostini MCTS - Web Application, Framework 4
-
-
Olá Fabrício, sim por ele ser em Javascript, deve-se populá-lo e formatá-lo do lado do front-end. Caso queira exclusivamente no back-end, existe o próprio componente do Visual Studio chamado Chart Control, mas ele é estático.
Abs!
Leandro de Agostini MCTS - Web Application, Framework 4
- Marcado como Resposta Fabriciovale segunda-feira, 23 de abril de 2018 21:33
- Não Marcado como Resposta Fabriciovale segunda-feira, 23 de abril de 2018 21:34
- Marcado como Resposta Fabriciovale segunda-feira, 23 de abril de 2018 21:34
-