jQWidgets Forums

jQuery UI Widgets Forums Chart jqxChart Lines series marker

This topic contains 3 replies, has 2 voices, and was last updated by  Martin 6 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • jqxChart Lines series marker #102598

    aperaltas
    Participant

    My line chart dos not appers on my view. I have a dashborar with a donut chart and a line chast with series and markers, but se second does not appers on the view. I can see the data on the dataAdapter can format the tile and description based on items on the DataAdapter using the loadComplete function.
    But the chart is not showing on the View.
    Here is the code of the function that shows the chart:

     function desplegarGraficoDeLecturas(monitoreoConexionId) {
    
            var url = '/MonittDashboard/ObtenerDatosDeLectura?monitoreoConexionId=' + monitoreoConexionId;
    
            var grfTitulo = '';
            var grfDescripcion = '';
    
            // prepare the data
            var lecturas =
            {
                datatype: "json",
                datafields: [
                    { name: 'numeroCntr', type: 'string' },
                    { name: 'fechaConexion', type: 'string' },
                    { name: 'fechaLectura', type: 'string' },
                    { name: 'setPoint', type: 'float' },
                    { name: 'suministro', type: 'float' },
                    { name: 'retorno', type: 'float' }
                ],
                id: 'id',
                url: url
            };
    
            var adaptadorDeDatos = new $.jqx.dataAdapter(lecturas,
                {
                    autoBind: true,
                    async: false,
                    downloadComplete: function () { },
                    loadComplete: function (records) {
    
                        var longitud = records.lecturas.length;
    
                        for (var i = 0; i < longitud; i++) {
                            var reg = records.lecturas[i];
                            grfTitulo = "Lecturas CNTR: " + reg.numeroCntr;
                            grfDescripcion = "Fecha de conexión: " + reg.fechaConexion;
                            break;
                        }
                    }
                });
    
            // preparar configuracion de jqxChart
            var configuracion = {
                title: grfTitulo,
                description: grfDescripcion,
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 10, right: 15, bottom: 10 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: adaptadorDeDatos,
                colorScheme: 'scheme05',
                xAxis: {
                    dataField: 'fechaLectura',
                    unitInterval: 1,
                    tickMarks: { visible: true, interval: 1 },
                    gridLinesInterval: { visible: true, interval: 1 },
                    valuesOnTicks: false,
                    padding: { bottom: 10 }
                },
                valueAxis: {
                    unitInterval: 10,
                    minValue: 0,
                    maxValue: 50.0,
                    title: { text: 'TEMPERATURA<br><br>' },
                    labels: { horizontalAlignment: 'right' }
                },
                seriesGroups:
                    [
                        {
                            type: 'line',
                            series:
                                [
                                    {
                                        dataField: 'setPoint',
                                        symbolType: 'square',
                                        labels:
                                        {
                                            visible: true,
                                            backgroundColor: 'red',
                                            backgroundOpacity: 0.2,
                                            borderColor: '#7FC4EF',
                                            borderOpacity: 0.7,
                                            padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                        }
                                    },
                                    {
                                        dataField: 'suministro',
                                        symbolType: 'square',
                                        labels:
                                        {
                                            visible: true,
                                            backgroundColor: 'blue',
                                            backgroundOpacity: 0.2,
                                            borderColor: '#7FC4EF',
                                            borderOpacity: 0.7,
                                            padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                        }
                                    },
                                    {
                                        dataField: 'retorno',
                                        symbolType: 'square',
                                        labels:
                                        {
                                            visible: true,
                                            backgroundColor: 'yellow',
                                            backgroundOpacity: 0.2,
                                            borderColor: '#7FC4EF',
                                            borderOpacity: 0.7,
                                            padding: { left: 5, right: 5, top: 0, bottom: 0 }
                                        }
                                    }
                                ]
                        }
                    ]
            };
    
            // activar gráfico
            $('#graficoLecturas').jqxChart(configuracion);
    
        }

    I’ll appreciate if you can see what Im’ doing wrong.

    Thank you.

    jqxChart Lines series marker #102604

    Martin
    Participant

    Hello aperaltas,

    I have tested your code by just changing the data url with localdata array.
    Here is the a Fiddle Example.
    The chart seems to be displayed fine.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

    jqxChart Lines series marker #102687

    aperaltas
    Participant

    yes, a couple of changes fix the problem. Type: number by float, and of course something that I don’t like at all; the need of the in line style on the View.

    Thank you Martin.

    Saludos!

    jqxChart Lines series marker #103179

    Martin
    Participant

    Hello aperaltas,

    I am glad you were able to fix it!
    Also, there is no need for the style to be inline.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.