that is what Safari Browser gives me - cannot expand - was after pressing enter
Did with Chrome now and get this back:
Click he little arrow in front of the expression and expand it. You can see your app structure and construct the correct path for your expression.
1 Like
Ok, great. I now replaced the ‘123’ value with results from the server connect query and my data shows.
Data comes back as {year: 2022} {year: 2023} {year: 2024} etc
Graph code needs is this way:
xAxis: {
data: [‘2022’, ‘2023’, ‘2024’, ‘2025’, ‘2026’, ‘2027’]
},
I hope there is a way to prepare it 
Isn’t the values formatter doing the job for you?
serverconnect1.data.query.values(`year`)
1 Like
never knew about that one… BUT now I do!
last one and then I hope I am out of your hair for today. Syntax for now using it with the charts code. I need to use myVar that has all the data in and replace [‘Shirts’, ‘Cardigans’, ‘Chiffons’, ‘Pants’, ‘Heels’, ‘Socks’] in this section:
xAxis: {
data: [‘Shirts’, ‘Cardigans’, ‘Chiffons’, ‘Pants’, ‘Heels’, ‘Socks’]
},
Thanks for your help
I don’t quite understand your question, can you clarify please?
This is the code to add data to echarts:
I want to now use the parsed data in myVar to populate the xAxis of the graph and then other data to populate the y-axis.
Have you already tried using dmx.parse the data there? I thought you were doing this the whole time?
xAxis: {
data: dmx.parse('serverconnect1.data.query.values(`year`)')
},
?
Graph renders but does not resemble the values in the dataset.
You need to initialize the chart after the data has finished loading. So you need to wrap your chart script in a function like:
function chartInit() {
// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));
...
...
...
myChart.setOption(option);
}
and then load it onsuccess of the server connect component on the page…
<dmx-serverconnect id="serverconnect1" url="dmxConnect/api/data/myaction.php" onsuccess="chartInit()"></dmx-serverconnect>
are you sure you have the required skills to use third party script like this and all its option?
What is missing from the charts component in Wappler?
1 Like
Thanks, building my skills as I go along with your help. Was always able to get things done by getting help from you or others.
Cannot format numbers with thousand seperator with Chart.js (Wappler Charts) and also cannot style easily. There are methods to add number formatting that I found in forums, but the way it is implimented in Wappler does not allow that type of customisation.
Let me use your code advise and see if I can get the chart showing. Thanks
I changed the code but it seems to still load the graph without the data…
Attached my page zipped if you can see if you see a problem. Cannot see one.
charts.ejs.zip (1.4 KB)
I also put the chartInit() to run at onclick of the button long after data loaded and it does the same, so it seems to be the parsed data that is the problem and not only when ithe chart is loaded.
Are you 100% sure you want these to be in the xAxis and not yAxis??
Also:
That is already possible:
1 Like
years on the x and amounts on the y, but maybe I should fist checkout the formatters in chart.js
I take it the updated file is already includedin current Wappler version?
I tried applying formatting and graph stopped displaying previously.
yes.
1 Like
Great stuff - missed this when I searched the forum for charts posts.
Is there a way to format the values on the x or y axiz? To add currency formatting there as wel? Or just number formatting at least?
Here’s an updated version of the charts component which allows formatting for the axis labels.
dmxCharts.zip (2.5 KB)
label-x and label-y properties have been added, so you can use them like
label-y="$value.formatCurrency('$', '.', ',', 2)"
1 Like