high chart graph doesnt start from the correct month

Question

I have a chart in my django based project wher I need to display two series of data (previsions and consommations) over the twelve months of the year

The problem is that when my data doesnt start from january (for example) , I still have to display january with empty data

This works for one of the series (prvisiosns) but not the other meaning that previsions start frm february as it should be but consommations start from january in the chart althought its data is starting from february

please take a look at my code below speacially the section {% block graph_data %}

Here is my code:

<script type="text/javascript">
$(document).ready(function() {
   {% if data %}
   var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'graph',
         {% block graph_type %}defaultSeriesType: 'column',{% endblock %}
         marginRight: 125,
         marginBottom: 25
      },
      title: {
         text: '{% block graph_title %}Consommation{% endblock %}',
         x: -20 //center
      },
      xAxis: {
         {% block graph_xaxis %}
categories: [{% for i in xaxis %}'{{ i|title }}'{% if not forloop.last %},{% endif %}{% endfor %}]
{% endblock %},
      },
      yAxis: {
         title: {
            text: 'Consommation (MWh)'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
         }]
      },
      {% block tooltip %}
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               this.x +'{% block graph_tooltip_unite %}{% endblock %}: '+ this.y.toFixed(2) +' MWh';
         }
      },
      {% endblock %}
      legend: {
         layout: 'vertical',
         align: 'right',
         verticalAlign: 'top',
         x: 20,
         y: 100,
         borderWidth: 0
      },
      series: [


  {% block graph_data %}
 {
 name: 'Consommations',
 data: [
        {% for h in data|dictsort:"date__mois" %}
            {{ h.quantite|safe }}/1000
            {% if not forloop.last %},{% endif %}
        {% endfor %}
       ]
  }
     {% if user.profil.is_gold %}
  ,{
 name: 'Prévisions',
 data: [
        {% for h in previsions|dictsort:"mois" %}
            {{ h.mwh|safe }}
            {% if not forloop.last %},{% endif %}
        {% endfor %}
       ]
  }
 {% endif %}
{% endblock %}


      ]

});
{% else %}
    {% if request.POST %}
        $('#graph').html('<div class="aucune_donnee">Aucune donnée disponible pour les critères sélectionnés.</div>');
    {% endif %}
{% endif %}
var blanco = "<div class='blanco'></div>";
$("#graph").append(blanco);
});

This is driving me crazy since a week but I can see whats the problem, but it's my frist time with highcharts..so any help would be greatly appreciated,Thanks

Answer 1

Define your categories in the xAxis

 xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ]
        }

Use index of the month (base 0) instead of the month literal in your series' data (should be easy to do, either on the server or JS)

 series: [{
             name: 'Consommations',
            data: normalizeData([[1,5],[9,10],[5,0]])

        }, {
            name: 'Prévisions',
            data: normalizeData([[1,2],[2,4],[5,8]])

        }]

Normalize your data with javascript to add data for missing months

function normalizeData(data){
  var normalizedData=[];
  var i;
  for(i=0;i<12;i++){
    if(data[i])
        normalizedData[i]=data[i];
    else
        normalizedData[i]=0;
  }
  return normalizedData;
}

jsFiddle solution: http://jsfiddle.net/jugal/zDnS2/

Alternate solution Add the missing month data in the normalizeData method
just create the months array to represent the possible months

var months=[
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ];

and add data as 0 where data is not present

function normalizeData(data){
var existingMonths=[];
var normalizedData=[];
var i;
for(i=0;i<data.length;i++){
    var datum=data[i];
    datum[0]=  $.inArray(datum[0],months);
    existingMonths.push(datum[0]);
    normalizedData.push(datum);
}
for(i=0;i< months.length;i++){
    if($.inArray(i,existingMonths)==-1)
        normalizedData.push([i ,0]);
}
return normalizedData;
}

set xAxis categories to the months array

 xAxis: {
            categories: months
        }

@ http://jsfiddle.net/jugal/vYK7H/