none
Chart js preencher valores com C# RRS feed

  • 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

    segunda-feira, 23 de abril de 2018 01:37

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
    segunda-feira, 23 de abril de 2018 12:57

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

    segunda-feira, 23 de abril de 2018 01:40
  • 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

    <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>

    Abs!


    Leandro de Agostini MCTS - Web Application, Framework 4

    segunda-feira, 23 de abril de 2018 12:33
  • Leandro bom dia! Eu até entendi o caso do problema do front-End e o que o aspx roda no lado do servidor. Então não tem como fazer isso direto no C# com o StringBuilder?

    Tem que fazer então no Javascript? 


    Fabricio

    segunda-feira, 23 de abril de 2018 12:48
  • 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
    segunda-feira, 23 de abril de 2018 12:57
  • Obrigado Leandro. Mais uma vez obrigado!. Abs

    Fabricio

    segunda-feira, 23 de abril de 2018 21:34