AJUDA SQL - CANVAS JS

 Tópico anterior Próximo tópico Novo tópico

AJUDA SQL - CANVAS JS

VB.NET

 Compartilhe  Compartilhe  Compartilhe
#478694 - 27/12/2017 14:34:53

ALESANTOS182
JUNDIAI
Cadast. em:Novembro/2017


 Anexos estao visíveis somente para usuários registrados

Pessoal boa tarde

Estou com 2 duvidas,

Tenho essa tabela abaixo e vou criar um grafico stacked bar com o Canvas JS, eu preciso agrupar os dados por dia/tipo utilizando o canvas, basicamente o grafico iria agrupar por dia os tipos
Não consegui criar a query : (

Scan_date    Site         Type
2017-12-15    AAA          Deleted
2017-12-15    AAA          Active
2017-12-15    BBBB     Disabled

2 - Duvida
Pelo exemplo que peguei, consegui criar o grafico qual estou testando ainda, mas a minha duvida é como configurar ele para mostrar os dados agrupados da query com cores definidas etc.

HTML
        <script>
            $(function () {
            var ctx = document.getElementById("Chart").getContext('2d');
           $.ajax({
            
                url: "WebForm7.aspx/getChartData",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success:function(response)
                {
                    var chartLabel = eval(response.d[0]); //Labels
                    var chartData = eval(response.d[1]); //Data
                    var barData = {
                        labels: chartLabel,
                        datasets: [
                            {
                                label: 'July Sales',
                                fillColor: "rgba(225,225,225,0.2)",
                                strokeColor: "Blue",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "Green",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(220,220,220,1)",
                                data: chartData
                            }
                        ]
                    };
                    var skillsChart = new Chart(ctx).Bar(barData);
                }
                
            });
        }
        );
        </script>

CODE BEHIND
   <System.Web.Services.WebMethod>
    Public Shared Function getChartData() As List(Of String)
        Dim SQL_Connection As SqlConnectionStringBuilder
        SQL_Connection = mdlGeneral.SQL_ConnectionString

        Dim returnData = New List(Of String)()
        Dim sqlConnection1 As New System.Data.SqlClient.SqlConnection(SQL_Connection.ConnectionString)
        Dim sql = New SqlCommand("SELECT count (site) as site, site , CONVERT (VARCHAR, CONVERT(DATETIME, Scan_da, 103), 103) AS novaData FROM computers_atrib GROUP BY Scan_da,site,site", sqlConnection1)
        Dim dataAdapter = New SqlDataAdapter(sql)
        Dim dataset = New DataSet()
        dataAdapter.Fill(dataset)
        Dim chartLabel = New StringBuilder()
        Dim chartData = New StringBuilder()
        chartLabel.Append("[")
        chartData.Append("[")
        For Each row As DataRow In dataset.Tables(0).Rows
            chartLabel.Append(String.Format("'{0}',", row("novaData").ToString()))
            chartData.Append(String.Format("{0},", row("site").ToString()))
        Next

        chartData.Length -= 1
        chartData.Append("]")
        chartLabel.Length -= 1
        chartLabel.Append("]")
        returnData.Add(chartLabel.ToString())
        returnData.Add(chartData.ToString())
        Return returnData
    End Function

FONTE:
http://www.justcodeweb.com/dynamic-line-chart-in-asp-net-from-database-using-chart-js/

Alguem poderia me dar algum exemplo mais claro ou uma orientação no codigo.

Obrigado.



#478695 - 27/12/2017 14:37:48

ALESANTOS182
JUNDIAI
Cadast. em:Novembro/2017


Perdão acredito que a query seria assim:
SELECT site, COUNT (status) as status, status as status_name, CONVERT (VARCHAR, CONVERT(DATETIME, Scan_da, 103), 103) AS novaData FROM computers_atrib GROUP BY Scan_da,status,site



Resposta escolhida #478702 - 27/12/2017 15:16:57

KERPLUNK
RIO GRANDE DO SUL
Cadast. em:Junho/2009


Membro da equipe
Use um sandbox para fazer o modelo de dados antes e depois aplique à uma query. Pode ser aqui

_______________________________________________________________________
Virei Oráculo!
The end is nigh, be ready for the nukes!


#478703 - 27/12/2017 15:28:07

KERPLUNK
RIO GRANDE DO SUL
Cadast. em:Junho/2009


Membro da equipe
Não acho que você vai conseguir só com string, seria muito mais fácil criar os objetos necessários...

_______________________________________________________________________
Virei Oráculo!
The end is nigh, be ready for the nukes!


#478711 - 27/12/2017 22:56:33

ALESANTOS182
JUNDIAI
Cadast. em:Novembro/2017


Não sei se estou indo pelo caminho correto o que eu fiz

Code Behind:
   <System.Web.Services.WebMethod>
    Public Shared Function GetDadosGrafico() As List(Of DadosDetalhes)
        Dim SQL_Connection As SqlConnectionStringBuilder
        SQL_Connection = mdlGeneral.SQL_ConnectionString

        Dim dt As New DataTable()
        Using con As New SqlConnection(SQL_Connection.ConnectionString)
            con.Open()
            Dim cmd As New SqlCommand("SELECT count (site) as Total, Site as Site, Status as Status , CONVERT (VARCHAR, CONVERT(DATETIME, Scan_da, 103), 103) AS novaData FROM computers_atrib GROUP BY Scan_da,site,status,site", con)
            Dim da As New SqlDataAdapter(cmd)
            da.Fill(dt)
            '        con.Close()
        End Using
        Dim listaDados As New List(Of DadosDetalhes)()

        For Each dtrow As DataRow In dt.Rows
            Dim details As New DadosDetalhes()
            details.Count_Status = dtrow(0).ToString
            details.Site = dtrow(1).ToString
            details.Status_Name = dtrow(2).ToString
            details.Date_status = dtrow(3).ToString
            listaDados.Add(details)
        Next
        Return listaDados
    End Function

    Public Class DadosDetalhes
        Public Property Site() As String
        Public Property Count_Status() As String
        Public Property Status_Name() As String
        Public Property Date_status() As String
    End Class

HTML
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'WebForm9.aspx/GetDadosGrafico',
                data: '{}',
                success:
                function (response) {
                    drawchart(response.d);
                },
                error: function () {
                    alert("Erro ao carregar dados! Tente novamente.");
                }
            });
        })
        function drawchart(dataValues) {
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                title: {
                    text: "Composition of Internet Traffic in North America"
                },
                axisX: {
                    interval: 1,
                    intervalType: "year",
                    valueFormatString: "YYYY"
                },
                axisY: {
                    suffix: "%"
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    reversed: true,
                    verticalAlign: "center",
                    horizontalAlign: "right"
                },
                data: [{
                    type: "stackedColumn100",
                    name: "Real-Time",
                    showInLegend: true,
                    xValueFormatString: "YYYY",
                    yValueFormatString: "#,##0'%'",
                    dataPoints: [

                        { x: new Date(2010, 0), y: 40 },
                        { x: new Date(2011, 0), y: 50 },
                        { x: new Date(2012, 0), y: 60 },
                        { x: new Date(2013, 0), y: 61 },
                        { x: new Date(2014, 0), y: 63 },
                        { x: new Date(2015, 0), y: 65 },
                        { x: new Date(2016, 0), y: 67 }
                    ]
                },
                {
                    type: "stackedColumn100",
                    name: "Web Browsing",
                    showInLegend: true,
                    xValueFormatString: "YYYY",
                    yValueFormatString: "#,##0'%'",
                    dataPoints: [
                        { x: new Date(2010, 0), y: 28 },
                        { x: new Date(2011, 0), y: 18 },
                        { x: new Date(2012, 0), y: 12 },
                        { x: new Date(2013, 0), y: 10 },
                        { x: new Date(2014, 0), y: 10 },
                        { x: new Date(2015, 0), y: 7 },
                        { x: new Date(2016, 0), y: 5 }
                    ]
                },
                
                ]
            });
            chart.render();
        }
    </script>

O exemplo aciima não está trazendo os dados da query ainda, so está mostrando o grafico com dados definidos, precisaria adicionar o resultado agora que não consegui ainda.




#478717 - 28/12/2017 00:08:49

KERPLUNK
RIO GRANDE DO SUL
Cadast. em:Junho/2009


Membro da equipe
Veja bem. O gráfico tem como dados um array desse objeto:

{
                    type: "stackedColumn100",
                    name: "Real-Time",
                    showInLegend: true,
                    xValueFormatString: "YYYY",
                    yValueFormatString: "#,##0'%'",
                    dataPoints: [

                        { x: new Date(2010, 0), y: 40 },
                        { x: new Date(2011, 0), y: 50 },
                        { x: new Date(2012, 0), y: 60 },
                        { x: new Date(2013, 0), y: 61 },
                        { x: new Date(2014, 0), y: 63 },
                        { x: new Date(2015, 0), y: 65 },
                        { x: new Date(2016, 0), y: 67 }
                    ]
                }

Portanto, você precisa criar uma classe com essa estrutura, pode usar a função "Paste Special -> Paste JSON as classes". Então faça o preenchimento da uma array com essas classes e faça disso o retorno do seu webmethod. Com isso, basta passar na variável "data" o retorno do AJAX e o gráfico será preenchido.


_______________________________________________________________________
Virei Oráculo!
The end is nigh, be ready for the nukes!


#478773 - 29/12/2017 19:27:41

ALESANTOS182
JUNDIAI
Cadast. em:Novembro/2017


To quase lá mudei o script para o highlights.js pois achei mais fácil de configurar já evolui bem com os testes e exemplos agora estou com uma duvida.

Para popular o script é quase a mesma coisa porém a minha duvida é a seguinte.

No highlights a estrutura é assim:
series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]

O que não sei como fazer ainda, mesmo usando uma array é adicionar os dados no array na seguinte estrutura:
Nome:
Deletado:
Desativado:
Ativo:

Tudo de uma vez ou seja (nome (xxx), deletado (1), desativado (2), ativo (0)

Porque quando eu trago os dados do sql ele traz o nome e a cada loop o tipo de status (deletado, desativado, ativo), eu precisaria trazer tudo de uma vez
Consigo fazer isso via query direto ?

No exemplo abaixo foi criado uma procedure, tentei criar ele mas não consegui.

2 - Forma
Pensei em utilizar um segundo array lendo o primeiro e concatenando as informações, dessa forma conseguiria transportar tudo do primeiro para o segundo na estrutura correta. mas não achei "pratico" dessa forma.

Fonte:
http://www.c-sharpcorner.com/UploadFile/c3a146/bind-stack-column-chart-in-Asp-Net-using-jquery-and-ajax/



#478778 - 30/12/2017 12:34:21

ALESANTOS182
JUNDIAI
Cadast. em:Novembro/2017


 Anexos estao visíveis somente para usuários registrados

Voila !

Colocando o codigo caso alguém no futuro precise : )

Code Behind:
        <System.Web.Services.WebMethod()>
        Public Shared Function getSrv() As List(Of Operating_System_Srv)
            Dim SQL_Connection As SqlConnectionStringBuilder
            SQL_Connection = mdlGeneral.SQL_ConnectionString
      
            Dim p As List(Of Operating_System_Srv) = New List(Of Operating_System_Srv)()
            Using cn As SqlConnection = New SqlConnection(SQL_Connection.ConnectionString)
            Dim myQuery As String = "SELECT C.Site,Active = count(CASE WHEN C.Site_status = 'Active' THEN C.Site END), Deleted = count(CASE WHEN C.Site_status = 'Deleted' THEN C.Site END), Disabled = count(CASE WHEN C.Site_status = 'Disabled' THEN C.Site END) FROM computers_atrib AS C GROUP BY C.Site
"
            Dim cmd As SqlCommand = New SqlCommand()
                cmd.CommandText = myQuery
                cmd.CommandType = CommandType.Text
                cmd.Connection = cn
                cn.Open()
                Dim dr As SqlDataReader = cmd.ExecuteReader()
                If dr.HasRows Then
                    While dr.Read()
                    Dim cpData As Operating_System_Srv = New Operating_System_Srv()
                    cpData.Site = dr("site").ToString()
                    cpData.Active = dr("Active")
                    cpData.Deleted = dr("Deleted")
                    cpData.Disabled = dr("Disabled")
                    p.Add(cpData)
                End While
            End If
            End Using

            Return p

        End Function

    Public Class Operating_System_Srv
        Public Property Site As String
        Public Property Status As String
        Public Property Disabled As Integer
        Public Property Deleted As Integer
        Public Property Active As Integer
    End Class

HTML
<script type="text/javascript">  
    $(document).ready(function () {

        $.ajax({

            type: "POST",

            contentType: "application/json; charset=utf-8",

            url: "dashboard.aspx/getSrv",

            data: "{}",

            dataType: "json",

            success: function (Result) {
                Result = Result.d;
                
                var series = [];
                var categories = [];
                var quarter1 = [];
                var quarter2 = [];
                var quarter3 = [];
                var quarter4 = [];
                
                for (var i in Result) {
                    categories.push(Result[i].Site);
                    quarter1.push(Result[i].Active);
                    quarter2.push(Result[i].Disabled);
                    quarter3.push(Result[i].Deleted);
                }

                series.push({

                    name: 'Active',

                    data: quarter1

                },

                    {

                        name: 'Disabled',

                        data: quarter2

                    },

                    {

                        name: 'Deleted',

                        data: quarter3

                    },
                );

                BindChart(categories, series);

            },

            error: function (xhr) {

                alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);

            }

        });

    });

    function BindChart(categories, series) {
        alert(categories,series)

        $('#GraphSrv').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stack Column Chart Demo'
            },
            xAxis: {
                categories: categories
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },

            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },

            plotOptions: {
                column: {
                stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                        textShadow: '0 0 3px black'
                        }
                    }
                }
             },

            series: series
        });
    }  
</script>
<script src="../dist/js/highcharts.js"></script>

Grafico
<div id="GraphSrv" style="margin:0 auto; text-align:center" align="center"></div>

Apenas uma observação o codigo não está 100% otimizado ainda mas está funcionando, assim com a query do SQL que não é a melhor pois pelo que vi usando o PIVOT é melhor



#478784 - 30/12/2017 14:58:46

LAMPIAO
SAO CAETANO DO SUL
Cadast. em:Setembro/2004


Citação:
:
Voila !

Colocando o codigo caso alguém no futuro precise : )

Code Behind:
        <System.Web.Services.WebMethod()>
        Public Shared Function getSrv() As List(Of Operating_System_Srv)
            Dim SQL_Connection As SqlConnectionStringBuilder
            SQL_Connection = mdlGeneral.SQL_ConnectionString
      
            Dim p As List(Of Operating_System_Srv) = New List(Of Operating_System_Srv)()
            Using cn As SqlConnection = New SqlConnection(SQL_Connection.ConnectionString)
            Dim myQuery As String = "SELECT C.Site,Active = count(CASE WHEN C.Site_status = 'Active' THEN C.Site END), Deleted = count(CASE WHEN C.Site_status = 'Deleted' THEN C.Site END), Disabled = count(CASE WHEN C.Site_status = 'Disabled' THEN C.Site END) FROM computers_atrib AS C GROUP BY C.Site
"
            Dim cmd As SqlCommand = New SqlCommand()
                cmd.CommandText = myQuery
                cmd.CommandType = CommandType.Text
                cmd.Connection = cn
                cn.Open()
                Dim dr As SqlDataReader = cmd.ExecuteReader()
                If dr.HasRows Then
                    While dr.Read()
                    Dim cpData As Operating_System_Srv = New Operating_System_Srv()
                    cpData.Site = dr("site").ToString()
                    cpData.Active = dr("Active")
                    cpData.Deleted = dr("Deleted")
                    cpData.Disabled = dr("Disabled")
                    p.Add(cpData)
                End While
            End If
            End Using

            Return p

        End Function

    Public Class Operating_System_Srv
        Public Property Site As String
        Public Property Status As String
        Public Property Disabled As Integer
        Public Property Deleted As Integer
        Public Property Active As Integer
    End Class

HTML
<script type="text/javascript">  
    $(document).ready(function () {

        $.ajax({

            type: "POST",

            contentType: "application/json; charset=utf-8",

            url: "dashboard.aspx/getSrv",

            data: "{}",

            dataType: "json",

            success: function (Result) {
                Result = Result.d;
                
                var series = [];
                var categories = [];
                var quarter1 = [];
                var quarter2 = [];
                var quarter3 = [];
                var quarter4 = [];
                
                for (var i in Result) {
                    categories.push(Result[i].Site);
                    quarter1.push(Result[i].Active);
                    quarter2.push(Result[i].Disabled);
                    quarter3.push(Result[i].Deleted);
                }

                series.push({

                    name: 'Active',

                    data: quarter1

                },

                    {

                        name: 'Disabled',

                        data: quarter2

                    },

                    {

                        name: 'Deleted',

                        data: quarter3

                    },
                );

                BindChart(categories, series);

            },

            error: function (xhr) {

                alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);

            }

        });

    });

    function BindChart(categories, series) {
        alert(categories,series)

        $('#GraphSrv').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stack Column Chart Demo'
            },
            xAxis: {
                categories: categories
            },
            legend: {
                align: 'right',
                x: -30,
                verticalAlign: 'top',
                y: 25,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },

            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
            },

            plotOptions: {
                column: {
                stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                        textShadow: '0 0 3px black'
                        }
                    }
                }
             },

            series: series
        });
    }  
</script>
<script src="../dist/js/highcharts.js"></script>

Grafico
<div id="GraphSrv" style="margin:0 auto; text-align:center" align="center"></div>

Apenas uma observação o codigo não está 100% otimizado ainda mas está funcionando, assim com a query do SQL que não é a melhor pois pelo que vi usando o PIVOT é melhor


Só uma observação, evolua seu código, você escreve como se estivesse no VB6, separe isso. O seu javascript posso dizer que esta tão verboso e macarronico porque também esta como se estivesse no passado, existem maneiras muito melhor de escrever isso. Existem formas muito melhor de fazer tudo isso e muito mais de uma maneira muito mais simples, você só precisa descobrir e estudar, mas infelizmente não dá pra fazer milagres com web forms, isso é tecnologia ultrapassada.

Bom final de ano.



#478793 - 31/12/2017 13:04:34

ALESANTOS182
JUNDIAI
Cadast. em:Novembro/2017


Concordo plenamente, porém esse projeto precisa ser em Windows Form ainda.

Hoje temo o MVC ou até mesmo asp.net core que acredito serem as tecnologias do momento, mas windows form é legado ainda.

Sobre o código como mencionei são exemplos retirados da net e não estão otimizados ainda, obrigado pelas sugestões vou levar em consideração : ).

Obrigado e bom ano novo.



 Tópico anterior Próximo tópico Novo tópico


Tópico encerrado, respostas não sao permitidas
Encerrado por ALESANTOS182 em 31/12/2017 13:04:44