[OutSystems Charts] How to show values on Timeline
outsystems-charts
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive

Hello,

I am trying to use the New Charts V3 to display multiple samples of data in a line graph. 


However, each sample maybe done at different times of the month, or multiple times one month, or might not be done for several months. 

See below: 


On this graph there are 4 points, the first 3 are ~2weeks apart but the 4th is 4 weeks after the 3rd. 

Is there a way to show this to scale of the timeline it happens over? 

Thanks

Chris

Hii @Christopher Robin-Kennedy,

you can not directly show values on line by making any kind of property enable/disable but this thing can be achieved in outsystems although it is little bit complex to achieve.

I have used javascript to draw the chart on canvas tag.

Step 1: 

Drag a container on screen Name it chartContainer (this ID is used in JS)


step 2 : now you need a canvas tag to show the chart over the canvas.

for that I have used Html container. 


now Drag HTML container inside the chartContainer.

Step 3: Open the HTML container and put canvas container with ID lineChart 

"<canvas id=""lineChart""></canvas>"


Step 4: define some css for chartContainer Id 


#chartContainer {  position: relative; border: 1px solid #ccc; }

define one more class in CSS 

  .data-point {            

position: absolute;

background-color: #3498db;

color: #fff;

padding: 5px;

border-radius: 5px; 

font-size: 12px;   

 }

Step 5: 

now on onafter fetch on you aggregate or dataaction by which you are fetching your data of chart 

you need to create datapoints to show a chart

like this 

[{"x":"0","y":"30"},{"x":"100","y":"50"},{"x":"150","y":"120"},{"x":"50","y":"80"}];


I have created this by the string concatination inside the loop into a local text variable and then i have passed it to JS 

the you have to convert it to json format by JSON.parse() method 


--------------JS code---------------------------------------------

setTimeout(function(){    

            // Sample data (replace with your data)

            console.log($parameters.DataPoints);

            // var dataPoints = $public.BuiltinFunctions.toObject($parameters.DataPoints);

            var dataPoints = JSON.parse($parameters.DataPoints);

            var canvas = document.getElementById('lineChart');

            var ctx = canvas.getContext('2d');


            // Draw the line

            ctx.beginPath();

            ctx.moveTo(dataPoints[0].x, dataPoints[0].y);

            for (var i = 1; i < dataPoints.length; i++) {

                ctx.lineTo(dataPoints[i].x, dataPoints[i].y);

            }


            ctx.stroke();


            //Display values along the line

            dataPoints.forEach(function(point) {

                var div = document.createElement('div');

                div.className = 'data-point';

                div.style.left = point.x + 'px';

                div.style.top = point.y - 20 + 'px'; // Adjust the vertical position


                div.textContent = point.y;


                document.getElementById('chartContainer').appendChild(div);

            });


        

},3000)

------------------------------------------------------------------------

I have called above js after 3 seconds of onafterfetch call so DOM can proper ready until.

result :


Sorry for my bad explanation. for your help I am also attaching OML file.


kind regards,

Sanjay Kushwah


ChartwithValueontimelineinLineChart.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.