Ok @Max_Saravia Thought id load up my old test file and recreate for you, as it wasn’t this hard by memory
So after playing around a bit, i found the easiest way, without needing to use keys
or groupBy
was to change your query to match what Apexcharts calls a Paired Value:
From their website:
series: [{
data: [{
x: 'Apple',
y: 54
}, {
x: 'Orange',
y: 66
}],
}],
xaxis: {
type: 'category'
}
So in this example, it is expecting you to parse in the X and Y values in the same query, in our case using dmxparse(serverconnect1.data.query1)
This is as easy as using the alias x
and y
when you create your query, like this:
Then, in the chart.js
where you have your charts code, you simple use dmx.parse('serverconnect1.data.query1')
This is my code in my chart.js file:
var options = {
chart: {
type: "bar",
fontFamily: 'Open sans',
animations: {
enabled: true,
easing: 'easeinout',
speed: 300,
animateGradually: {
enabled: true,
speed: 100
},
dynamicAnimation: {
enabled: false,
speed: 300
} }
},
stroke: {
show: true,
curve: 'smooth',
width: 3
},
dataLabels: {
enabled: false
},
series: [{
name: 'calls',
data: []
}],
xaxis: {
type: 'datetime',
labels: {
datetimeFormatter: {
year: 'yyyy',
month: 'MMM \'yy',
day: 'd MMM',
hour: 'HH:mm'
}
}
},
yaxis: {
forceNiceScale: true,
min: 0,
showForNullSeries: false
},
noData: {
text: 'Loading...'
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
function chartUpdate() {
chart.updateSeries(
[{
name: 'calls',
data: dmx.parse('serverconnect1.data.query1')
}]
)
};
And then on my page, i call the function i created called chartUpdate
when the server connect file loads/success
<dmx-serverconnect id="serverconnect1" url="api/testing/chart" dmx-on:success="run({runJS:{function:'chartUpdate'}})">
</dmx-serverconnect>
That’s it. Nothing else special in the query or in dmxparse. Plain query with dates on one axis and then values on the y axis.
end result:
Hope this helps!