Вопрос:

Dynamic javascript on head tag populated from data table - asp.net

javascript sql asp.net

81 просмотра

1 ответ

177 Репутация автора

I'm trying to create a page that will show different types of graphs according to a specific stats query.

For example, for determined type of data I need to display a pie chart. I have a JS plug in that will show this type in a very addecuate way.

Now, I need to populate this graph from a data table on a SQL database.

This is the JS code:

<script type="text/javascript">

        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Semestre de ingreso"
                },
                data: [
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "pie",
                    dataPoints: [
                        { label: "apple", y: 10 },
                        { label: "orange", y: 15 },
                        { label: "banana", y: 25 },
                        { label: "mango", y: 30 },
                        { label: "grape", y: 28 }
                    ]
                }
                ]
            });
            chart.render();
        }
    </script>

I need the lines { label: "apple", y: 10 },

gets populated from a data table, using this query, that is written in a SPROC:

SELECT
    [dbo].[Actualizacion_Datos_Estudiantes].[SemestreIngreso], 
    COUNT(*) AS [SemIngNum],
    CAST(ROUND((COUNT(*) * 100.0 / (SELECT COUNT(*) FROM [dbo].[Actualizacion_Datos_Estudiantes])),2) AS numeric(18,2)) AS [Prc]
FROM [dbo].[Actualizacion_Datos_Estudiantes]

GROUP BY
    [dbo].[Actualizacion_Datos_Estudiantes].[SemestreIngreso]

ORDER BY
    [dbo].[Actualizacion_Datos_Estudiantes].[SemestreIngreso] ASC

So the "apple" will be replaced by the "SemestreIngreso" column, and the y: 10, will be replaced by the "Prc" column.

Help! Thanks.

Автор: epaezr Источник Размещён: 22.08.2016 09:39

Ответы (1)


0 плюса

177 Репутация автора

I solved it using asp:PlaceHolder on the head tag.

This place holder containts the basic part of the script, and, on code behind I print the results from the data table.

So the code goes like this:

On the head tag:

<asp:PlaceHolder ID="PlaceHolder1" runat="server">
    <script type="text/javascript">

        window.onload = function () {
            <asp:Literal ID="LiteralGraph01" runat="server"></asp:Literal>
            <asp:Literal ID="LiteralGraph02" runat="server"></asp:Literal>
        }
    </script>

</asp:PlaceHolder> 

On body tag, the div that will render the graph:

<div id="chartContainer01" style="height: 300px; width: 100%;"></div>
<div id="chartContainer02" style="height: 300px; width: 100%;"></div>

And on code behind:

Dim dataPrintGr01 As String
        Dim dataPrintGr02 As String


        Dim SqlConGr01 As SqlConnection
        Dim SqlComGr01 As SqlCommand
        Dim SqlDRGr01 As SqlDataReader
        SqlConGr01 = New SqlConnection(ConfigurationManager.ConnectionStrings("EnchufeUNICOC").ToString())
        SqlComGr01 = New SqlCommand("SEL_Actualizacion_Datos_Estudiantes_Demografia_SemestreIngreso", SqlConGr01)
        SqlComGr01.CommandType = CommandType.StoredProcedure
        If SqlConGr01.State = ConnectionState.Closed Then
            SqlConGr01.Open()
        End If
        SqlDRGr01 = SqlComGr01.ExecuteReader()
        While SqlDRGr01.Read()
            dataPrintGr01 += "{ label: '" & SqlDRGr01("SemestreIngreso") & "', y: " & SqlDRGr01("Prc") & " },"
        End While
        SqlDRGr01.Close()
        SqlConGr01.Close()

        LiteralGraph01.Text = "var chart = new CanvasJS.Chart('chartContainer01', {" & _
                            "title: {" & _
                                "text: 'Semestre de ingreso'" & _
                            "}," & _
                            "data: [" & _
                            "{" & _
                                "type: 'pie'," & _
                                "dataPoints: [" & _
                                    dataPrintGr01 & _
                                "]" & _
                            "}" & _
                            "]" & _
                        "});" & _
                        "chart.render();"

        Dim SqlConGr02 As SqlConnection
        Dim SqlComGr02 As SqlCommand
        Dim SqlDRGr02 As SqlDataReader
        SqlConGr02 = New SqlConnection(ConfigurationManager.ConnectionStrings("EnchufeUNICOC").ToString())
        SqlComGr02 = New SqlCommand("SEL_Actualizacion_Datos_Estudiantes_Demografia_Programa", SqlConGr02)
        SqlComGr02.CommandType = CommandType.StoredProcedure
        If SqlConGr02.State = ConnectionState.Closed Then
            SqlConGr02.Open()
        End If
        SqlDRGr02 = SqlComGr02.ExecuteReader()
        While SqlDRGr02.Read()
            dataPrintGr02 += "{ label: '" & SqlDRGr02("ProgramaPrint") & "', y: " & SqlDRGr02("Prc") & " },"
        End While
        SqlDRGr02.Close()
        SqlConGr02.Close()

        LiteralGraph02.Text = "var chart = new CanvasJS.Chart('chartContainer02', {" & _
                        "title: {" & _
                            "text: 'Programa'" & _
                        "}," & _
                        "data: [" & _
                        "{" & _
                            "type: 'pie'," & _
                            "dataPoints: [" & _
                                dataPrintGr02 & _
                            "]" & _
                        "}" & _
                        "]" & _
                    "});" & _
                    "chart.render();"
Автор: epaezr Размещён: 22.08.2016 10:16
Вопросы из категории :
32x32