Stock High Charts with Custom points on X-axis

Question

I have a requirement where i have to show custom points on x-axis instead of dates values. Also same custom data points needs to be shown on navigator as well. In the below Js fiddle, i am converting data (Per13/2016 etc) into equivalent date values and then binding the chart using converted date values. Below is the link of the JS fiddle:- Fiddle link

In the Js fiddle, i am showing Per1,Per2 etc.on x-axis and same has to be shown on navigator as well. Now i am facing problem with the navigator,when i changes the range using slider ,the x-axis labels changes but not according to the range selected.Also tool-tip formatting is getting changed.

Can you please let me know how to handle this scenario and best way to do the same.

        //few code lines to post fiddle link   
          xAxis: {
                    labels: {
                        formatter: function () {
                            if(fiscal13){
                            var perDate = new Date(this.value);
                            return 'Per' + (perDate.getMonth() + 1);
                            }

              }
                    }
                }

Add this > var s = Highcharts.dateFormat('%e %b %Y', new Date(this.x)); for tooltip , I'll update solution for nagitor as well jsfiddle.net/Nishith/qneuh4Ld/1 — Nishith Kant Chaturvedi
I need to show Per 1, Per 2 etc along with cost and usage on tool-tip but the problem is when the slider moves tool-tip text changes and data on the chart also not shown as per the range selection. — user3562919

Paweł Fus Paweł Fus · Accepted Answer · 2016-02-09T11:38:03

I am not sure if I am right, but I think you are overdoing this.

Let's keep original data, so remove fiscal13Data.Data.forEach(function(item) { .. }); function. And When creating data, use simply index of the point as x-value:

var cost = [],
  usage = [],
  dataLength = fiscal13Data.Data.length
i = 0;
for (i; i < dataLength; i += 1) {
  // need to sum costs
  cost.push([
    i, // the index
    fiscal13Data.Data[i]['Cost'] // cost
  ]);
  usage.push([
    i, // the index
    fiscal13Data.Data[i]['Usage'] // Usage
  ]);
}

Now you can get to the "Per13/2016" strings in a simple way in xAxis labels' formatters:

var str = fiscal13Data.Data[this.value].Date;

In tooltip formatter, it is almost exactly the same:

var str = fiscal13Data.Data[this.x].Date;

And here is working demo: http://jsfiddle.net/qneuh4Ld/3/

Note: You data looks a bit strange - don't you want to sort it first? Also, you have twice every date (e.g. "Per13/2016" - once for "water" and once for "electric").

Stock High Charts with Custom points on X-axis

1 Answers