Hello Team,
I am creating one line chart by using the fiddle block in HighChart Component. It was runs smoothly when the data got pass statically in Javascript. But In my case I want to send the data from different aggregates for different lines. I want to pass the calculated attributes from the agregates. I am unable to understand how the data should be pass to the Javascript Parameter. *I am using traditional web.
Here is the Javascript I am passing.
"$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Inspections',
x: -20 //center
},
xAxis: {
text: 'Months'
categories: ['Jun,Jul,Aug,Sept,Oct,Nov']
yAxis: {
text: 'Inspections'
plotLines: [{
value: 100,
width: 1,
color: '#21130d'
}]
tooltip: {
valueSuffix: ''
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
series: [
{
name: 'Assigned',
data: [13, 17, 28, 14, 25, 45]
name: 'In Progress',
data: [1, 3, 7, 3, 5, 14]
name: 'Overdue',
data: [ 1, 0, 1, 1,1,1 ]
]
});
});"
Hi @Rupesh Wani ,
we need some more to be able to help :
- is there a reason you are making your own jsfiddle copy, why not just use line chart from OS. Using the standard OS chart with some custom json added is FAR easier to pass application data to
- if you indeed really need to brew your own, your challenge is how to mix your application data into the json. For us to be able to help easily, please share an oml with this chart already working with the hardcoded datapoints, and a list of your application data already retrieved (from aggregate ? api ?)
Dorine
Hi Dorine Boudry,
Thank you so much for reaching out for help.
1) I am using the web-block provided by the HighCharts.com
I have tried using the OS Charts. But I want to achieve the use case where I have to show different lines for different records. And I am not able to adding multiple data series to the line chart. I am not getting those things.
Thanks
Rupesh Wani
Hi Rupesh,
I'm attaching a sample OML file which users original highcharts library from their CDN, not the one provided by Outsystems. I've used your own javascript in my code, so it comes easy for you to understand and modify.
This is for illustrative purpose only, so you can see how you can integration your own data and javascript with Outsystems. I would recommend using Outsystems standard feature for generating Charts.
Such customizations might be required where non-Outsystems supported features from Highcharts are required to be used.
Thanks Ravi,
The solution is quite good. I have 2 doubts.
1) from where you are sending the data to the datapoints for categories.
2) If I want to provide a data from an aggregate as a calculated attribute, How can I do that?
Sharing the sample OML for Reference. Not sure what to pass to the Web-Block. In order to pass the data from aggregates.
In the OML file I shared, a static data was provided as you shared in your query.
I'm attaching another version where the data is although static, but is passed as a paramter from the screen's Preparation action. This consists of categories data and series data. These 2 parameters are coming from screen variables and their values are assigned in preparation before setting the ChartScript.
Now your challenge would be to replace static data in string format with the dynamic data coming in from your aggregate. It shouldn't be too dificult.
Here are few steps for it:
Sure Ravi,