Chartjs doesn't work on HTTPS

[hassan-alhussaini]

ChartJS only loads from model when using HTTP instead of HTTPS. If I push the code to the server. I have both production and local applications on that server. It appears blank in both. Though in developer tools I see that it is blocked because it is doing the request as HTTP.

I realise this because if I intentionally miss-type the model route on localhost it would produce an error. On the server it won't show any error. It just appears blank.

           (new StackedChart())
            ->title('Totalbeds')
            ->model('\App\Model\Hotel\Room') // Use Your Model Here
            ->series(array([
                'label' => 'Location 1',
                'filter' => [
                    'key' => 'id', // State Column for Count Calculation Here
                    'value' => '1'
            ],
            ]
            ))
            ->options([
                'sum' => 'totalbeds' // Add the column you want to calculate
            ])
            ->width('2/3'),

I think the issue is over HTTPS

Mixed Content: The page at [URL] was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://url.com/coroowicaksono/check-data/endpoint?model=%5CApp%5CModel%5CMaintenance%5CRoom&series[]=%7B%22label%22:%22location1+Camp%22,%22filter%22:%7B%22key%22:%22location_id%22,%22value%22:%221%22%7D%7D&series[]=%7B%22label%22:%22location2+Camp%22,%22filter%22:%7B%22key%22:%22location_id%22,%22value%22:%222%22%7D,%22sweetAlert2%22:%7B%22linkTo%22:%22https:%2F%2Fwww.google.com%22%7D%7D&options=%7B%22sum%22:%22available%22,%22btnRefresh%22:true,%22xaxis%22:%7B%22locations%22:[%22location1+Camp%22,%22location2+Camp%22]%7D,%22sweetAlert2%22:%7B%22linkTo%22:%22https:%2F%2Fwww.url.com%2Fportal%2Fresources%2Frooms%22%7D%7D&expires=0'. This request has been blocked; the content must be served over HTTPS.

[coroo]

Hi @hassan-alhussaini , Actually we already test and use the nova-chartjs in local, staging and production environment and working fine over http or https.

Also, if you want to test using https in local environment, you can use laravel valet secure to make sure that nova-chartjs can run in https.

For production, can you try to reinstall again the nova using composer in your production environment?

[hassan-alhussaini]

I have pushed a new fresh installation on the server, I used Lets Encrypt and Enabled Force HTTPS. It only has Users and I just added a basic polarAreaChart to count how many users. It still doesn't work for HTTPS for me. I am trying to figure out if I missed something, that is why I just did a complete fresh install and I am having the same issue. I am using cloudways so I am unsure if it could be server configuration as well.

[coroo]

Can you share screenshot of your console (inspect element-> console tab) ? Just want to check if there is any errror related

[hassan-alhussaini]

This is the website uploaded only for testing. You can see for yourself. I put the chart in the main dashboard so basically once logged in the error would appear. Test Website Telescope is installed as well. username:[email protected] password:cloudways

[coroo]

Hi @hassan-alhussaini ,

Thank you for sharing. I think the error caused by install another nova-chart as stated here:

Can you please uninstall / remove nova-apex-chart from your composer first and do composer update again ?

[hassan-alhussaini]

• Composer remove digital-creative/nova-apex-chart

• Composer update

• Composer config:cache

• Manually empty bootstrap\cache

• Composer remove coroowicaksono/chart-js-integration

• Composer update

• Composer require coroowicaksono/chart-js-integration

• Composer update

I found this /vendor/coroowicaksono/chart-js-integration/dist/js/nova-apex-chart.js

[coroo]

Hi @hassan-alhussaini ,

Actually I have try to do some research in your server. But unfortunately, I can't get a way to solve your problem. This issue is almost same with https://github.com/laravel/nova-issues/issues/231. It should be automatically handle for using http or https in laravel, but this seems that your app in your server doesn't want to post into https.

If you want to, you can change this line of code https://github.com/coroo/nova-chartjs/blob/master/resources/js/components/PolarAreaChart.vue#L207 with hardcoded one (add your domain with https:// statement).

Again, sorry for the inconvenience

[hassan-alhussaini]

Hi, thank you for sharing that other issue, I have changed that file Nova.request().get("https://phplaravel-368017-1465639.cloudwaysapps.com/coroowicaksono/check-data/circle-endpoint/", { Also tried protected $proxies = '*'; It seems like even with a fresh install its still an issue and hard to investigate the issue. I will keep looking for some way to figure out the issue. Thank you

[coroo]

Hi @hassan-alhussaini ,

since what you already change (nova.request()) in vuejs. Dont forget to:

cd vendor/coroowicaksono/chart-js-integration
npm install
npm run prod

[VKuksovskii]

I've found the solution https://github.com/axios/axios/issues/1267#issuecomment-355838164 Pls fix it asap

[karaOdin]

Hi, thank you for sharing that other issue, I have changed that file Nova.request().get("https://phplaravel-368017-1465639.cloudwaysapps.com/coroowicaksono/check-data/circle-endpoint/", { Also tried protected $proxies = '*'; It seems like even with a fresh install its still an issue and hard to investigate the issue. I will keep looking for some way to figure out the issue. Thank you

hello did you found a solution of this issue because i got the same issue