Chart Datapage

[Vitalikssssss]

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.

 

Regards,

vitalikssssss

 

[Hastur]

Hello @Vitalikssssss

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

Steps:
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.

Header:

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

<style>
.cbResultSetTableCellNumberDate,
.cbResultSetTotalsDataCellNumberDate  {
text-align: left !important;
}

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

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.
form[action^="Your_Deploy_URL"]

Footer:

<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") {
    myStopFunction(myVar);
    drawChart();
  }
}

function myStopFunction(val) {
  clearInterval(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);
  values.push(+valuesRow[i].innerText);
 }

 for(let i = 0; i < values.length; i++) {
  if(values[i] === 0) {
   continue;
  } 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 
 });
}

});
</script>

 

highcharts.js jquery.js

[Johan]

Where should I put this script . I am no programmer ... In the styles, ... ?