Input field in highcharts graphic

Question

I have a Highcharts graphic http://jsfiddle.net/jerryvermanen/XRjyc/, but I would like to add an input field. The input field asks for a year. After input:

• The graphic should add one year to the input year (so 1992 becomes 1993).
• The graphic should display a vertical plot line on the input year + 1 (so a line on 1993).
• It should also add a line on five years after that (1998), and five years after that (2003), and so on.
• It should also take the percentage of those years (1993, 1998, 2003, 2008, 2013) and add them into a text. Like, 'You pay X%, Y%, Z%, etc.'

• To make things a little more complicated, for the input years 1992 (4,94%), 1993 (3,74%), 1994 (4,77%), 1996 (4,52%), 1997 (4,94%), 1998 (3,74%) and 1999 (4,77%), the percentages between () should be added on the date 3-1-2001.

  chart = new Highcharts.Chart({
      exporting: {
      enabled: false
      },
      chart: {
          renderTo: 'container',
          type: 'spline',
          marginRight: 20
      },
      title: {
          text: 'Rente DUO'
      },
      subtitle: {
          text: ''
      },
      xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: { // don't display the dummy year
              month: '%Y',
              year: '%Y'
          }
      },
      yAxis: {
  min:0,
          title: {
              text: 'Werkloosheid (%)'
          },
  
                       plotLines: [{
              value: 0,
              width: 2,
              color: '#000000',
              zIndex: 5
          },            {
              label: {
      text: 'Rente DUO',
      align: 'right'
      },
      value: 5,
              width: 0.5,
              color: '#ffffff',
              zIndex: 1
          }]
      },
      tooltip: {
          formatter: function() {
                  return '<b>'+ this.series.name +'<br/>'+
                  Highcharts.dateFormat('%b %Y', this.x) +':</b> '+ this.y +'%';
          }
      },
  
       plotOptions: {
      spline: {
          lineWidth: 3,
          states: {
              hover: {
                  lineWidth: 4
              }
          },
          marker: {
              enabled: false,
              states: {
                  hover: {
                      enabled: true,
                      symbol: 'circle',
                      radius: 4,
                      lineWidth: 1
                  }
              }
          }
      }
  },
             legend: {
  enabled: false
  },
  

​

If this is complicated, it could also be done by drawing a new graph after entering a year. This graph would be a step line graph with the same data.

How can this be made?

Answer 1

Interesting requirements and I think I have all of them except for the fifth one. To do this is fairly easy. You need plotLines, input form, and another <div> element.

First you need to pull your year from the input form and add 1 year to it (not sure why +1 but here you go):

passedYear = parseInt($('input:text').val(), 10) + 1;

Then you need to convert this human readable year to a javascript time stamp:

showYear = Date.UTC(passedYear, 0, 1);

From here you also need to take into account if the user inputs a value higher than the max year of the data (and also less than the minimum). Here is how to test for the greater than scenario:

var extremes = chart.xAxis[0].getExtremes();
var maxYear;
maxYear = extremes.dataMax;
if (maxYear > showYear) {
     do stuff
}

You then create your initial plotLine:

    chart.xAxis[0].addPlotLine({
        value: showYear,
        color: 'red',
        width: 2,
        id: 'plotLine'
    });

Next you wanted to show additional plotLine items at 5-year increments:

var plInterval;
plInterval = 5;
    while (nextPL < maxYear) {
        chart.xAxis[0].addPlotLine({
            value: nextPL,
            color: 'red',
            width: 2,
            id: 'plotLine'
        });
        nextYear = nextYear + plInterval;
        nextPL = Date.UTC(nextYear, 0, 1);
    }

This is to assure that we do not add unnecessary plotLine items out to infinity that will never be shown.

Additional requirement was to show "You pay xxxx" text on the page. For this you need a <div> element (or whatever, up to you) to write to. To get the values there is a great function I pulled from here:

function getYValue(chartObj, seriesIndex, xValue) {
    var yValue = null;
    var points = chartObj.series[seriesIndex].points;
    for (var i = 0; i < points.length; i++) {
        if (points[i].x >= xValue) break;
        yValue = points[i].y;
    }
    return yValue;
}

I use it like:

var yVal1;
yVal1 = getYValue(chart, 0, maxYear);
strInterestPay = strInterestPay + yVal1 + '%, ';

I then write this strInterestPay to the <div>:

$("div:interest").html(strInterestPay);

Now, we need to write out the percentages for the additional plotLine items:

yVal1 = getYValue(chart, 0, nextPL);
strInterestPay = ', ' + yVal1 + '%';
$('.content').append(strInterestPay);

DEMO