CODEWITHSUNDEEP
javascripthighcharts
Caveman
Caveman

Reputation: 7

Add start-date and end-date as a Xaxis label in highchart

I use date as a string in my chart.

How can I use my start-date and end-date string variables as a label in my xAxis? start-date = '10.02.2013' end-date = '10.05.2013'

The code and the chart image is attached. The only thing I need to do is to add startDateLabel and endDateLabel. 

var dateEndLabel, dateStartLabel, i, j, lastDate, seriesData, x, y;
  i = 0;
  seriesData = new Array();
  lastDate = data[i].Values.length - 1;
  dateStartLabel = data[i].Values[0].Time;
  dateEndLabel = data[i].Values[lastDate].Time;
  while (i < data.length) {
    seriesData[i] = [];
    j = 0;
    x = [];
    y = [];
    while (j < data[i].Values.length) {
      x = data[i].Values[j].Time;
      y = data[i].Values[j].Value;
      seriesData[i].push([x, y]);
      j++;
    }
    i++;
  }
  return $("#criticalWPtrend").highcharts({
    chart: {
      type: "line"
    },
    area: {
      height: "100%",
      width: "100%",
      margin: {
        top: 20,
        right: 30,
        bottom: 30,
        left: 50
      }
    },
    title: {
      text: ""
    },
    subtitle: {
      text: ""
    },
    legend: {
      layout: "vertical",
      verticalAlign: "right",
      align: "right",
      borderWidth: 0
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%m-%d'
      },
      tickInterval: 24 * 3600 * 1000
    },
    yAxis: {
      title: {
        text: 'Value'
      },
      lineWidth: 1,
      min: 0,
      minorGridLineWidth: 0,
      gridLineWidth: 0,
      alternateGridColor: null
    },
    tooltip: {
      valueSuffix: " "
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        },
        stickyTracking: {
          enabled: false
        }
      },
      line: {
        lineWidth: 2,
        states: {
          hover: {
            lineWidth: 3
          }
        },
        marker: {
          enabled: false
        }
      }
    },
    series: [
      {
        name: data[0].Name,
        data: seriesData[0]
      }, {
        name: data[1].Name,
        data: seriesData[1]
      }, {
        name: data[2].Name,
        data: seriesData[2]
      }, {
        name: data[3].Name,
        data: seriesData[3]
      }, {
        name: data[4].Name,
        data: seriesData[4]
      }, {
        name: data[5].Name,
        data: seriesData[5]
      }
    ],
    navigation: {
      menuItemStyle: {
        fontSize: "10px"
      }
    }
  });
});

Upvotes: 0

Views: 2311

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can also use labelFormatter and http://api.highcharts.com/highcharts#xAxis.labels.formatter and check if labels isFirst or isLast then use your dates, in other cases return proper value (like number).

Upvotes: 0

Andrey Nelubin
Andrey Nelubin

Reputation: 3294

I'm not sure, but i think you just need to update your xAxis by update method

this.xAxis[0].update({
    title: {
        text: "start-date = '10.02.2013'  end-date = '10.05.2013'",
        style: {
            fontSize: '10px'
        }
    }
});

Here's example: http://jsfiddle.net/FEwKX/

But! If your mean that the start and end dates need to tie to edges, you must specify xAxis settings in config

xAxis: {
    categories: categoriesArray 
}

where categoriesArray is array like this:

['10.02.2013', '', '', '', '', '', '', '', '', '', '', '10.05.2013']

It should be the same lenght as your lenght of series data. Check out here: http://jsfiddle.net/FEwKX/1/

Hope that'll help you.

Upvotes: 0

wergeld
wergeld

Reputation: 14452

Yes, this is possible with the renderer method. See this basic example.

chart.renderer.text('10.02.2013', 0, 300)
            .attr({
                rotation: 0
            })
            .css({
                color: '#4572A7',
                fontSize: '16px'
            })
            .add();

You are going to need to pay attention to the x/y locations (the 2 other params) to place it correctly. You can also modify the text styling.

Upvotes: 1

Related Questions