Page MenuHomePhabricator

Design a fallback image for Graphs
Closed, ResolvedPublic

Description

I'm hoping that one of the designers can make an SVG image which clearly indicates the concept of a Graph.

The purpose of this image is to be used as fallback content for if a page with an interactive Graph is printed, or shown in the mobile apps, or another context where JS cannot be loaded. Below it I will put a textual message: "Graph cannot be loaded" or something similar.

Because of T242855: Undeploy graphoid our graphs currently only work when Javascript is present and this is often not the case. In some contexts this causes the image to be hidden completely, in others to leave an open space. I find this suboptimal as it basically disappears in a black hole. In my opinion at the very least we should show some form of replacement content indicating that a graph is supposed to be there.

If someone can make something for me that aligns with our design guidelines, I'll see about applying it.

Event Timeline

I like this new version a lot better than the first design, because it has a bit more details and looks less like an icon. I think it works well at some of the larger sizes that these graphs occupy on a page.
I'm not entirely sure about the danger triangle however.. We are strongly signalling 'error', while that isn't necessarily the case. The graph has not loaded, not yet loaded or is not expected to load.. that are three very different reasons to show this image, not all requiring an error indication. Maybe just not having the triangle would be better ?

Instead, maybe we should fatten up the lines a bit ? Turn it back a little bit more towards a stylistic design of the first image, making it more difficult to confuse it with an actual graph, but still with more details than the first idea ?
Googling placeholder graph/chart brings up some inspiration perhaps... https://www.google.com/search?q=placeholder+graph&tbm=isch

Thank you for doing this @Pietrasagh !

Thank you for comment. I read in guidelines they like to have more "curvy" shapes so I changed it a bit and added bars. I think it look more "cartoony" and would be hard to confuse with real graph. I also left previous version with triangle. Maybe it could be use in case of chart error.
I think that my illustration skills are now somewhere on spectrum between toddler and Picasso ;-)
https://commons.wikimedia.org/wiki/File:Graph-bar-line-fallback-illustration.svg

Love this version ! Exactly what I had in mind.

Pietrasagh claimed this task.