search

StatisticsFinland / PxVisualizer

https://statisticsfinland.github.io/PxVisualizer/
Apache License 2.0
3 stars 0 forks source link

When using non React implementation, some graph types fail to render. #31

Closed Lauri-Iivarinen closed 5 months ago

Lauri-Iivarinen commented 5 months ago

Hello, this might be an issue you are aware and working on but incase it isn't Im writing it here as an issue.

Basically when creating graphs in PxGraph frontend everything goes as planned and I'm able to create the graphs I want, however when rendering them out in our non React implementation using drawGraph function, sometimes depending on graph type (I think), rendering fails.

Example 1, success

Created graph in PxWeb: 4

Graph added to our testpage with drawGraph(): 3

Example 2, fail

Created graph in PxWeb: 1

Graph added to our testpage with drawGraph() renders nothing and console prints out error + data meant to be drawn: 2

Here's the query saved within the identifier for the example 2

{"Query":{"TableReference":{"Name":"statfin_tyokay_pxt_115b.px","Hierarchy":["StatFin","tyokay"]},"ChartHeaderEdit":null,"VariableQueries":{"Alue":{"NameEdit":null,"ValueEdits":{},"ValueFilter":{"type":"item","query":["KU020","KU005","KU009"]},"VirtualValueDefinitions":null,"Selectable":false},"Pääasiallinen toiminta":{"NameEdit":null,"ValueEdits":{},"ValueFilter":{"type":"item","query":["SSS"]},"VirtualValueDefinitions":null,"Selectable":false},"Sukupuoli":{"NameEdit":null,"ValueEdits":{},"ValueFilter":{"type":"item","query":["1","2"]},"VirtualValueDefinitions":null,"Selectable":false},"Ikä":{"NameEdit":null,"ValueEdits":{},"ValueFilter":{"type":"item","query":["18-64"]},"VirtualValueDefinitions":null,"Selectable":false},"Vuosi":{"NameEdit":null,"ValueEdits":{},"ValueFilter":{"type":"item","query":["2022"]},"VirtualValueDefinitions":null,"Selectable":false},"Tiedot":{"NameEdit":null,"ValueEdits":{},"ValueFilter":{"type":"item","query":["vaesto"]},"VirtualValueDefinitions":null,"Selectable":false}}},"CreationTime":"2024-05-27T10:34:47.7272427+03:00","Archived":false,"Settings":{"VisualizationType":"StackedHorizontalBarChart","Layout":{"RowVariableCodes":["Sukupuoli"],"ColumnVariableCodes":["Alue"]},"CutYAxis":false,"Sorting":"1","ShowDataPoints":false},"Version":"1.1"}

Notes

If you can let me know if you are aware of this and are planning on fixing it that would be great. Regards. Lauri

jsaarimaa commented 5 months ago

Hey and thank you for reporting!

Unfortunately we were not able to reproduce the issue with the provided query. Which version of the PxVisualizer are you using? We suggest that you try the latest version (1.0.3) if you are not using that already.

If you can provide the response object PxGraf is returning it might help us pin down the problem.

Jose

Lauri-Iivarinen commented 5 months ago

Hello, I added a new query and query result below. I would like to note that our issues might be related to our environment as well although it would be strange that only some graphs fail then more about it in the end.

PxVisualizer version: 1.0.3

Failing query

Everything is ok in pxgraf frontend and in react environment used for testing pxvisualizer (using Chart component, not drawchart)

Query from api/sq/: {"query":{"tableReference":{"name":"statfin_alvaa_pxt_13bl.px","hierarchy":["StatFin","alvaa"]},"chartHeaderEdit":null,"variableQueries":{"Vuosi":{"nameEdit":null,"valueEdits":{},"valueFilter":{"type":"item","query":["2022"]},"virtualValueDefinitions":null,"selectable":false},"Puolue":{"nameEdit":null,"valueEdits":{},"valueFilter":{"type":"from","query":"01"},"virtualValueDefinitions":null,"selectable":false},"Hyvinvointialue ja kunta":{"nameEdit":null,"valueEdits":{},"valueFilter":{"type":"item","query":["000000"]},"virtualValueDefinitions":null,"selectable":false},"Tiedot":{"nameEdit":null,"valueEdits":{},"valueFilter":{"type":"item","query":["lkm_ehd"]},"virtualValueDefinitions":null,"selectable":false}}},"settings":{"selectedVisualization":"HorizontalBarChart","cutYAxis":false,"pivotRequested":false,"sorting":"descending","showDataPoints":false}}

Response body from /api/sq/visualization/: {"tableReference":{"name":"statfin_alvaa_pxt_13bl.px","hierarchy":["StatFin","alvaa"]},"data":[1632.0,1562.0,1629.0,1466.0,1073.0,1185.0,306.0,936.0,345.0,24.0,44.0,11.0,3.0,11.0,6.0,5.0,53.0,28.0,204.0,61.0],"dataNotes":{},"missingDataInfo":{},"metaData":[{"code":"Vuosi","name":{"en":"Year"},"note":null,"type":"T","values":[{"code":"2022","name":{"en":"2022"},"note":null,"isSum":false,"contentComponent":null}]},{"code":"Hyvinvointialue ja kunta","name":{"en":"Wellbeing services county and munincipa"},"note":null,"type":"F","values":[{"code":"000000","name":{"en":"Total"},"note":null,"isSum":false,"contentComponent":null}]},{"code":"Tiedot","name":{"en":"Information"},"note":null,"type":"C","values":[{"code":"lkm_ehd","name":{"en":"Number of candidates"},"note":null,"isSum":false,"contentComponent":{"unit":{"en":"number"},"source":{"en":"County elections, Statistics Finland"},"numberOfDecimals":0,"lastUpdated":"2022-01-14T06:00:00Z"}}]},{"code":"Puolue","name":{"en":"Party"},"note":null,"type":"F","values":[{"code":"01","name":{"en":"SDP"},"note":null,"isSum":false,"contentComponent":null},{"code":"02","name":{"en":"PS"},"note":null,"isSum":false,"contentComponent":null},{"code":"03","name":{"en":"KOK"},"note":null,"isSum":false,"contentComponent":null},{"code":"04","name":{"en":"KESK"},"note":null,"isSum":false,"contentComponent":null},{"code":"05","name":{"en":"VIHR"},"note":null,"isSum":false,"contentComponent":null},{"code":"06","name":{"en":"VAS"},"note":null,"isSum":false,"contentComponent":null},{"code":"07","name":{"en":"RKP"},"note":null,"isSum":false,"contentComponent":null},{"code":"08","name":{"en":"KD"},"note":null,"isSum":false,"contentComponent":null},{"code":"09","name":{"en":"LIIKE"},"note":null,"isSum":false,"contentComponent":null},{"code":"10","name":{"en":"LIBE"},"note":null,"isSum":false,"contentComponent":null},{"code":"11","name":{"en":"Pirate Pty"},"note":null,"isSum":false,"contentComponent":null},{"code":"12","name":{"en":"EOP"},"note":null,"isSum":false,"contentComponent":null},{"code":"13","name":{"en":"KP"},"note":null,"isSum":false,"contentComponent":null},{"code":"16","name":{"en":"SIN"},"note":null,"isSum":false,"contentComponent":null},{"code":"17","name":{"en":"SKE"},"note":null,"isSum":false,"contentComponent":null},{"code":"19","name":{"en":"AP"},"note":null,"isSum":false,"contentComponent":null},{"code":"20","name":{"en":"SKP"},"note":null,"isSum":false,"contentComponent":null},{"code":"21","name":{"en":"KRIP"},"note":null,"isSum":false,"contentComponent":null},{"code":"22","name":{"en":"VKK"},"note":null,"isSum":false,"contentComponent":null},{"code":"99","name":{"en":"Constituency associations"},"note":null,"isSum":false,"contentComponent":null}]}],"selectableVariableCodes":[],"rowVariableCodes":[],"columnVariableCodes":["Puolue"],"header":{"en":"Number of candidates, Total 2022 by Party"},"visualizationSettings":{"visualizationType":"HorizontalBarChart","timeVariableIntervals":"Year","timeSeriesStartingPoint":"2022-01-01T00:00:00Z","cutValueAxis":false,"sorting":"descending","showDataPoints":false}}

About our environment

Issues might be related to our environment as well as we are only capable of rendering graphs in embedded html pages therefore not able to use Node.js. I tried using npm package browserify to fix this issue as that has helped in the past.

jsaarimaa commented 5 months ago

Hi, we tried rendering the chart using the response object you provided and everything seems to work fine. Our testing setup differs from yours and that might ofcourse be why the results differ. Unfortunately we do not currently have resources to setup new testing platforms for different tech stacks.

If you can provide new information that might help us find the issue we can look into this again, but otherwise there isn't much we are able to do for now.

Jose

Lauri-Iivarinen commented 5 months ago

Im closing the issue, thanks for taking the time to look into it.

Lauri