[Solved]-highcharts zoomable 6 month line graph-Highcharts

It looks as though you're trying to show one data point per month. If this is the case, I would recommend assigning each data point a time and changing the date formatter.

//Example 1: Each data point has a time, with a date formatter:
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { //custom date formats for different scales
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%e. %b',
            week: '%e. %b',
            month: '%b', //month formatted as month only
            year: '%Y'
        }
    },

    series: [{
        data: [
            {x: Date.UTC(2010, 0, 1), y: 1}, //one data point for each month
            {x: Date.UTC(2010, 1, 1), y: 4},
            {x: Date.UTC(2010, 2, 1), y: 9},
            {x: Date.UTC(2010, 3, 1), y: 16},
            {x: Date.UTC(2010, 4, 1), y: 25},
            {x: Date.UTC(2010, 5, 1), y: 36}
        ]
    }]
});

However, it also seems you want to zoom down to the 'day' level. If this is the case, it makes sense to add all your data points to the series, and use highcharts' zoomType property, perhaps in combination with the date formatter.

//Example 2: Each data point represents a day, and we use the 'zoomType' feature:
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime',
        zoomType: 'x'
    },

    series: [{
        data: [
            {x: Date.UTC(2010, 0, 1), y: 1}, //one data point for each day
            {x: Date.UTC(2010, 0, 2), y: 1.1},
            {x: Date.UTC(2010, 0, 3), y: 1.4},
            {x: Date.UTC(2010, 0, 4), y: 1.8},
            {x: Date.UTC(2010, 0, 5), y: 2.5},
            {x: Date.UTC(2010, 0, 6), y: 3.8}
        ]
    }]
});