Jump to content

Question

1 answer to this question

Recommended Posts

  • 0

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.

joxi_screenshot_1563196167867.thumb.png.f87a6d681e3d5e8c9075dc8a9c095867.png
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

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.

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

Loading...
×
×
  • Create New...