Search code examples
javascriptjqueryflotflot.tooltip

Returning Month and Year from Month Variable and Month-Year Range

I'm using jQuery Flot Chart and trying to configure my tool tips per my liking.

The chart I am creating is a stacked chart and has two overlaying charts with 12 points or markers on each line graph.

Each point indicates a month going back a year for each graph.

enter image description here

Probably easier to describe in picture. As noted in the legend light Blue is the previous 12 months, where as Yellow is the 12 months before that.

Anyways, I am initiating my own custom variable yearrange in the plot instance like so

$.plot($(".flot-line"), [{
            label: "Previous Year",
            yearrange: "Jul-2017 - Jun-2018",
            data: previousyear,
            color: "rgb(237,194,64)"
        }, {
            label: "Current Year",
            yearrange: "Jul-2018 - Jun-2019",
            data: currentyear,
            color: "rgb(175,216,248)"
        }]

And then using this tooltip function to overlay a tooltip on each point

$.fn.UseTooltip = function () {
    $(this).bind("plothover", function (event, pos, item) {                         
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();

                var x = item.datapoint[0];
                var y = item.datapoint[1];                

                var currmonth = months[x-  1];
                var yearrange = item.series.yearrange;

                showTooltip(item.pageX, item.pageY,
                  "<strong> " + y + "</strong> (" + item.series.label + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

So--

I have two variables that I'm looking manipulate within this tooltip function to give me a desired output.

var currmonth = months[x-  1];

Which outputs the X-Axis label over which I am hovering (for example, Nov)

var yearrange = item.series.yearrange;

Which outputs from my custom variable insertion in flot (for example, Jul-2017 - Jun-2018)

Likewise, for example, on Current Year, var currmonth = Jul and var yearrange = Jul-2018 - Jun-2019

My question is how can I create a variable outputs the only Month & Year combination possible given the variables I'm working with.

Say my two variables are Nov and Jul-2017 - Jun-2018. The output I'm looking to get is the only November that is possible within those month ranges -- November 2017.

Likewise if I have something for the first year in the current month, variable Jul and variable Jul-2018 - Jun-2019-- the only July that will fit in this span would be an output of July 2018.

Solution

  • You can start with this - I updated it so you do not have to use moment.js to get the full monthname:

    const months = ",January,February,March,April,May,June,July,August,September,October,November,December".split(",")
const monthArr = months.map((month) => month.substring(0,3));
const pad = (num) => ("0"+num).slice(-2);

let getMonthYear = (curMonth,range) => {
  // Note: all string manipulation
  const curMonthStr = pad(monthArr.indexOf(curMonth));
  const [start,end] = range.split(" - ").map(
    d => d.replace(/(\w+)-(\d+)/,(m,a,b) => b+pad(monthArr.indexOf(a)))
  );
  const curYearMonthStart = start.slice(0,-2)+curMonthStr;
  const curYearMonthEnd   = end.slice(0,  -2)+curMonthStr;
  let curYearMonth        = curYearMonthStart;
  if (curYearMonth<start) curYearMonth = curYearMonthEnd; // which one do we take?
  return curYearMonth >= start && curYearMonth <=end ? months[monthArr.indexOf(curMonth)] + " " + curYearMonth.slice(0,-2) : "";
}

const range = "Jun-2018 - Jun-2019";

let curMonth = "Nov";
console.log(
  getMonthYear(curMonth,range)
)  
curMonth = "Jul";
console.log(
  getMonthYear(curMonth,range)
)