Search code examples
javascriptjqueryjqplotstackedbarseries

JQPLOT Stacked Bar Chart array input issue


I am trying to plot a stacked bar chart and i am dynamically passing the data to the chart

When i pass the input

[1, 0] [0, 1] [0, 0] [0, 1] ["2015-02-16", "2015-02-15"]

in the variables s1,s2,s3,s4,dateArr (code snippet below)

i get the proper stacked bar chart plotted

enter image description here

But when the data passed to the stacked bar chart is as follows

[2] [1] [0] [0]  ["2015-02-16"]

only the second array is plotted ,the first is being ignored

enter image description here

Do notice however that the y axis starts from 2 ,i .e it recognizes the first array but the same is not being plotted

here is the code i am using to plot the chart

//plot stacked bar chart function
        function plotStack(s1,s2,s3,s4,dateArr) {
            if(dateArr.length==0){
                s1=[0,0,0,0];
                s2=[0,0,0,0];
                s3=[0,0,0,0];
                s4=[0,0,0,0];
                dateArr.push("");
                dateArr.push("");
                dateArr.push("");
                dateArr.push("");
            }
            $('#graph_stacked').html(''); // redraw the stack

            var plotStack = $.jqplot('graph_stacked', [s1, s2, s3, s4], {
            // Tell the plot to stack the bars.
            stackSeries: true,
            captureRightClick: true,
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {                        
                        barWidth: 40,shadow:true,   // Set a 30 pixel width for the bars.
                        shadowAngle: 90,
                        highlightMouseDown: true    // Highlight bars when mouse button pressed. Disables default highlighting on mouse over.
                },
                pointLabels: {
                    show: false
                }
            },
            grid: { background: 'transparent' },
            seriesColors:   ["#47759e", "#444444", "#777777", "#9b9b9b"],
            series:         [   {label: 'New'}, {label: 'In Progress'}, {label: 'Requesting Assistance'}, {label: 'Completed'}  ],
            axes: {
                xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: dateArr
                },
                yaxis: {
                    // Don't pad out the bottom of the data range.  By default,
                    // axes scaled as if data extended 10% above and below the
                    // actual range to prevent data points right on grid boundaries.
                    // Don't want to do that here.
                    padMin: 0
                }
            },

            legend: {
                renderer: $.jqplot.EnhancedLegendRenderer,
                show: true,
                placement: 'outside',
                rendererOptions: {
                    numberRows: 2,
                    numberColumns: 2
                },
                location: 's',
                    marginTop: '45px',
                    border: 'none'
                },
                highlighter: {
                    show:true,
                    tooltipLocation: 'n',
                    showMarker : false,
                    tooltipAxisX: 20, // exclusive to this version
                    tooltipAxisY: 20, // exclusive to this version
                    useAxesFormatters: false,
                    formatString:'%s, %P',
                }
            });

            newTask.length=0;
            inProgressTask.length=0;
            reqAssistTask.length=0;
            completedTask.length=0;
            date.length=0;
            stackArrAllNew.length=0;
            stackArrAllInProgress.length=0;
            stackArrAllReqAss.length=0;
            stackArrAllCompTask.length=0;
            stackDateAll.length=0;
        }

So what am i doing wrong?

Thanks in advance


Solution

  • Ok the solution was i had to change

    axes: {
                    xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: dateArr
                    },
                    yaxis: {
                        // Don't pad out the bottom of the data range.  By default,
                        // axes scaled as if data extended 10% above and below the
                        // actual range to prevent data points right on grid boundaries.
                        // Don't want to do that here.
                        padMin: 0
                    }
                },
    

    to

    axes: {
                    xaxis: {
                            renderer: $.jqplot.CategoryAxisRenderer,
                            ticks: dateArr
                    }
    }