CODEWITHSUNDEEP
javascriptjqueryhighcharts
Get-ForumUserName
Get-ForumUserName

Reputation: 89

Highcharts will not render if element in series data is empty

I've got a Highcharts graph displaying in a CRM that is reading data from specific elements within the page. But I'm running into several problems as I progress and I'm not even sure I'm doing this the optimal way, in fact, I'm sure I'm not.

I have essentially recreated how this is setup in jsFiddle here.

I am automatically importing data into records in the CRM every month from another system. This data is stored in elements in the page that are currently hidden from view, just to prevent clutter on the screen.

The jQuery that follows is being used to declare the variables to hold the values from the elements in the HTML that are eventually used in the Highcharts function for the data points like:

var janConnected = $('#jan_connected').text();
var janBusy = $('#jan_busy').text();
var janNoanswer = $('#jan_noanswer').text();
var janAbandoned = $('#jan_abandoned').text();

and so on for every for each category for every month of the year. However, not all months of the year have occurred yet so there is not data in every element.

The chart is being rendered with this:

// display the chart
$(document).ready(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            borderWidth: 1
        },
        title: {
            text: 'Chart'
        },
        xAxis: {
            categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        },
        yAxis: {
            title: {
                text: 'Total Calls'
            },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: 'white'
            }   
        }
        },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            dataLabels: {
                enabled: true
            }
        }
    },
    exporting: {
        enabled: false
    },  
    series: [{
        name: 'Connected',
        data: JSON.parse("[" + janConnected + "," + febConnected + /* "," + marConnected +  "," + aprConnected + "," + mayConnected + /* "," + junConnected + "," + julConnected + "," + augConnected + "," + sepConnected + "," + octConnected + "," + novConnected + "," + decConnected + */"]")
    }, {
        name: 'Busy',
        data: JSON.parse("[" + janBusy + "," + febBusy + /* "," + marBusy + "," +  aprBusy + "," + mayBusy + /* "," + junBusy + "," + julBusy + "," + augBusy + "," + sepBusy + "," + octBusy + "," + novBusy + "," + decBusy + */"]")
    }, {
        name: 'No Answer',
        data: JSON.parse("[" + janNoanswer + "," + febNoanswer + /* "," + marNoanswer +  "," + aprNoanswer + "," + mayNoanswer + /* "," + junNoanswer + "," + julNoanswer + "," + augNoanswer + "," + sepNoanswer + "," + octNoanswer + "," + novNoanswer + "," + decNoanswer + */"]")
    }, {
        name: 'Abandoned',
        data: JSON.parse ("[" + janAbandoned + "," + febAbandoned + /* "," + marAbandoned +  "," +  aprAbandoned + "," + mayAbandoned + /* "," + junAbandoned + "," + julAbandoned + "," + augAbandoned + "," + sepAbandoned + "," + octAbandoned + "," + novAbandoned + "," + decAbandoned + */"]")
    }, 
        ]
    });
});

You can see in the series of data for each category above that I have commented out subsequent months because the chart will not render if I have the other month's plots uncommented; I will be given a JSON.parse: unexpected character which I'm assuming is from the elements not having any data in them. You can see how this happens if you just remove the text/numbers from the divs in the linked jsFiddle at the top.

I have no idea how I can get this setup so I can have all of my elements ready to go and just have the chart display even if there is no data in the element. Does this make sense?

I'm really struggling with this. I'm sure I designed it horribly to begin with. I guess I just need for the chart to display with regardless of whether or not the elements that I have defined do not have text in them.

Thank you for your help in advance. I hope I explained myself sufficiently!

Edit 1:

I've tried updating the fiddle here, but it looks like there are two problems:

First, it's not displaying any of the data points now even though if I do a console.log(connectedArray) I can see all of the data from the elements in the array.

Second, it looks like it's making four categories for each month, instead of one category for each month representing the four data points for that month. Any ideas?

Upvotes: 3

Views: 3817

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

Answer for Edit1: You are passing strings to data, while should be number, so add parsing: 

connectedArray.push(parseInt($('#jan_connected').html(),10));

Fixed example: http://jsfiddle.net/4pptn/1/

Upvotes: 1

dave
dave

Reputation: 64657

It has to have a value, if you change it to:

var janNoanswer = $('#jan_noanswer').text() || '0';

It will render. You just have to force a value, and 0 seems like a good fit.

Edit: If you need the other categories not to show up, you need to do some calculation first:

var months = [];
var connectedArray = [];
if ($('jan_connected').html()!='') {
      months.push('January');
      connectedArray.push($('jan_connected').html());
}
if ($('feb_connected').html()!='') {
     months.push('February');
     connectedArray.push($('feb_connected').html());
}
//etc

Then you can do:

 xAxis: {
        categories: months
    },

and

series: [{name: 'Connected', data: connectedArray }, ... ]

Upvotes: 1

Related Questions