Designing better charts with Google Sheets, Illustrator and Sketch
As a UI designer, I need to create dashboards with graphs that look real. I often don’t have access to real data for my designs so I tend head over to Illustrator, grab the pen tool and whip together an area line chart. It usually looks like this pile of poop:
I want to show you how you can use Google sheets, Adobe Illustrator and Sketch to make a graph like this:
To make this, you will:
1. Create some fake data in Google Sheets
2. Use that data to create an area line graph in Illustrator
3. Style the graph shape into what you see above in Sketch
1. Create some fake Data in Google Sheets
To make random numbers, head over to spreadsheets in google drive and type this function into an empty cell:
=RAND()*100 That will give you numbers like 83.20. My colleague, Kirill Popov, helped show me this function while we were designing email metrics visualizations. To make more, just click that cell and drag down until you have enough random numbers for your graph data points:
2. Use that data to create an area line graph in Illustrator
Now that you have a nice list of random numbers, let’s open Illustrator and create an artboard that measures 1200 x 600 pixels:
Next, grab the area graph tool:
Drag it out for about 90% of the artboard size and you will be given a window to insert data. Copy your data from the spreadsheet you created earlier and paste it in illustrator and click the check mark to see the result.
Let’s clean this up by removing the bottom ticks. Right click on the graph and click on Type… from the contextual menu:
Navigate to the Category Axis screen:
Set the length of the category axis tick marks to None and click OK:
Now, let’s add some data trends to some of the randomness. Grab the direct selection tool:
And use it to select the graph, not any of the axis stuff:
Using the direct selection tool, click and drag from outside the graph and onto a mid section of the graph including the full height of the peaks down to the depths of the valley in one fluid pass. Don’t select the foot of the graph. Once you have a nice selection, use the scale tool to vertically compress the section of the graph. Here’s a video showing the technique:
I recommend doing that last step a few times so you can show some data trends. Like so:
Before we take this into Sketch, let’s remove the stoke from the graph. Select the graph are we have been working with and remove the stroke:
Using the direct selection tool, select just the graph, not the axis lines, and copy it it. We are going to head over to Sketch to polish the graph’s design.
3. Style the graph shape in Sketch
Open Sketch, create a new document and insert an artboard that measures around 1220 x 530 pixels. Paste your graph from Illustrator and you should see this:
To style this graph, start off by making a rectangle that’s around 5 pixels smaller than the graph. This will become the mask the cuts off the side and bottom stroke later:
I made the rectangle above have a slightly opaque fill so you can the side and bottom areas that we are going to cut off. Move the rectangle layer behind the graph:
Select both the graph and the rectangle and click the mask button:
Now, let’s add some style. Select the graph (not the mask) and apply a 2px green stroke and a 40% opaque green fill:
You’ll notice that the side and bottom stroke are clipped. This gives the graph a nice modern look.
Finally, add some grid lines. Make the first line at the bottom of the graph and alt-drag it up about 40px. After that, hit command+D until you have a nice set of horizontal lines that get to the top of your graph. Group all the lines, place them behing the graph and make the color of the lines something that people can see but is not too dominant. I orginally set my first line to 1px stroke with #CCCCCC as the color. When I grouped all the lines, I set the group’s opacity to 20%:
You can place what ever numbers you want on the axis lines based on what kind of data/time relationship you want to show. And that’s it. Happy graph making.
