Creating a line chart in powerapps

(0) Share

Report

Posted on by HectorOlivos

411

Hello Community!

I wanted to know if it´s possible to accomplish this in powerapps:

This is the chart I want to create:

This is the actual chart in powerapps:

This is how i fill the items in the chart in powerapps:

ClearCollect(
 colParameters,
 ShowColumns(
 Filter(
 SortByColumns(
 FORD_Characteristics,
 "FechaDetección",
 SortOrder.Ascending
 ),
 FechaDetección >= dte_CurrentDate_3.SelectedDate && 
 FechaDetección <= DatePickerCanvas2_1.Value && 
 cmb_PartNumber.Selected.Value = NoParte && 
 cmb_Parameter.Selected.Value = Estación
 ),
 "FechaDetección","Máximo","Minimo","ValorActual","Objetivo"
 )
)

Now my question: Is it possible to set the labels to be like the first chart?

E.g: 06:00 am | 07:00 am | 08:00 am | 09:00 am | 10:00 am | 11:00 am | 12:00 pm | 01:00 pm | 02:00 pm | 03:00 pm and so

Because the labels in the powerapp chart look very close together.

Thanks.

Categories:

Building Power Apps

I have the same question (0)

All responses (2)

Answers (0)

Sort by

v-bofeng-msft Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!
Hi @HectorOlivos ,

I'm afraid that is not available , but there is a workaround.

Please try this API:

https://quickchart.io/

Add a image control and set it's image property to:

"https://quickchart.io/chart?v=3&c="&EncodeUrl("{ type: 'ohlc', data: { datasets: [ { type: 'line', yAxisID: 'y1', borderColor: '#f00', backgroundColor: '#f00', borderWidth: 2, pointRadius: 0, label: 'SMA', data: [ ['2016-04-01T07:00:00Z', 18.832], ['2016-04-01T07:10:00Z', 18.98], ['2016-04-01T07:20:00Z', 18.97], ['2016-04-01T07:30:00Z', 19.082], ['2016-04-01T07:40:00Z', 19.262], ['2016-04-01T07:50:00Z', 19.352], ['2016-04-01T08:00:00Z', 19.39], ['2016-04-01T08:10:00Z', 19.438], ['2016-04-01T08:20:00Z', 18.97], ['2016-04-01T08:30:00Z', 19.082], ['2016-04-01T08:40:00Z', 19.262], ['2016-04-01T08:50:00Z', 19.352], ].map(([d,y]) => ({x:new Date(d).getTime(),y})), }, ], }, options: { scales:{ x:{ adapters: { date: { zone: 'UTC-4' } }, time: { unit: 'minute', stepSize: 10, displayFormats: { day: 'MMM d', month: 'MMM d', } }, }, }, plugins: { legend: { display: false, }, title: { display: true, text: 'ChartName', font: { size: 20, }, }, }, }, }")

Best Regards,

Bof

Was this reply helpful? Yes No
HectorOlivos 411 on at

Like (0)

Report
Copy link

Link copied!
hi @v-bofeng-msft,

I´ve tried using quickchart like this:

"https://quickchart.io/chart?v=3&c="&EncodeUrl("{ type: 'ohlc', data: { datasets: [ { type: 'line', yAxisID: 'y1', borderColor: '#f00', backgroundColor: '#f00', borderWidth: 2, pointRadius: 0, label: 'SMA', data: [ " & Concat( SortByColumns( colParameters, "FechaDetección",SortOrder.Descending ), "'" & NewColumn & "'," ) & " ].map(([d,y]) => ({x:new Date(d).getTime(),y})), }, ], }, options: { scales:{ x:{ adapters: { date: { zone: 'UTC' } }, time: { unit: 'minute', stepSize: 10, displayFormats: { day: 'MMM d', month: 'MMM d', } }, }, }, plugins: { legend: { display: false, }, title: { display: true, text: 'ChartName', font: { size: 20, }, }, }, }, }")

Since im using a collection I created a new column with the with format it was hard coded
['2016-04-01T07:00:00Z', 18.832],

ClearCollect( colParameters, AddColumns( ShowColumns( Filter( SortByColumns( FORD_Characteristics, "FechaDetección", SortOrder.Ascending ), FechaDetección >= dte_CurrentDate_3.SelectedDate && FechaDetección <= DatePickerCanvas2_1.Value && cmb_PartNumber.Selected.Value = NoParte && cmb_Parameter.Selected.Value = Estación ), "FechaDetección","Máximo","Minimo","ValorActual","Objetivo" ), "NewColumn", Text(FechaDetección, DateTimeFormat.UTC) & ", " & Text(ValorActual, "[$-en-US]0.000") ) );
This is the collection (It Hast 271 items):

But it´s displaying nothing:

Was this reply helpful? Yes No