Show Records by Week in Chart

[gregbovenkerk]

I've created a chart that shows the number of records collected by week, but need to be able to change the week number on the axis to "Week of 2/17/20" instead of 8. Thanks in advance for your help.

[Hastur]

Hello @gregbovenkerk!

You may use the JS code to update the chart with custom Values for each week number of the year.
I have found one web site to get the values for each week number - https://www.epochconverter.com/weeks/2020
Obviously, you will need to update the Array of custom values each year, but it works perfectly!

See the example of the code:

<script type="text/javascript">

var myVar = setInterval(myTimer, 1000);

function myTimer() {
 if(Highcharts) {
  const customMonths = [
    'December 30, 2019',
    'January 6, 2020',
    'January 13, 2020',
    'January 20, 2020',
    'January 27, 2020',
    'February 3, 2020',
    'February 10, 2020',
    'February 17, 2020',
    'February 24, 2020',
    'March 2, 2020',
    'March 9, 2020',
    'March 16, 2020',
    'March 23, 2020',
    'March 30, 2020',
    'April 6, 2020',
    'April 13, 2020',
    'April 20, 2020',
    'April 27, 2020',
    'May 4, 2020',
    'May 11, 2020',
    'May 18, 2020',
    'May 25, 2020',
    'June 1, 2020',
    'June 8, 2020',
    'June 15, 2020',
    'June 22, 2020',
    'June 29, 2020',
    'July 6, 2020',
    'July 13, 2020',
    'July 20, 2020',
    'July 27, 2020',
    'August 3, 2020',
    'August 10, 2020',
    'August 17, 2020',
    'August 24, 2020',
    'August 31, 2020',
    'September 7, 2020',
    'September 14, 2020',
    'September 21, 2020',
    'September 28, 2020',
    'October 5, 2020',
    'October 12, 2020',
    'October 19, 2020',
    'October 26, 2020',
    'November 2, 2020',
    'November 9, 2020',
    'November 16, 2020',
    'November 23, 2020',
    'November 30, 2020',
    'December 7, 2020',
    'December 14, 2020',
    'December 21, 2020',
    'December 28, 2020'
  ];

   Highcharts.charts[0].update({
     xAxis: {
       categories: customMonths
     }
   }); 

  myStopFunction();
 }
 return null;
}

function myStopFunction() {
  clearInterval(myVar);
}

</script>

You should insert this code into the header of the Chart page. Do not forget to disable the HTML editor before you insert the code!

[futurist]

On 3/5/2020 at 3:05 AM, Hastur said:

Hello @gregbovenkerk!

You may use the JS code to update the chart with custom Values for each week number of the year.
I have found one web site to get the values for each week number - https://www.epochconverter.com/weeks/2020
Obviously, you will need to update the Array of custom values each year, but it works perfectly!

See the example of the code:

<script type="text/javascript">

var myVar = setInterval(myTimer, 1000);

function myTimer() {
 if(Highcharts) {
  const customMonths = [
    'December 30, 2019',
    'January 6, 2020',
    'January 13, 2020',
    'January 20, 2020',
    'January 27, 2020',
    'February 3, 2020',
    'February 10, 2020',
    'February 17, 2020',
    'February 24, 2020',
    'March 2, 2020',
    'March 9, 2020',
    'March 16, 2020',
    'March 23, 2020',
    'March 30, 2020',
    'April 6, 2020',
    'April 13, 2020',
    'April 20, 2020',
    'April 27, 2020',
    'May 4, 2020',
    'May 11, 2020',
    'May 18, 2020',
    'May 25, 2020',
    'June 1, 2020',
    'June 8, 2020',
    'June 15, 2020',
    'June 22, 2020',
    'June 29, 2020',
    'July 6, 2020',
    'July 13, 2020',
    'July 20, 2020',
    'July 27, 2020',
    'August 3, 2020',
    'August 10, 2020',
    'August 17, 2020',
    'August 24, 2020',
    'August 31, 2020',
    'September 7, 2020',
    'September 14, 2020',
    'September 21, 2020',
    'September 28, 2020',
    'October 5, 2020',
    'October 12, 2020',
    'October 19, 2020',
    'October 26, 2020',
    'November 2, 2020',
    'November 9, 2020',
    'November 16, 2020',
    'November 23, 2020',
    'November 30, 2020',
    'December 7, 2020',
    'December 14, 2020',
    'December 21, 2020',
    'December 28, 2020'
  ];

   Highcharts.charts[0].update({
     xAxis: {
       categories: customMonths
     }
   }); 

  myStopFunction();
 }
 return null;
}

function myStopFunction() {
  clearInterval(myVar);
}

</script>

You should insert this code into the header of the Chart page. Do not forget to disable the HTML editor before you insert the code!

Hi, sharing in here a script that I found that allows you to check if an element exists (followed by your code if that element in fact exists) instead of using a timer (setInterval):

 

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

 

 

 

 

To use it:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});