Jump to content

charts header customization

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

form[action*='[@cbAppKey]'] table[data-cb-name="cbTable"] {



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. 

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...