Highcharts не будет отображаться, если элемент в последовательных данных пуст

Question

У меня есть диаграмма Highcharts, отображаемая в CRM, которая считывает данные из определенных элементов на странице. Но я сталкиваюсь с несколькими проблемами по мере того, как я прогрессирую, и я даже не уверен, что я делаю это оптимальным способом, на самом деле, я уверен, что нет.

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

Я автоматически импортировать данные в записи в CRM каждый месяц из другой системы. Эти данные хранятся в элементах на странице, которые в настоящее время скрыты от просмотра, только для предотвращения помех на экране.

JQuery, который следует в настоящее время используется для объявления переменных для хранения значений из элементов в HTML, которые, в конечном счете, используемые в функции Highcharts для точек данных, как:

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

и так далее для каждый для каждой категории за каждый месяц в году. Однако не все месяцы года произошли, поэтому в каждом элементе нет данных.

Диаграмма визуализируется с этим:

// 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 + */"]") 
    }, 
     ] 
    }); 
}); 

Вы можете увидеть в серии данных для каждой категории выше, что я закомментирована последующие месяцы, потому что график не будет оказывать, если у меня есть другая месяце участки без ранения; Мне будет дано JSON.parse: unexpected character, которое я предполагаю, это элементы, не содержащие в них данных. Вы можете увидеть, как это происходит, если вы просто удалите текст/цифры из div в связанном jsFiddle вверху.

Я понятия не имею, как я могу получить эту настройку, чтобы у меня были все мои элементы, готовые к работе, и просто отобразите диаграмму, даже если в элементе нет данных. Имеет ли это смысл?

Я действительно борюсь с этим. Я уверен, что с самого начала я его разработал. Думаю, мне просто нужно отобразить диаграмму, независимо от того, нет ли у меня элементов, которые я определил, в них нет текста.

Благодарим за помощь. Надеюсь, я достаточно объяснил!

Edit 1:

I've tried updating the fiddle here, но, похоже, есть две проблемы:

Во-первых, это не отображать любую из точек данных в настоящее время, хотя, если я делаю console.log(connectedArray) я могу видеть все данных из элементов массива.

Во-вторых, похоже, что он составляет четыре категории за каждый месяц, а не одну категорию за каждый месяц, представляющую четыре точки данных за этот месяц. Есть идеи?

Answer 1

Он должен иметь значение, если вы измените его на:

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

Он будет оказывать. Вам просто нужно заставить значение, и 0 кажется подходящим.

Edit: Если вам нужны другие категории не показать, что вам нужно сделать некоторые расчеты первых:

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 

Тогда вы можете сделать:

xAxis: { 
     categories: months 
    }, 

и

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

Answer 2

Ответа на этот вопрос для Edit1: Вы передаете строки данным, а должны быть цифрами, поэтому добавьте парсин г:

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

Fixed пример: http://jsfiddle.net/4pptn/1/