CODEWITHSUNDEEP
highcharts
Jaydip Patil
Jaydip Patil

Reputation: 21

HighChart Line Draw issues(How to draw contineous line between 2 points )

Friends ,

i want to show contineous line between Two points of series even if any y axis value missing from serries . As i have attached code for upper series "tokio" march month y axis value is missing .I want line should be contineous .

Below is my code .

Can any one have idea about this,please help.

  $(function () {
            var seriesdata = [];  
            var options = {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.com',
                    x: -20
                },
                xAxis: {
                    categories: [],
                    min: 0
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    } 
                },
                tooltip: {
                    valueSuffix: '°C'
                },               
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{ name: 'tokio', data: [['Jan', 7.0], ['Feb', 6.9], ['Mar', null],['Apr', 18.2]] },
                        { name: 'NewYork', data: [['Jan', -0.2], ['Feb', 0.8], ['Mar', 5.7], ['Apr', 11.3], ['May', 17.0]] }
                ]
            };

            ///To pass category from json object 
            var dataarrey = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                           'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            var items = [];
            var item;
            for (i = 0; i < dataarrey.length; i++) {
                item = { data: dataarrey[i] };
                items.push(item);
            }           

            for (i = 0; i < items.length; i++)
            {
                options.xAxis.categories[i] = items[i].data;
            }

            $('#container').highcharts(options);

        });

Upvotes: 0

Views: 793

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

Take a look at the connectNulls property:

Upvotes: 2

Mark
Mark

Reputation: 108537

Just remove the point with the null value:

series: [
    { 
        name: 'tokio', 
        data: $.grep([['Jan', 7.0],['Feb', 6.9],['Mar', null],['Apr', 18.2]],
            function(i){
                return i[1] != null;
             })
    },
    { 
        name: 'NewYork', 
        data: [['Jan', -0.2], ['Feb', 0.8], ['Mar', 5.7], ['Apr', 11.3], ['May', 17.0]]
    }
]

Upvotes: 1

Related Questions