Chart not displaying lines

[juanellisParticipant]

Hello, i’d like to know how can I make chart show lines, i mean, i don’t know if i’m doing somethig wrong since it shows dots, what let me know that values are in there, bot not the lines. I will let the code above, so if anyone could give me a hand. Thank you.

var sourceGraph =
{
    datatype: "json",
    datafields: [
        { name: 'Fecha' },
        { name: 'TempActual' },
        { name: 'TempMaxima' },
        { name: 'TempMinima' }
    ],
    url: 'temperaturas/temperaturas.php?a=graph'
};

var dataAdapterGraph = new $.jqx.dataAdapter(sourceGraph, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

var days = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'];
// prepare jqxChart settings
var settings = {
    title: "REGISTRO DIARIO CONTROL DE TEMPERATURA",
    description: "",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 11, bottom: 5 },
    titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
    source: dataAdapterGraph,
    xAxis:
    {
        dataField: 'Fecha',
        type: 'date',
        baseUnit: 'day',
        valuesOnTicks: false,
        labels: 
        {
            formatFunction: function (value) {
                return value.getDate();
            }
        },
        toolTipFormatFunction: function (value) {
            return value.getDate() + '-' + days[value.getDay()] + '-' + value.getMonth();
        }
    },
    valueAxis:
    {
        unitInterval: 1,
        minValue: 0,
        maxValue: 9,
        labels: {horizontalAlignment: 'right'},
        title: { text: '<br>' }
    },
    colorScheme: 'scheme01',
    seriesGroups:
        [
            {
                type: 'line',
                series: [
                        { dataField: 'TempActual', displayText: 'Temperatura Actual' },
                        { dataField: 'TempMaxima', displayText: 'Temperatura Máxima' },
                        { dataField: 'TempMinima', displayText: 'Temperatura Mínima' }
                    ]
            }
        ]
};
  
// setup the chart
$('#chartContainer').jqxChart(settings);

And this is the JSON:

[{"Fecha":"2016-10-22 10:06:00","TempActual":"1.0","TempMaxima":null,"TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-22 10:06:00","TempActual":null,"TempMaxima":"1.2","TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-22 10:06:00","TempActual":null,"TempMaxima":null,"TempMinima":"0.5","TempAmbiente":null},
{"Fecha":"2016-10-22 10:06:00","TempActual":null,"TempMaxima":null,"TempMinima":null,"TempAmbiente":"23.8"},
{"Fecha":"2016-10-22 14:00:00","TempActual":"1.3","TempMaxima":null,"TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-22 14:00:00","TempActual":null,"TempMaxima":"1.5","TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-22 14:00:00","TempActual":null,"TempMaxima":null,"TempMinima":"0.8","TempAmbiente":null},
{"Fecha":"2016-10-22 14:00:00","TempActual":null,"TempMaxima":null,"TempMinima":null,"TempAmbiente":"25.0"},
{"Fecha":"2016-10-23 10:06:00","TempActual":"0.8","TempMaxima":null,"TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-23 10:06:00","TempActual":null,"TempMaxima":"1.0","TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-23 10:06:00","TempActual":null,"TempMaxima":null,"TempMinima":"0.5","TempAmbiente":null},
{"Fecha":"2016-10-23 10:06:00","TempActual":null,"TempMaxima":null,"TempMinima":null,"TempAmbiente":"22.0"},
{"Fecha":"2016-10-23 14:00:00","TempActual":"1.3","TempMaxima":null,"TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-23 14:00:00","TempActual":null,"TempMaxima":"1.5","TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-23 14:00:00","TempActual":null,"TempMaxima":null,"TempMinima":"0.8","TempAmbiente":null},
{"Fecha":"2016-10-23 14:00:00","TempActual":null,"TempMaxima":null,"TempMinima":null,"TempAmbiente":"25.0"},
{"Fecha":"2016-10-24 10:06:00","TempActual":"2.7","TempMaxima":null,"TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-24 10:06:00","TempActual":null,"TempMaxima":"3.0","TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-24 10:06:00","TempActual":null,"TempMaxima":null,"TempMinima":"1.8","TempAmbiente":null},
{"Fecha":"2016-10-24 10:06:00","TempActual":null,"TempMaxima":null,"TempMinima":null,"TempAmbiente":"30.0"},
{"Fecha":"2016-10-24 14:00:00","TempActual":"1.3","TempMaxima":null,"TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-24 14:00:00","TempActual":null,"TempMaxima":"1.5","TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-24 14:00:00","TempActual":null,"TempMaxima":null,"TempMinima":"0.8","TempAmbiente":null},
{"Fecha":"2016-10-24 14:00:00","TempActual":null,"TempMaxima":null,"TempMinima":null,"TempAmbiente":"25.0"},
{"Fecha":"2016-10-25 10:06:00","TempActual":"2.7","TempMaxima":null,"TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-25 10:06:00","TempActual":null,"TempMaxima":"3.0","TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-25 10:06:00","TempActual":null,"TempMaxima":null,"TempMinima":"1.8","TempAmbiente":null},
{"Fecha":"2016-10-25 10:06:00","TempActual":null,"TempMaxima":null,"TempMinima":null,"TempAmbiente":"30.0"},
{"Fecha":"2016-10-25 14:00:00","TempActual":"1.3","TempMaxima":null,"TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-25 14:00:00","TempActual":null,"TempMaxima":"1.5","TempMinima":null,"TempAmbiente":null},
{"Fecha":"2016-10-25 14:00:00","TempActual":null,"TempMaxima":null,"TempMinima":"0.8","TempAmbiente":null},
{"Fecha":"2016-10-25 14:00:00","TempActual":null,"TempMaxima":null,"TempMinima":null,"TempAmbiente":"25.0"}]

Thank you again.

[ivailoParticipant]

Hi juanellis,

In your source, you are using “null” about some values.
If you want to draw a line – you have to set correct(not “null”) values about line’s points.
In the following demo TempActual”: null is changed to TempActual”:”1.0″ and the line is drawn correctly.
http://jsfiddle.net/mp0jj64y/

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[juanellisParticipant]

Thank you very much for your help. I’ll correct the null values.

[Author]

Posts