I am building a mobile app and want to show a line chart from a table with
* user* date* value
so basically I have entries for some dates but not for all.
Now I want to create a line chart with lines for different users. But the requirement is that every date from start to end should be shown regardless if there is a record for a user on that date.
I found this great example which basically does this for a traditionally web app
https://www.outsystems.com/forums/discussion/83913/how-to-use-bar-chart-according-to-start-and-end-date/#
However I cant figure out how to reproduce this in a mobile app. Neither as a bar nore a line chart.
As you can see it only plots individual dates. Even worse. The orange points are at different dates but are shown at the first three dates of the first user.
Where is my mistake? How can I create a date based line chart for my data source?
Thanks. That was an approach I also tried but I guessed there had to be a simpler solution. And there is. Yesterday evening I figured it out and wanted to share my solution today.
For the linechart I just had to set ValueType = Entities.ValuesType.Datetime. See the difference.
Without (second series are put on the wrong dates, no room for empty dates)
With Entities.ValuesType.Datetime:
I also tried the legacy LineChartV1 before. That's a bit odd. Basically it works out of the box. I don't know why it didn't work the first time I tried it. Maybe something has been fixed on the server side but it shows the values as I expected.
I just needed to tweak the DateFormat a bit with AdvancedFormat > HighchartJSON
" xAxis: { type: 'datetime', labels: { format: '{value:%d.%m.%Y}' } }"
Hi @Jürgen Steinblock !
The thing is that when you are collecting your data for the chart, you should already have set of desired data range. So, create a list record of dates (the same structure that you have in your screenshot), and then left join it to your data. In this way, you will have full range. When there is no value, you will have {Date / null / null}. And you pass this merged set to your chart.
Hope this helps.
@Jürgen Steinblock are you using the OutSystemsChart/LineChart Block?
I tried using your solution above, but I realised that you can only specify 1 ValuesType?
I was wondering how you got this to work since, I have values that are in an ordered pair (x,y) - (date, temperature) and date is of date time format and temperature is a decimal type.
The values field for the 'DataPoint2' list in the line chart block also requires decimal type?
It looks to me like your chart is of the same format - (date, value), assuming value is of type decimal/integer here. Just wondering how you got your value to show up as decimal/integer type while maintaining a date time x-axis which is presumably specified in the 'ValuesType' field using Entities.ValuesType.Datetime.
Any help is much appreciated.
Cheers,
Andy
Yes, I do use the LineChart.
Nothing fancy, just a simple aggregate (sorted by date and value, don't know if this makes a difference) with a decimal value, a date field, and a string for series.
In order to get it work I just set ValueType=Entities.ValuesType.DateTime
And I added ValueTypes in the Addons\ChartXAxis, too. But I guess that's only important for formatting.
Update. Just noticed that you attached a screenshot. You possibly shouldn't format your Label because now you just have a string and the linechart can't do the proper grouping.
I just checked and I don't know how you would format the x-axis label or Tooltip afterwards.
If you figure it out, let me know.