kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi hubert. This is the video that's why I didn't transfer my code to the fiddle.

https://www.loom.com/share/fcea157b7955 ... 5fe49c8375
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

its every time I clicked the rangeSelector my data wont appear. I adjusted the height of the graph I thought it is hiding at the top
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

To solve your problem, I need a live demo to work with on it. The video won't help because I can't copy the code, I can't edit it, and I can't do anything with it. Please copy the code to jsFiddle or another online code editor and share the live demo, otherwise, I won't be able to help you.
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Code: Select all

The specified value "1970-01-01T00:00:00" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS".

Hi hubert. What error is this?
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

everytime I click the graph. rangeSelector, that error appear in my console.
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi Hubert!

Im using this code for my xAxis

Code: Select all

   // X AXIS
    chart.xAxis[0].update(
      {
        categories: sortedCalendar.map((el)=>new Date(el.received_at).getTime()),
        tickInterval: 7, //x axis display
        labels: {
          format: '{value:%b:%e}',
        },
      },
      true
    );
and also this is for my yAxis

Code: Select all

    switch (qcSensorType) {
      case 'humidity':
        chart.series[0].setData(
          sortedData.map((d) => Number(d.hum_rh)),
          true
        );
        break;
      case 'pressure':
        chart.series[0].setData(
          sortedData.map((d) => Number(d.pres_hpa)),
          true
        );
        break;
      case 'temperature':
        chart.series[0].setData(
          sortedData.map((d) => Number(d.temp_c)),
          true
        );
        break;
      default:
        chart.series[0].setData(
          calendarDate.map((el)=>Number (el.distance_m)),
          true
        );
        break;
    }
and this code for the whole graph.

Code: Select all

private _getFloodHeightOtps(): any {
    return {
      chart: {
        type: 'spline'
      },
      subtitle: {
        text: 'Flood Height',
      },
      rangeSelector: {
        inputDateFormat: '%b %e, %Y %H:%M',
        buttons: [{
          type: 'day',
          count: 3,
          text: '3d'
        }, {
          type: 'week',
          count: 1,
          text: '1w'
        }, {
          type: 'month',
          count: 1,
          text: '1m'
        }, {
          type: 'all',
          text: 'All'
        }],
        selected: 3,
        buttonTheme: {
          width: 60,
        },
      },
      yAxis: {
        alignTicks: false,
        tickInterval: 0.5,
        color: '#0C2D48',
        opposite: false,
        plotBands: [
          {
            from: 0,
            to: 0.5,
            color: '',
            label: {
              text: 'Low',
            },
          },
          {
            from: 0.6,
            to: 1.5,
            color: '#6AF2F0',
            label: {
              text: 'Moderate',
              style: {
                color: '#0C2D48',
              },
            },
          },
          {
            from: 1.6,
            to: 15,
            color: '#004369',
            label: {
              text: 'High',
              style: {
                color: '#0C2D48',
              },
            },
          },
          {
            from: 15,
            to: 30,
            color: '#0067B3',
            label: {
              style: {
                color: '#0C2D48',
              },
            },
          },

          {
            from: 30,
            to: 500,
            color: '#0067B3',
            label: {
              style: {
                color: '#0C2D48',
              },
            },
          },
        ],
      },
     
      series: [
        {
          name: 'Flood Height',
          color: '#0C2D48',
          data: [],
          // lineWidth: 1.5,
          // marker: {
          //   enabled: false,
          // },
          // hover: {
          //   lineWidth: 5,
          // },
        },
      ],
    };
  }
the error in my console is

Code: Select all

The specified value "1970-01-01T00:00:00" does not conform to the required format.  The format is "yyyy-MM-ddThh:mm" followed by optional ":ss" or ":ss.SSS"
what should be the problem of this https://drive.google.com/file/d/1INbTMY ... sp=sharing

the value of calendar still not updated.


Regards,
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

kennethic,
Okay, I have prepared an example online demo based on your configuration. Referring to your latest posts about Warning in the console. This problem is not related to Highcharts, but to the browser engine Chromium. Microsoft Edge and Google Chrome are browsers built on the basis of the Chromium engine and this problem exists only on these browsers. I have checked on Safari and there is no problem of that kind. I will make a simple demo and make a bug ticket to Issues in Chromium. I will be back with a link for you to track the progress.

Referring to your earlier posts about the issue with the navigator. I was trying to reproduce your problem, but in my case, everything is working correctly. Maybe you have some errors in your console after the disappearance of the data? The chart configuration looks good and problems of that kind are often related to data.

Demo: https://jsfiddle.net/BlackLabel/q8Ls1o7a/

Kind regards!
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi hubert.

This is the last problem I encountered.
I have a lot of data that's is array and then when I put it in chart only the latest data read in chart and the rest not.

see video link
https://www.loom.com/share/ee75be911dae ... c82433bc3e
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

kennethic,
The problem is caused by your data, which is not sorted. You can see there is a Highcharts Error 15 in the console, which means:
Highcharts expects data to be sorted
This happens when creating a line series or a stock chart where the data is not sorted in ascending X order.

For performance reasons, Highcharts does not sort the data, instead it requires that the implementer pre-sorts the data.
To pass data properly, you have to sort your points by date ascendly.

Regards!
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi hubert.

I already sorted the data but the x value, its back to

Code: Select all

Jan 1,1970
it didn't read the value of data. As you can see in console, there's array and it composed of the value of X and Y

See video below:
https://www.loom.com/share/7b7c733eb4d5 ... e82c4a4e7b

also this is the code for ascending X axis

Code: Select all

   const sortedCalendar = calendarDate.sort((a: any, b: any) => {
      return (
        new Date(a.received_at).getTime() - new Date(b.received_at).getTime()
      )
    })
    const processedData = calendarDate.map((el) => {
      return [
        sortedCalendar
        ,el.distance_m]
    })
    console.log(processedData)
Regards,
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

kennethic,
Are you sure you have sorted your array properly? In my opinion, your logic of sorting in JavaScript is not working. First, you using sort method, which is a destructive method on calendarDate and assigning it to sortedCalendar variable. Next, you are looping through (sorted) calendarDate and returning an array with sortedCalendar and el.distance_m. It looks like this part is not working. Actually, this is not a problem related to Highcharts, but to JavaScript. I would suggest changing the map method to something like this:

Code: Select all

const processedData = calendarDate.map((el) => {
      return [
        el.received_at
        ,el.distance_m]
    })
And also I think, that assigning to sortedCalendar is not necessary.

Regards!
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi hubert.

Thank you so much for your help. It's working properly. :)

Regards!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”