Procedimiento para crear un gráfico dinámico mediante JS Grid

Artículo
09/24/2014

Última modificación: jueves, 23 de junio de 2011

Hace referencia a: SharePoint Foundation 2010

Este procedimiento muestra cómo crear un gráfico dinámico usando el Control de JS Grid y Microsoft Visual Studio 2010. El tema comienza donde terminó Procedimiento para crear un control de JS Grid básico.

El gráfico dinámico completado muestra una vista dinamizada de los datos. Cada departamento muestra los resultados trimestrales de dos años fiscales. Para crear el gráfico dinámico, debe proporcionar los datos del gráfico dinámico, las definiciones de columna de tabla dinámica y la lógica de la utilidad de cuadrícula para crear el gráfico correctamente. El último paso es habilitar el panel de cuadrícula dinamizada.

Nota

Es posible que el equipo muestre distintos nombres o ubicaciones para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición del Visual Studio que tenga instalada y la configuración que use determinarán estos elementos.

Requisitos previos

Microsoft SharePoint Foundation 2010
Visual Studio 2010
Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010

El procedimiento terminado: Procedimiento para crear un control de JS Grid básico

Nota

Aunque este procedimiento se puede hacer sin usar el Visual Studio, es más fácil usar Visual Studio 2010 y las Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010.

Para agregar los datos de tabla dinámica al archivo de datos de la cuadrícula

Como administrador, inicie Visual Studio 2010 y abra la solución JSGrid creada en Procedimiento para crear un control de JS Grid básico.
Expanda la carpeta GridUtils y abra GridData.cs.

La cuadrícula dinámica requiere datos trimestrales de cada departamento. GridData.cs ya contiene datos de ejemplo para la cuadrícula básica. En este procedimiento se agregan los datos trimestrales a ese archivo de datos.
Cambie la instrucción DataTable return como se indica a continuación.
```
    return buildPivotedView(data);
```

Pegue el código siguiente en GridData.cs.

        private DataTable buildPivotedView(DataTable data)
        {
            //quarter 1 columns
            data.Columns.Add(new DataColumn("costq 1", typeof(int)));
            data.Columns.Add(new DataColumn("costq 2", typeof(int)));
            data.Columns.Add(new DataColumn("costq 3", typeof(int)));
            data.Columns.Add(new DataColumn("costq 4", typeof(int)));

            //quarter 2 columns
            data.Columns.Add(new DataColumn("costq 5", typeof(int)));
            data.Columns.Add(new DataColumn("costq 6", typeof(int)));
            data.Columns.Add(new DataColumn("costq 7", typeof(int)));
            data.Columns.Add(new DataColumn("costq 8", typeof(int)));

            //build column headers
            data.Columns.Add(new DataColumn("Quarter 1", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 2", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 3", typeof(string)));
            data.Columns.Add(new DataColumn("Quarter 4", typeof(string)));

            int i = 0;
            foreach (DataRow dr in data.Rows)
            {
                //pivoted view
                dr["costq 1"] = _rand.Next(1000000) + 30000;
                dr["costq 2"] = _rand.Next(1000000) + 30000;
                dr["costq 3"] = _rand.Next(1000000) + 30000;
                dr["costq 4"] = _rand.Next(1000000) + 30000;
                dr["costq 5"] = _rand.Next(1000000) + 30000;
                dr["costq 6"] = _rand.Next(1000000) + 30000;
                dr["costq 7"] = _rand.Next(1000000) + 30000;
                dr["costq 8"] = _rand.Next(1000000) + 30000;

                dr["FY 2009 Estimate"] = ((int)dr["costq 1"] + (int)dr["costq 2"] +
                    (int)dr["costq 3"] + (int)dr["costq 4"]) / 4;
                dr["FY 2010 Estimate"] = ((int)dr["costq 5"] + (int)dr["costq 6"] +
                    (int)dr["costq 7"] + (int)dr["costq 8"]) / 4;
                dr["Yearly Estimate"] = ((int)dr["FY 2009 Estimate"]
                    + (int)dr["FY 2010 Estimate"]) / 2;
                i++;

                dr["Quarter 1"] = "Quarter 1";
                dr["Quarter 2"] = "Quarter 2";
                dr["Quarter 3"] = "Quarter 3";
                dr["Quarter 4"] = "Quarter 4";
            }
            return data;
        }

Private Function buildPivotedView(ByVal data As DataTable) As DataTable
    'quarter 1 columns
    data.Columns.Add(New DataColumn("costq 1", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 2", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 3", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 4", GetType(Integer)))

    'quarter 2 columns
    data.Columns.Add(New DataColumn("costq 5", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 6", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 7", GetType(Integer)))
    data.Columns.Add(New DataColumn("costq 8", GetType(Integer)))

    'build column headers
    data.Columns.Add(New DataColumn("Quarter 1", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 2", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 3", GetType(String)))
    data.Columns.Add(New DataColumn("Quarter 4", GetType(String)))

    Dim i As Integer = 0
    For Each dr As DataRow In data.Rows
        'pivoted view
        dr("costq 1") = _rand.Next(1000000) + 30000
        dr("costq 2") = _rand.Next(1000000) + 30000
        dr("costq 3") = _rand.Next(1000000) + 30000
        dr("costq 4") = _rand.Next(1000000) + 30000
        dr("costq 5") = _rand.Next(1000000) + 30000
        dr("costq 6") = _rand.Next(1000000) + 30000
        dr("costq 7") = _rand.Next(1000000) + 30000
        dr("costq 8") = _rand.Next(1000000) + 30000

        dr("FY 2009 Estimate") = (CInt(Fix(dr("costq 1"))) + CInt(Fix(dr("costq 2"))) + CInt(Fix(dr("costq 3"))) + CInt(Fix(dr("costq 4")))) / 4
        dr("FY 2010 Estimate") = (CInt(Fix(dr("costq 5"))) + CInt(Fix(dr("costq 6"))) + CInt(Fix(dr("costq 7"))) + CInt(Fix(dr("costq 8")))) / 4
        dr("Yearly Estimate") = (CInt(Fix(dr("FY 2009 Estimate"))) + CInt(Fix(dr("FY 2010 Estimate")))) / 2
        i += 1

        dr("Quarter 1") = "Quarter 1"
        dr("Quarter 2") = "Quarter 2"
        dr("Quarter 3") = "Quarter 3"
        dr("Quarter 4") = "Quarter 4"
    Next
    Return data
End Function

El serializador Control de JS Grid serializa los datos y la configuración de Control de JS Grid en una cadena de notación de objetos JavaScript (JSON). El control de cuadrícula genera la JSON y la coloca en la página.

SerializeDataValue indica al serializador que serialice el valor real. SerializeLocalizedValue indica al serializador que serialice el valor mostrado o localizado. En el caso de una fecha, por ejemplo, se puede representar como "11/2010". La fecha que se muestra con el formato mes/año es muy diferente del valor de fecha real.

Para agregar el código de la tabla dinámica al archivo de utilidades de la cuadrícula

El código para analizar los datos de la cuadrícula dinamizada deben agregarse a GridUtilities.cs. GridUtilities.cs y GridData.cs se encuentran en la carpeta GridUtils.
En Visual Studio, abra GridUtilities.cs.

Pegue el código siguiente en GridUtilities.cs.

        public static IList<PivotedGridColumn> GetPivotedGridColumns(DataTable table)
        {
            List<PivotedGridColumn> r = new List<PivotedGridColumn>();

            //Create the Pivoted "Header" Column
            PivotedGridColumn col = new PivotedGridColumn();
            col.ColumnKey = "header";
            col.FieldKeys = new String[] { "Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4" };
            col.Name = "Quarter";
            col.Width = 100;
            r.Add(col);

            //display 
            col = new PivotedGridColumn();
            col.ColumnKey = "tests1";
            col.FieldKeys = new String[] { "costq 1", "costq 2", "costq 3", "costq 4" };
            col.Name = "Fiscal 2009";
            col.Width = 100;
            r.Add(col);

            col = new PivotedGridColumn();
            col.ColumnKey = "tests2";
            col.FieldKeys = new String[] { "costq 5", "costq 6", "costq 7", "costq 8" };
            col.Name = "Fiscal 2010";
            col.Width = 100;
            r.Add(col);

            return r;
        }

Public Shared Function GetPivotedGridColumns(ByVal table As DataTable) As IList(Of PivotedGridColumn)
    Dim r As New List(Of PivotedGridColumn)()

    'Create the Pivoted "Header" Column
    Dim col As New PivotedGridColumn()
    col.ColumnKey = "header"
    col.FieldKeys = New String() {"Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"}
    col.Name = "Quarter"
    col.Width = 100
    r.Add(col)

    'display 
    col = New PivotedGridColumn()
    col.ColumnKey = "tests1"
    col.FieldKeys = New String() {"costq 1", "costq 2", "costq 3", "costq 4"}
    col.Name = "Fiscal 2009"
    col.Width = 100
    r.Add(col)

    col = New PivotedGridColumn()
    col.ColumnKey = "tests2"
    col.FieldKeys = New String() {"costq 5", "costq 6", "costq 7", "costq 8"}
    col.Name = "Fiscal 2010"
    col.Width = 100
    r.Add(col)

    Return r
End Function

El serializador del Control de JS Grid serializa los datos y la configuración de Control de JS Grid en una cadena JavaScriptObjectNotation (JSON). El control de cuadrícula genera la cadena JSON y la coloca en la página.

SerializeDataValue indica al serializador que serialice el valor real. SerializeLocalizedValue indica el serializador que serialice el valor mostrado o localizado. En el caso de una fecha, por ejemplo, se puede representar como "11/2010". La fecha que se muestra en el formato mes/año es muy diferente del valor de fecha real.

Para habilitar la cuadrícula dinamizada

Abra JSGridWebPartUserControl.cs

En el método Page Load, inmediatamente después de crear el serializador de la cuadrícula, agregue lo siguiente a la clase JSGridWebPartUserControl.

          gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data));

gds.EnablePivotedGridPane(GridUtilities.GetPivotedGridColumns(data))

Para probar el elemento web de gráfico dinámico

En Visual Studio, presione F5 para ejecutar el proyecto. El elemento web se agrega automáticamente a la galería de elementos web de SharePoint. Puede agregar el elemento web a cualquier página de elementos web.

Vea también

Referencia

Microsoft.SharePoint.JSGrid

Compartir a través de