CODEWITHSUNDEEP
javascriptjqueryhighcharts
brk
brk

Reputation: 50346

Not able to correctly plot x-axis in HighChart

I am new to highChart and even after following the documentation I am not able to correctly plot the x-axis. It only labels the the first element of the dateAndTimeArray array.Can you please tell me where I am making mistake. Here is my code.

JSON Array

  var jsonObj=[ {
  name:"Nov-10 18:00",
  data:[50],
  type:'column'
},
            {
  name:"Nov-20 20:00",
  data:[60],
  type:'column'
},
            {
  name:"Nov-10 22:00",
  data:[70],
  type:'column'
},
            {
  name:"Nov-12 20:00",
  data:[80],
  type:'column'
}]

HighChart related code

dateAndTimeArray = ['Nov-15 18:00', 'Nov-20 20:00', 'Nov-11 22:00', 'Nov-12 20:00'];

     var seriesData=jsonObj;
console.log(seriesData);
    $('#container').highcharts({
        chart: {
            zoomType: 'xy',
            spacingRight: 10
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            },
            startOnTick: true,
            showFirstLabel: true,
            endOnTick: true,
            showLastLabel: true,
            categories: dateAndTimeArray,
            tickInterval: 00,
            labels: {
                formatter: function() {
                    return this.value.toString().substring(0, 6);
                },
                rotation: 0.1,
                align: 'left',
                step: 10,
                enabled: true
            },
            style: {
                fontSize: '8px'
            }
        },
        yAxis: {
            title: {
                text: 'Measurement value'
            }
        },
        tooltip: {
            xDateFormat: '%Y-%m-%d %H:%M',
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                //  threshold: null
            }
        },
        series:jsonObj


    });

DEMO

Upvotes: 0

Views: 120

Answers (1)

wergeld
wergeld

Reputation: 14462

The chart is plotting what you asked it to. You have 4 series of data. Each series has one data point. I think you confusing the series.name and xAxis point. Since each of your series has just one point it is assigned to the first category in your xAxis.categories.

The question then becomes: Do you want to have a categorical xAxis or a datetime xAxis?

Your data leads itself to categorical but your xAxis.categories don't line up with your series.name entries and your xAxis.categories are not in ascending time order. You also are setting a categorical list of items but telling highcharts that your chart is type: 'datetime'. You need to pick one.

Here is an example using categorical type.

Here is an example using datetime type.

Upvotes: 1

Related Questions