Max length for flot chart data or other reasons horizontal bars might not show up even though axes are rendered

Question

Thanks to anyone willing to help! I new around here and hope I'm following the right format.

I have several horizontal bar charts made with flot charts in jquery. Most render the data perfectly fine. One does not. In this chart, the axis labels and data series labels show up, as do the tick labels and my vertical scroll bar. However, no actual axes or data get rendered in the chart.

One main difference is that this chart has more data than the others - about 500 rows as opposed to about 50. The chart area of all charts are adjusted to the number of rows using jquery .css so that the height of the charts are all different. I am wondering if there is simply a limit to how much data flot charts can take for the horizontal bar chart format. I found some stack overflow questions about flot chart line charts, which said you could have max one point per pixel on the x axis in this format - so I'm wondering if there is something similar going on for height with horizontal bar charts.

Or, does anyone see anything else in my code that could be causing the data and axes not to render?

The data is called via an API from mySQL into a jSON object, which I format in javascript for use in flot charts in the form of [[data, index]]. The chart should load on page ready into the div class "pd_level". There is also a filter function with a drop down menu, which when something from the drop-down is selected, new charts show in both div classes "pd_level" and "conversions". This filter is on a number of my other charts and is working fine on those.

The html:

<div class="filter">
    <select id="selec" name="pd_id" class="form-control form-filter input-sm">
        <option id="pd_id" value="">Filter by Product...</option>
    </select>
</div>
<div class="portlet box blue">
    <div class="portlet-title">
        <div class="caption">
            <i class="icon-bar-chart"></i>Product Performance
        </div>
        <div class="tools">
            <a href="javascript:;" class="collapse">
            </a>
            <a href="#portlet-config" data-toggle="modal" class="config">
            </a>
            <a href="javascript:;" class="reload">
            </a>
            <a href="javascript:;" class="remove">
            </a>
        </div>
    </div>
    <div class="portlet-body">
        <div id="box" style="height: 600px; overflow: scroll;">
            <div id="chart_1_2" class="chart pd_level">
            </div>
        </div>
        <div id="box">
            <div id="chart_1_2" class="chart conversions">
            </div>
        </div>
    </div>
</div>

The javascript:

var load = function () {
    $.getJSON('api/db/product_conversions_pd_level', function (data) {
        var i = 0;
        var dta0 = [], dta1 = [], ticks = [];
        var dtlist = [dta0, dta1];
        var calcs = ['view', 'choose'];
        //this runs through each row and grabs the relevant values and adds them to an array of arrays for the chart data
        $.each(data, function (key, val) {
            for (n = 0; n < calcs.length; n++) {
                var s = this[calcs[n]];
                var dt = parseInt(s);
                var d = dtlist[n];
                d.push([dt, i]);
            }
            var labellist = this.pd_name;
            console.log(labellist);
            var tks = [i, labellist];
            ticks.push(tks);
            i++;
        });
        $('.pd_level').css('height', (ticks.length * 6 * 25) + 'px').css('width', '95%');
        //this sets the value of the dataset and its labels, as well as plot options for the chart
        var dataset = [{label: "Views", data: dta0}, {label: "Selections", data: dta1}];
        var options = {
            series: {bars: {show: true}},
            bars: {
                align: "center",
                barWidth: .10,
                horizontal: true,
                order: 2,
                fillColor: {colors: [{opacity: .9}, {opacity: .9}]}
            },
            pan: {interactive: true},
            yaxis: {axisLabel: 'Products', ticks: ticks, align: "center", tickLength: .5, tickSize: 2, panRange: [0, 5]},
            xaxis: {position: 'top', axisLabel: 'Number of Actions'},
            legend: {noColumns: 1, labelBoxBorderColor: "#000000", position: "ne"},
            colors: ["#85adf4", "#92acac", "#8b9ef4", "#b6acac", "#97b690", "#7abeda"],
            grid: {hoverable: true}
        };
        //this plots the chart in the div
        toolt(ticks, 5, 50, '.pd_level', 'h');
        $.plot($('.pd_level'), dataset, options);
    });
};
load();

Answer 1

I had a simular issue with the bas not showing in my graph. My graph worked with a dynamic width and I found out the graph got blank when the width got bigger then proximately 32750px.