Jump to content
  • 0
Sign in to follow this  

Chart Datapage


Hi there,
How can I create a chart using just values from table fields but not the count/sum functions?
My result set is 1 row and I want to show values on a chart.
If value is blank - I don't want to show it on the chart.
Any help will be appreciated.

Share this post

Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Hello @Vitalikssssss

You can implement such a chart using the Highchart library and Tabular Report Datapage.

1. Create the Tabular Report Datapage based on the table you want to use to draw a chart.
2. Use predefined criteria to find the actual row from the table.
3. Add all the fields you want to draw to ResultSet.
5. Add two APP parameters to your Application. Find the files attached. Name the files in the same way as it is on the screenshot below.

6. Add the following code to Header/Footer of the result set page.


<script src="[@app:JQueryScript/]"></script>
<script src="[@app:HighchartsScript/]"></script>
<div id="container" style="height: 400px"></div>

.cbResultSetTotalsDataCellNumberDate  {
text-align: left !important;

form[action^="https://c1abc032.caspio.com/dp/9a23600092ea09cd1acf435e847b"] {
 display: none;

You should only change the DeployURL in this snippet of code.
Use the Deploy URL of the same Datapage you work on after you create it.


<script type="text/javascript">

document.addEventListener('DataPageReady', function () {

/* ________ Check if Highcharts library is loaded ________ */

var myVar = setInterval(myTimer, 200);

function myTimer() {
  console.log(typeof Highcharts);
  if(typeof Highcharts !== "undefined") {

function myStopFunction(val) {

/* ________ Draw Chart function ________ */

function drawChart() {
 let labelsRow = document.querySelectorAll('.cbResultSetLabelLink');
 let labels = []; 
 let valuesRow = document.querySelectorAll('.cbResultSetTableCellNumberDate');
 let values = []; 

 let resultSet = [];

 for(let i = 0; i < labelsRow.length; i++) {
  labels .push(labelsRow[i].innerText);

 for(let i = 0; i < values.length; i++) {
  if(values[i] === 0) {
  } else {
   resultSet.push({ name: labels[i], data: [ values[i] ] });

 var chart = Highcharts.chart('container', {
    chart: {
        type: 'column'
    title: {
        text: 'Comparosin chart'
    xAxis: {
        labels: {
            enabled: false
    yAxis: {
        min: 0,
        title: {
            text: 'Value'
    credits: {
        enabled: false
    series: resultSet 



highcharts.js jquery.js

Share this post

Link to post
Share on other sites

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.

Answer this question...

×   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.

Sign in to follow this  

  • Create New...