CODEWITHSUNDEEP
javascriptjqueryhighcharts
ChuckKelly
ChuckKelly

Reputation: 1740

HighChart Renders Blank with Small Data Set

Below is the chart I am trying to create , I took it straight from the examples and replaced the x-axis data and added in my own series data. In the console it prints out both of the arrays I used like this:

Reports:28,16,1,4,6,4,5,31,59,43,31,56,4
HOURSSS:0,1,2,4,6,7,9,11,12,13,14,15,16

and for some reason the chart just ends up looking like the pic below. I have been stumped on this for hours. Any idea whats going on?

var activityTotalDayByHour =  <?php echo json_encode($activityTotalDayByHour); ?>;
console.log("ACTIVITY:"+activityTotalDayByHour);
var Reports = [];
var Hours =[]
for (var i = 0; i < activityTotalDayByHour.length; i++) {
    Reports.push(activityTotalDayByHour[i]['Records']);
    Hours.push(activityTotalDayByHour[i]['Hour']);
}
$(function () {
        $('#highChartDiv').highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: 'US and USSR nuclear stockpiles'
            },
            subtitle: {
                text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                    'thebulletin.metapress.com</a>'
            },
            xAxis: {
                categories: Hours
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            },
            series: [{
                name: 'USA',
                data:Reports
            }]
        });
    });
      </script>

enter image description here

EDIT:

Thanks to @Jeromy French I have discovered it has to be something funky going on w. my data source. When I plug in the exact same data into static arrays it works just fine, but when I use the arrays created via my loops it does not work. Even more weird is that if I create 2 versions of my data ( one formed through looping through the dynamic data and one formed by plugging in the exact same static data into arrays it console.log's out identical like this :

---Looped Versions----
Reports:28,16,1,4,6,4,5,31,59,43,31,56,10
HOURSSS:0,1,2,4,6,7,9,11,12,13,14,15,16
--Static Versions---
REPORTS_B:28,16,1,4,6,4,5,31,59,43,31,56,4
HOURS_B:0,1,2,4,6,7,9,11,12,13,14,15,16

var activityTotalDayByHour =  <?php echo json_encode($activityTotalDayByHour); ?>;
console.log("ACTIVITY:"+activityTotalDayByHour);
var Reports = [];
var Hours =[]
for (var i = 0; i < activityTotalDayByHour.length; i++) {
    Reports.push(activityTotalDayByHour[i]['Records']);
    Hours.push(activityTotalDayByHour[i]['Hour']);
}


var USA=[null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982];


console.log("Reports:"+Reports);
console.log("HOURSSS:"+Hours);

var Reports_b=[28,16,1,4,6,4,5,31,59,43,31,56,4],
    Hours_b=[0,1,2,4,6,7,9,11,12,13,14,15,16];

    console.log("REPORTS_B:"+Reports_b);
    console.log("HOURS_B:"+Hours_b);

Upvotes: 2

Views: 58

Answers (1)

Matt
Matt

Reputation: 3120

Going out on a bit of a limb here, but i believe your issue is down to the fact that your Reports array is made up of strings (instead of numbers) - i've had the same issue from time to time.

Either modify the data Reports is pulling data from, or alternatively do it as you push in to Reports:

for (var i = 0; i < activityTotalDayByHour.length; i++) {
    Reports.push(parseInt(activityTotalDayByHour[i]['Records'], 10));
    Hours.push(activityTotalDayByHour[i]['Hour']);
}

Upvotes: 2

Related Questions