CODEWITHSUNDEEP
javascripthighchartscoldfusion
chyman-91
chyman-91

Reputation: 263

Can I let a data value null in highcharts?

Currently I am using highcharts with ColdFusion. I want to create charts which have breaking points but there are errors saying that " Variable NULL is undefined.". So I want to ask whether I can let one of the data values in highcharts be null?

Below is my code. TQ

<cfscript>
 categories=   ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries'] ;

series= [{
            'name': 'John',
            'data': [0, 1, 4, 4, 5, 2, 3, 7]
        }, {
            'name': 'Jane',
            'data': [1, 0, 3, null, 3, 1, 2, 1]
        }];
</cfscript>

<html>

<head> 
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<script src="highcharts-more.js"></script>
  
<script>
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area',
            spacingBottom: 30
        },
        title: {
            text: 'Fruit consumption *'
        },
        subtitle: {
            text: '* Jane\'s banana consumption is unknown',
            floating: true,
            align: 'right',
            verticalAlign: 'bottom',
            y: 15
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories: <cfoutput>#serializeJson(categories)#</cfoutput>
        },
        yAxis: {
            title: {
                text: 'Y-Axis'
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.x + ': ' + this.y;
            }
        },
        plotOptions: {
            area: {
                fillOpacity: 0.5
            }
        },
        credits: {
            enabled: false
        },
       series: <cfoutput>#serializeJson(series)#</cfoutput>
    });
});
</script> 

</head>

<body>

    <div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

</body> 
</html>

Upvotes: 0

Views: 486

Answers (1)

Bobby Orndorff
Bobby Orndorff

Reputation: 3335

Data values can be null in highcharts. A null value is treated as a missing value. The following snippet is your code with the ColdFusion script removed.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area',
            spacingBottom: 30
        },
        title: {
            text: 'Fruit consumption *'
        },
        subtitle: {
            text: '* Jane\'s banana consumption is unknown',
            floating: true,
            align: 'right',
            verticalAlign: 'bottom',
            y: 15
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
        },
        yAxis: {
            title: {
                text: 'Y-Axis'
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.x + ': ' + this.y;
            }
        },
        plotOptions: {
            area: {
                fillOpacity: 0.5
            }
        },
        credits: {
            enabled: false
        },
       series: [{
            'name': 'John',
            'data': [0, 1, 4, 4, 5, 2, 3, 7]
        }, {
            'name': 'Jane',
            'data': [1, 0, 3, null, 3, 1, 2, 1]
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

The error you are encountering suggests that the ColdFusion script is inserting NULL (instead of null) into the JavaScript code. JavaScript is case sensitive. JavaScript would assume that NULL was the name of a variable. Since a variable called NULL was never declared, it would result in an error message indicating that NULL was undefined.

I do not know ColdFusion, so I can not help you fix the ColdFusion script.

Upvotes: 1

Related Questions