Hi Sharifah,

I'm not sure what are some errors that you got when trying, if possible can you share your .oml. 

However what required steps to add highcharts are:

Step1: Adding required Highcharts scripts as in the example (the Gantt chart): 

highcharts-gantt.js

exporting.js

OR You can import the scripts into Scripts folder

And include it on your screen

Step 2: Run JavaScript on OnReady action. You can get the sample Javascript code to generate highcharts from here

Hope this helps,

Khuong

Hi,

As already correctly stated by Ellakkiya:

The OutSystems charts component uses highcharts to create the charts, so there is no need to load highcharts yourself unless you want a chart type not implemented by OutSystems.

Regards,

Daniel

Hi

I've done what you sugested and i'm getting de error num 17, i've imported a heatmap.js that i think is needed to run this code

My .js file is:

function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}

Highcharts.chart($parameters.ContainerId, {

chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},


title: {
text: 'Sales per employee per weekday'
},

xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},

yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null,
reversed: true
},

accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},

colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},

legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},

tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},

series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}],

responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}

});

Hi Sharifah,

There is a talk presented last week in OSDC about charts. It is very interesting and teaches you how to include custom high-chart and other charts frameworks too.

I strongly recommend you to watch it. Sometimes the options embedded in OutSystems are not enough for our business.

How to Build and Use Custom Charts and Graphs in Reactive Web Applications - NextStep & OSDC

best regards

Fabio