Column chart does not plot all series

[VHOlguinParticipant]

Hi there

Im trying to create a column chart with 4 series, however not all series are plotted (not plotting some entire months, for any series). I review my JSON response for my service and I dont have null values. Here is my code.

var source ={
        datatype: "json",
        datafields: [            
            { name: 'period' },
            { name: 'ventas' },
            { name: 'truput' },
            { name: 'gasto' },            
            { name: 'utilidad' }
        ],                    
        url: '/gastos/getGraficInicio'
    };        
    
    var dataAdapter = new $.jqx.dataAdapter(source, 
        { async: true, 
        autoBind: true, 
        loadError: function (xhr, status, error){ 
            //alert('Error cargando "' + source.url + '" : ' + error); 
        } 
    });
    
    var months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
    
    var settings = {
        title: "Último año",
        description: " ",
        enableAnimations: true,
        showLegend: true,                    
        padding: { left: 10, top: 5, right: 10, bottom: 5 },
        titlePadding: { left: 50, top: 0, right: 0, bottom: 10 },
        source: dataAdapter,        

        xAxis:{
            dataField: 'period',
            formatFunction: function (value) {                
                return months[value.getMonth()] + '-' + value.getFullYear();                
            },
            type: 'date',
            baseUnit: 'month',
            valuesOnTicks: true,
            
            tickMarks: {
                visible: true,
                interval: 1,
                color: '#BCBCBC'
            },
            unitInterval: 1,
            gridLines: {
                visible: false,
                interval: 1,
                color: '#BCBCBC'
            },
            labels: {
                angle: -30,
                rotationPoint: 'topright',
                offset: { x: 0, y: -25 }
            }
        },

        valueAxis:{               
            visible: true,            
            title: { text: 'Pesos<br>' },
            tickMarks: { color: '#BCBCBC' },
            labels:{
                    horizontalAlignment: 'right',
                    formatSettings:{
                        decimalPlaces: 2,
                        thousandsSeparator : ",",
                        prefix : '$ '
                    }
                }
        },

        //colorScheme: 'scheme01',

        seriesGroups:[{
                type: 'column',                
                series: [
                        { dataField: 'ventas', displayText: 'Ventas', color : 'green' },
                        { dataField: 'truput', displayText: 'Truput', color : "blue" },
                        { dataField: 'gasto', displayText: 'Gastos de Operación', color : "red" },                                                
                        { dataField: 'utilidad', displayText: 'Utilidad', color : "black" }                        
                    ],
                //series: obj.series,
                toolTipFormatFunction: function(value, itemIndex, serie, group, xAxisValue, xAxis){                    
                    var months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
                    return months[xAxisValue.getMonth()] + '-' + xAxisValue.getFullYear() + '<br>' + serie.displayText  + " $ " +   value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                },
                showLegend: true                
            }
        ]

    };    
    $('#columnChart').jqxChart(settings); 

And here is my JSON response from my service:

[{“period”:”4\/01\/2014″,”gasto”:1123510.84,”ventas”:0,”truput”:0,”utilidad”:-1123510.84},{“period”:”5\/01\/2014″,”gasto”:895222.16,”ventas”:0,”truput”:0,”utilidad”:-895222.16},{“period”:”6\/01\/2014″,”gasto”:1214656.15,”ventas”:0,”truput”:0,”utilidad”:-1214656.15},{“period”:”7\/01\/2014″,”gasto”:914301.82,”ventas”:0,”truput”:0,”utilidad”:-914301.82},{“period”:”8\/01\/2014″,”gasto”:1074849.92,”ventas”:0,”truput”:0,”utilidad”:-1074849.92},{“period”:”9\/01\/2014″,”gasto”:1090692.9,”ventas”:0,”truput”:0,”utilidad”:-1090692.9},{“period”:”10\/01\/2014″,”gasto”:1148305,”ventas”:0,”truput”:0,”utilidad”:-1148305},{“period”:”11\/01\/2014″,”gasto”:1008130.49,”ventas”:0,”truput”:0,”utilidad”:-1008130.49},{“period”:”12\/01\/2014″,”gasto”:1621765.49,”ventas”:0,”truput”:0,”utilidad”:-1621765.49},{“period”:”1\/01\/2015″,”gasto”:1548340.24,”ventas”:9321544.45,”truput”:5588244.45,”utilidad”:4039904.21},{“period”:”2\/01\/2015″,”gasto”:1636681.5,”ventas”:872905.51,”truput”:567905.51,”utilidad”:-1068775.99},{“period”:”3\/01\/2015″,”gasto”:871556.88,”ventas”:8316619.79,”truput”:5116619.79,”utilidad”:4245062.91},{“period”:”4\/01\/2015″,”gasto”:0,”ventas”:0,”truput”:0,”utilidad”:0}]

Thanks

[DimitarParticipant]

Hi VHOlguin,

We confirm this issue and have created a work item about it. If it is suitable for you, you can use the ‘line’ chart type instead.

Best Regards,
Dimitar

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

[VHOlguinParticipant]

Thanks Dimitar, and yes we are going to use the line chart meanwhile.

[Peter StoevKeymaster]

Hi VHOlguin,

The problem with the sample is that the size of the chart is too small to show so many columns on a date-time axis (if you take into account the default spacing and padding percentages and the default minimum column width). The chart calculates (depending on the date) the relative offset where a group of columns should start and tries to render the columns at that position. Also the chart tries to make the content look nice so the algorithm may skip some columns for clarity if they are overlapping. This will be important in cases where you have several hundred or thousands of columns (for example columns chart showing daily stock price for 1 year). In this case the chart will select a sample of columns. In your example the actual columns are not overlapping but if you take into account the require padding percentages between them, some months will overlap.
The good news is that this behavior is configurable and you can turn it off using the skipOverlappingPoints parameter.

Please add the following setting to the series group and it will make all columns display:

` seriesGroups: [{
type: ‘column’,
skipOverlappingPoints: false,
series: [
{ dataField: ‘ventas’, displayText: ‘Ventas’, color: ‘green’ },
{ dataField: ‘truput’, displayText: ‘Truput’, color: “blue” },
{ dataField: ‘gasto’, displayText: ‘Gastos de Operación’, color: “red” },
{ dataField: ‘utilidad’, displayText: ‘Utilidad’, color: “black” }
],
//series: obj.series,
toolTipFormatFunction: function (value, itemIndex, serie, group, xAxisValue, xAxis) {
var months = [‘Ene’, ‘Feb’, ‘Mar’, ‘Abr’, ‘May’, ‘Jun’, ‘Jul’, ‘Ago’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dic’];
return months[xAxisValue.getMonth()] + ‘-‘ + xAxisValue.getFullYear() + ‘
‘ + serie.displayText + ” $ ” + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, ‘$&,’);
},`

Best Regards,
Peter Stoev

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

[VHOlguinParticipant]

Awesome Peter.

It works!!!

Thanks

[Author]

Posts