CODEWITHSUNDEEP
javascriptphphighcharts
John
John

Reputation: 565

Highcharts should not draw graph if the value is 0

I am using Highcharts and it reports for the whole year.

I have data only until July (As it is July from today) but when I plot the graph it plots until December with value as 0 (Aug to Dec).

I don´t want to plot the graph until Dec and I want to plot only until July.

$(function() {
  var colors = [
    '#4572A7',
    '#AA4643',
    '#89A54E',
    '#80699B',
    '#3D96AE',
    '#DB843D',
    '#92A8CD',
    '#A47D7C',
    '#B5CA92'
  ];

  var applyGradient = function(color) {
    return {
      radialGradient: {
        cx: 0.5,
        cy: 0.3,
        r: 0.7
      },
      stops: [
        [0, color],
        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
      ]
    };
  };

  $('#container').highcharts({
    colors: colors,
    title: {
      text: 'Points with zero value are not connected by line'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      offset: 0,
    },

    plotOptions: {
      series: {
        connectNulls: true
      }
    },
    yAxis: {
      min: 0,
    },
    series: [{
        data: [2, 10, 40, 40, 40, 40, 30, 0, 0, 0, 0, 0]
      },
    ]
  });

  colors = $.map(colors, applyGradient);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 300px"></div>

In real time am getting the values from the SQL query and for this fiddle I just kept the static values

Upvotes: 0

Views: 343

Answers (1)

Adam
Adam

Reputation: 1159

To do something like this, you can either return only the data you require from the database or process it on the fly in JavaScript.

The following takes the data and category data and processes it outside of the actual initialisation of the chart:

//Original values
var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var data = [2, 10, 40, 40, 40, 40, 30, 0, 0, 0, 0, 0]

//New arrays to store data to be displayed
var currentCategories = []
var currentData = [];

//Get current month to provide a cut-off
var currentMonth = new Date().getMonth();

//Loop through the data and add the value for each month to the data array and category array
for(var i = 0; i < categories.length; i++){
    if(currentMonth >= i){//Alternatively at this point you could exclude the values if data[i] == 0
        currentCategories.push(categories[i]);
        //Arrays may be different lengths.
        if(data.length >= (i+1)){
            currentData.push(data[i]);
        }
    }
}

While you can just exclude 0 values. You might lose months earlier in the year if they have a 0 value. With the data you've provided it feels less risky to remove only values that are after the current month.

You can then use these created variables to set your data in your HighChart:

$('#container').highcharts({
    colors: colors,
    title: {
      text: 'Points with zero value are not connected by line'
    },
    xAxis: {
      categories: currentCategories, //Use processed list of categories
      offset: 0,
    },

    plotOptions: {
      series: {
        connectNulls: true
      }
    },
    yAxis: {
      min: 0,
    },
    series: [{
        data: currentData //Use processed array of data
      },
    ]
  });

Upvotes: 1

Related Questions