jQuery UI Widgets Forums Chart Column chart does not plot all series

This topic contains 4 replies, has 3 voices, and was last updated by  VHOlguin 8 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • VHOlguin
    Participant

    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


    Dimitar
    Participant

    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/


    VHOlguin
    Participant

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

    Column chart does not plot all series #69747

    Peter Stoev
    Keymaster

    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/

    Column chart does not plot all series #69773

    VHOlguin
    Participant

    Awesome Peter.

    It works!!!

    Thanks

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

You must be logged in to reply to this topic.