CumulusUtils UserReports how to use highcharts

lse-cumulus · Post by **lse-cumulus** » Sun 28 Apr 2024 6:52 am

Hi Hans,
I started experimenting with highcharts and wanted to include them in a CURPT user report.
Based on your wiki I understand that highcharts (and other) java script libraries are already available in the CURPT framework, so I would not even need to include them via <script src= ...> in my CURPT.txt file.

But I do not succeed to get the highcharts chart displayed in the report panel of CU, regardless if I keep my CURTP.txt plain or add further html tags like <head>, <body>, <script>, ...
But if I change the file extension to .htm and call the page directly, hightcharts is working fine.

So I went back to a simple first highcharts example without any webtags and try to get it working:

CURPTTrends.txt is not working when activated as .txt file wihtin CURPT framwork (via CUsermenue -> UserReport -> Trends Highcharts)

test.Trends.htm is the slightly adapted version based on the .txt file and works fine when called as html page

Trends.htm is what I really have in mind and want to use as CURPT. I got it working by processing the webtags via CMX and uploading as htm file via CMX extra webfiles and calling it via iframe (via CUsermenue -> UserReport -> Trends Chart, see screenshot
screenshot.UserReports.jpg
)

How do i have to call highcharts in my CURTP.txt file to display charts without using a workarround via .htm extension and CMX?
Thx
leo

lse-cumulus · Post by **lse-cumulus** » Sun 28 Apr 2024 11:33 am

hi Hans,
I figured it out: when activating highcharts not via DOM (document.addEventListener('DOMContentLoaded', function () {...});) or Jquery ($('#container').highcharts({...});) but in the following way, the highcharts are displayed correctly in a CURPT framework and even get a nice CU standard border and info-menue:

Code: Select all

<div id="container" style="width:`100%; height:60vh;"></div>
<script>
Highcharts.chart('container', {
	chart: { ... }, 
	... 
});
</script>

screenshot.UserReports.fixed.jpg

I have now all the tools with CURPT, mySQL and highcharts handy and should now be able to produce my own charts based on my PWS data ... (as a project for the next weekends)

HansR · Post by **HansR** » Sat 04 May 2024 3:14 pm

Hi Leo,

I have been out some time and now checking back.

Do I understand correctly you solved this and you can do what you want but abandoned it in your website?
I think the CURPT was not designed to contain charts but the way you do it probably is possible.

lse-cumulus · Post by **lse-cumulus** » Sun 05 May 2024 1:26 pm

Hi Hans,
i can now work with highcharts out of CURPT, but I only made a couple of charts via CURPT.txt files (that use data from webtags or hardcoded data).
I created more highcharts out of php scripts that load data from mySQL and just use CUsermenue.txt and LoadUtilsReport to activate them.

Code: Select all

<li class='nav-item dropdown'>
 <a class='nav-link dropdown-toggle' href='#' id='navbarDropdown' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
    HighCharts
  </a>
  <ul class='dropdown-menu' aria-labelledby='navbarDropdown'>
    <li class='nav-link' onclick="LoadUtilsReport('Trends.Chart.txt');">7Day Trend (15min)</li>
    <li class='nav-link' onclick="LoadUtilsReport('Trends.txt');">7Day Trend (1h)</li>
    <li class='nav-link' onclick="LoadUtilsReport('highchartsMonthlyDayTemp.
    php');">Temp Class</li>
    <li class='nav-link' onclick="LoadUtilsReport('highchartsYearlyClimate.php');">Yearly Climate</li>
    <li class='nav-link' onclick="LoadUtilsReport('highchartsYearlyRain.php');">Yearly Rain</li>
   </ul>
</li>

The only issue I have is to get rid of the F12 error message Uncaught Error: Highcharts error #16:
This is caused becuase I include the highcharts scripts in my own PHP scripts, and CURPT is doing that also already. Bu that way I can run my php scripts via CU menue and also standalone (especially for debugging).

Code: Select all

<head>
<script src='https://code.highcharts.com/stock/highstock.js'></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>

Here some examples of my highchart scripts via direct link (some I based on your CU Rain Graphs and Temp Graphs design inspirations). Some I re-created based on my Excel Archive reports https://leonas.ddns.net/archive.htm to avoid a manual re-generation each month and use now CMX mySQL data).

https://leonas.ddns.net/Wetterstation. ... Rain.php
https://leonas.ddns.net/Wetterstation. ... imate.php
https://leonas.ddns.net/Wetterstation. ... yTemp.php

One of my next projects will be to convert more of my archived xls data from pre-CMX/CU years into CMX/CU via CreateMissing.exe ...

HansR · Post by **HansR** » Sun 05 May 2024 1:51 pm

lse-cumulus wrote: ↑Sun 05 May 2024 1:26 pm i can now work with highcharts out of CURPT, but I only made a couple of charts via CURPT.txt files (that use data from webtags or hardcoded data).
I created more highcharts out of php scripts that load data from mySQL and just use CUsermenue.txt and LoadUtilsReport to activate them.
[...]

You are really going beyond what I intended with CUtils but it's nice to see such exposé of the technical possibilities and combination of techniques

Nicely done

I have the intention - for next winter - to remove the necessity for MySQL and create access to the historical series for all values in the text databases (and probably also of the webtags) for the use of UserReports.

HansR · Post by **HansR** » Mon 06 May 2024 6:53 am

lse-cumulus wrote: ↑Sun 05 May 2024 1:26 pm The only issue I have is to get rid of the F12 error message Uncaught Error: Highcharts error #16:
This is caused becuase I include the highcharts scripts in my own PHP scripts, and CURPT is doing that also already. Bu that way I can run my php scripts via CU menue and also standalone (especially for debugging).

See the Wiki for the Javascript libraries.
The library inclusion is a choice to be made by you and it is on the level of the website generator, not on the level of the UserReports. So as long as you are using the website generator as the basis for what you are doing, just remove the HighCharts library references from your PHP procedures. That should remove the error 16.

lse-cumulus · Post by **lse-cumulus** » Thu 09 May 2024 9:13 am

Hi Hans
thx for the hint with the ini file input paramter DoLibraryIncludes of the websitegenerator to adapt the JavaScript library include behaviour (as writing now my owhn JS code, I understand now what they are intended for ...). I have the ini file paramter set to TRUE and not yet removed the JS libraries from my PHP script, because ...

A ran into a minor issue: it seems that in the CUReportView the following options/modules from highcharts do not work:

options3d - code.highcharts.com/highcharts-3d.js - shows no effect

drilldown - code.highcharts.com/modules/drilldown.js - does not show the drilldown links

patternIndex - code.highcharts.com/modules/pattern-fill.js - does sporadically not work, could be race condition of data/script loading

Even if I include these JS libraries in my own php file the drilldown and 3D do not work when loading my php script into the CUReportView via LoadUtilsReport.

But it does work fine, when loading a .txt file with an iframe and referring to my php script from there, or calling the php file outside from CU via browser and direct link.
https://leonas.ddns.net/Wetterstation.S ... lyRain.php

Code: Select all

Cusermenue.txt:
(1) working
<li class='nav-link' onclick="LoadUtilsReport('highchartsYearlyRain.txt');">Yearly Rain</li>
(2) not working
<li class='nav-link' onclick="LoadUtilsReport('highchartsYearlyRain.php');">Yearly Rain CU</li>

highchartsYearlyRain.txt:
(1) working
<iframe src="https://leonas.ddns.net/Wetterstation.Suttenbrunn.CumulusMX/highchartsYearlyRain.php" width="100%" frameborder="0" style="border:0;height:75vh;"></iframe>

HansR · Post by **HansR** » Thu 09 May 2024 10:45 am

lse-cumulus wrote: ↑Thu 09 May 2024 9:13 am A ran into a minor issue: it seems that in the CUReportView the following options/modules from highcharts do not work:

Hi Leo,

Highly appreciate the way you are thinking out of the box and really walking uncharted (pun intended) area's here.

But there are some things relevant here:

You are going far beyond how CUtils is built and beyond the libraries which are used. I do not intend to use 3D, drilldown or patternindex in CUtils. CUtils will stick to the chart techniques used by CMX and will not go beyond. As a result I will not give support on these issues: I do not have the time to research new charts or other Highcharts techniques (and they are currently expanding fast).
There seems to be an issue with the licencing of Highcharts which so far does not seem to have been resolved. I know Ken (@SaratogaWX) and Mark (@mcrossley) are looking into this - looking for alternatives - but I have not heard of a solution. It may lead to the use of another charting library / charting system. So be careful with the energy you put into this.
You could experiment with your procedure by e.g. editing the index.html and e.g. remove libraries which may conflict (like e.g. accessibility.js or boost.js) or add only the 3D, drilldown or patternindex to your PHP procedure. This would require you to not newly generate the website while experimenting but it may give you an idea of what is required. Anything you would need to make it work with CUtils I could maybe implement if it would not turn the thing upside down.

NOTE: you may start collaborating CUtils if you wish, if you think expansions are useful. The link to the code is in the release post.

Let me know how you get on and if you need some changes in how CUtils handles the Highcharts libraries without breaking the current context.

lse-cumulus · Post by **lse-cumulus** » Thu 09 May 2024 11:01 am

Hi Hans,
thx for the detailled information. That explains the root cause of my issue. I think I will just stick to my workarround and call any more complex highcharts php scripts via iframe and so separate CU and my JS code and libraries.
Its no big deal (and many roads lead to Rome)

Cumulus Support

CumulusUtils UserReports how to use highcharts

CumulusUtils UserReports how to use highcharts

Re: CumulusUtils UserReports how to use highcharts [RESOLVED]

Re: CumulusUtils UserReports how to use highcharts

Re: CumulusUtils UserReports how to use highcharts [Highcharts error #16 and highcharts samples]

Re: CumulusUtils UserReports how to use highcharts [Highcharts error #16 and highcharts samples]

Re: CumulusUtils UserReports how to use highcharts [Highcharts error #16 and highcharts samples]

Re: CumulusUtils Highcharts drilldown, options3d

Re: CumulusUtils Highcharts drilldown, options3d

Re: CumulusUtils UserReports how to use highcharts