charts header customization

[sfa71]

looking for example of how I might customize a header in a charts datapage to display data from a different table based on elements in the chart data

[CoopperBackpack]

Hello @sfa71,

In the Chart DataPage, there are no elements to retrieve data from a different table. So, the workaround is to use a Combined Chart and Report DataPage. 

On the Report you can use the Calculated Field, for example, to retrieve data. Then the Report can be hidden by CSS. The retrieved value can be placed in the Header by JavaScript.

If you need further assistance with this use case, I need to understand more details about it.

[sfa71]

This makes a lot of sense thanks - I am not very experienced with javascript = can you point me to a resource where I could see an example of the header javascript that could lookup data in a caspio table?  I pass a parameter into the chart that selects the record to display.  The record for display of the values carries the id for a user name and a second id for the project.  I want to lookup the user name and the project name form their respective tables to display in the header of the chart.

[CoopperBackpack]

Hello @sfa71,

As far as I understood, there are tables that store unique users and unique projects. And the Chart is built based on the table linked with the relationships with the users and projects tables.

For example:

On the Chart DataPage you receive IDs as parameters:

If all of the above are correct, please check the following steps. Upon checking, the JavaScript is not needed.

1) Create the Combined Chart and Report DataPage.

2) On the Results page add two Calculated Fields to retrieve the project name and the user name from the corresponding tables.

For example:

SELECT Full_Name FROM tbl_Users_ WHERE User_ID = '[@User_ID]'

SELECT Project_name FROM tbl_Projects WHERE Project_ID = '[@Project_ID]'

'[@User_ID]' and '[@Project_ID]' are the names of the received parameters. 

Please use the names of the tables and fields from your tables.

3) In the Header you will be able to add the values retrieved in the Calculated Fields

4) In the Header click the 'Source' button and add this CSS code at the very top. This is to hide the Report. 

<style>
form[action*='[@cbAppKey]'] table[data-cb-name="cbTable"] {
  display:none;
 }
</style>

 

5) Here is the output example. As a last step, to hide the 'Record Count', go to the 'Results Page Options' > Advanced tab > check the 'Hide record count' checkbox.

Feel free to update this thread if you have any further questions. 

[sfa71]

On 2/9/2024 at 4:13 AM, CoopperBackpack said:

<style>
form[action*='[@cbAppKey]'] table[data-cb-name="cbTable"] {
  display:none;
 }
</style>

 

[sfa71]

Works perfectly

ProFor_Basic_Items Chart(1).pdf