Charts provide eye candy for your users. Here's a few samples of how they currently look:
Charts involve 3 main keywords, which are:
*chart: Type the
*chartkeyword and optionally provide a title (e.g.,
*chart: My Chart).
*type: Define what kind of chart you'd like to plot. For now, we have "bar", "scatter", and "line".
*data: Provide the x- and y-values of the data to be charted.
Optional keywords include:
*color: Provide the RGB code to the color you'd like, or for basic colors write the name (e.g.
*maxvalue for the y- and x-axes of your chart
*position: rightto choose where to display your y-axis, and
*position: bottomto specify where the x-axis should be displayed
*ticksto improve the labels displayed on your axes
Scatter charts also have a an additional, optional keyword:
*rollovers: Optional text that pops up when the user rolls their mouse over any of the data points.
Basic Bar Chart and Charting 101 🔗
Basic Bar Chart 🔗
You'll enter your data inside of [square brackets], in the form
. In its most basic form, your data will be made up of either
numbers, variables, or text labels, and will look something
*data: [[x, y], [3, 9], ["Sep. sales", 12]]
Below is an example of charting shoe sizes.
*chart: Shoe sizes of famous celebrities. *type: bar *data: [["Elliot Page", 6], ["Beyonce", 8], ["Kate Winslet", 11]]
The above program will display a bar chart that looks like this:
It's important that you start your
keyword with one pair of square brackets that will go around
). After that, you can fill the initial square bracket with each
datapoint you want to plot, also in their own square brackets:
*data: [["item 1", 30], ["item 2", 40]]
Using Simple Variables with
Look how our previous code could change if we instead used a couple variables in our data.
>> elliot = "Elliot Page" >> Bshoe = 8 *chart: Shoe sizes of famous celebrities. *type: bar *data: [[elliot, 6], ["Beyonce", Bshoe], ["Kate Winslet", 11]]
The above program would display the exact same chart as the one
we made earlier. Here you can see the data keyword contains two
. You can substitute pieces of your data collection for
variables, so long as you defined those variables previously in
the program using the
, like we did above. Note that when using variables, you do not
need quotes (like how the variable
when used after the
keyword, does not have quotes around it).
For a refresher on variables, click here .
Using a Variable of a Collection with
We could also use more complex variables in our data. Check out this example now. It produces the exact same chart.
>> elliot = ["Elliot Page", 6] >> beyonce = ["Beyonce", 8] >> kate = ["Kate Winslet", 11] *chart: Shoe sizes of famous celebrities. *type: bar *data: [elliot, beyonce, kate]
Here you can see that the variable
is now itself a collection. We can substitute the variable
(as well as
) right after our
keyword to produce the same chart we had before.
Using a Variable of a Collection of Collections with
One final example:
>> elliot = ["Elliot Page", 6] >> beyonce = ["Beyonce", 8] >> kate = ["Kate Winslet", 11] >> Celebrity_Shoes = [elliot, beyonce, kate] *chart: Shoe sizes of famous celebrities. *type: bar *data: Celebrity_Shoes
This again produces the same chart we showed you earlier. Now,
keyword, is a variable that represents a collection of
collections. You can see how the variable
was defined as a collection of the variables
Now you've seen three ways to use variables with the
keyword. You can mix and match all different types of variables
or non-variables to produce your charts in a way that is most
convenient for you.
Values of Your
By default, the x- and y-axis of a chart will stretch to a size relative to the largest and smallest bits of data you're displaying.
You can customize the size of your chart, though, with ease. For instance:
*chart: Your test results *type: bar *data: [["Your score", score], ["Average score", 65]] *yaxis *max: 80 *min: 20
This is useful when you have very specific ranges you would like to display.
Adding a Pretty Chart *color 🔗
Splash up your graphical displays with some color.
To start, you can find your favorite color from this website: http://colours.neilorangepeel.com
If you are looking for a palette that is friendly to colorblind people, check out this page: https://sashamaps.net/docs/resources/20-colors/
Copy down the RGB code. For example, if you're a fan of peachpuff, the code you want looks like this: rgb(255, 218, 185)
When you've got your fav, you simply add it to your chart's
keyword, like so:
*chart: Got peachpuff in your life? *type: bar *data: [["bar 1 label", 4], ["bar 2 label", 5], ["bar 3 label", 6]] *color: rgb(255, 218, 185)
In this example, we're only using one color, not six. We'll get to adding multiple colors in a bit.
If you want boring colors like solid "blue" or everyday "red",
then you don't need the RGB. You can just type
. This will work for many of the
, and a few of the more creatively named.
If you like the color you have, but it's a little too intense,
you can add
to make it somewhat see-through, like this:
*chart: Seeking less peachpuff in your life? *type: bar *data: [["bar 1 label", 4], ["bar 2 label", 5], ["bar 3 label", 6]] *color: rgb(255, 218, 185) *opacity: 0.5
Opacity should be a number ranging from 0 (totally see through) to 1 (totally solid). Here's how peachpuff looks with different levels of opacity:
If you have a custom color you want to use, go for it. The
keyword will work with any RGB, not just the ones listed on the
Multiple colors and multiple
Now let's return to colors. Remember my chart earlier? With all
the super awesome colors? The key to this snazziness is using
keyword gets its very own
If you just indent
keyword, that color is going to apply to the entire chart. If
you want to be more specific, then you've got to be more
specific with your indents. Check out the below code and see
what I mean:
*chart: Oo the prettiness! *type: bar *data: [["indianred", 1]] *color: rgb(205,92,92) *data: [["sandybrown", 2]] *color: rgb(244,164,96) *data: [["khaki", 3]] *color: rgb(240,230,140) *data: [["palegreen", 4]] *color: rgb(152,251,152) *data: [["turquoise", 5]] *color: rgb(64,224,208) *data: [["rebeccapurple", 6]] *color: rgb(102,51,153)
Instead of lumping all my data points into one
keyword, I split them up, so that I could then apply a unique
attribute to each
The outcome to the above code will look like this:
If you want mostly light blue bars, with just one vibrant orange, then you do this:
*chart: This 'lil chart of mine *type: bar *color: lightblue *data: [["Fact 1", 12], ["Fact 2", 4], ["Fact 3", 3]] *data: [["Super emphasized Fact 4", 18]] *color: orange *data: [["Fact 5", 7], ["Fact 6", 5]]
The "lightblue" becomes the default color for all the bars,
because it's indented beneath the
keyword, but the color for the fourth bar is overridden with an
to Customize the Look and Position of the Intervals on the Axes
Charts with money are fun, but they're hard to read without $ signs. You can customize your x- and y-axes to say anything you want!
Here's how to do that:
*chart: Rollin' in the benjies *type: line *data: [[2004, 10], [2006, 9], [2008, 13], [2010, 20], [2012, 18], [2014, 25], [2016, 35]] *yaxis *ticks: [[0, "$0 mil."], [10, "$10 mil."], [20, "$20 mil."], [30, "$30 mil."], [40, "$40 mil."]]
keyword lets you specify:
- the numerical value of where you want the tick to go, and
- the label you want to give that tick
So, the above example uses a collection of collections in the form:
[[number, label], [number, label], [number, label], ...]
In the case of
, the value comes first and the label comes second. If the
labels are just numerical, you don't need the label, you could
just have something like
*ticks: [2, 4, 6, 8, 10]
You can use
as well. For example:
Below, note that there are
for both the
*chart: My charitable awesomeness *type: line *data: [[1, 5], [2, 9], [3, 8], [4, 17]] *yaxis *ticks: [[0, ""], [5, "$5 mil."], [10, "$10 mil."], [15, "$15 mil."], [20, "$20 mil."]] *xaxis *ticks: [[1, "Quarter 1"], [2, "Quarter 2"], [3, "Quarter 3"], [4, "Quarter 4"]]
You'll also notice that for the first
tick I used
as the label, which means the label is just blank. This can
sometimes be helpful for making your chart look a little
Multiple Chart Types on One Chart — and Multiple Axes on One Chart 🔗
Let's say you want a line graph AND a bar graph on one chart, cause you're a chart maniac.
For example, you're a farmer charting how many pounds of kale you sold and how much money you brought in. You want your final chart to look like this:
To start, you have two different types of charts. You'll need to add multiple data keywords, one for each type of chart.
*chart: Summer Kale Sales *data: [[6, 32], [7, 44], [8, 38]] *type: bar *data: [[6, 320], [7, 396], [8, 361]] *type: line
In our code above, we've used the numeric values of the summer
months (6 for June, 7 for July, 8 for August). We've also
keyword beneath each data keyword to specify how to display the
data. We're showing the pounds sold as our bar graph data and
the income made as the line graph data.
This code results in a pretty ugly chart though:
More work is needed! The number of pounds sold ranges from 32 to
44, while dollars earned ranges from $320 to $396. Each data
type will need its own
for good chart chemistry.
We can have multiple y-axes and/or multiple x-axes. We just have
to be sure to give each a name, and then link their name beneath
the data they serve. We also have to tell the program where to
each axis: on the left, right, top, or bottom, like so:
*chart: Summer Kale Sales *data: [[6, 32], [7, 44], [8, 38]] *type: bar *yaxis: pounds *data: [[6, 320], [7, 396], [8, 361]] *type: line *yaxis: dollars *yaxis: pounds *position: left *yaxis: dollars *position: right
In this code, we're making sure GuidedTrack knows that the
we want to use with the bar data is the one called "pounds" and
we want to use for the line data is called "dollars." To make it
clear, you indent the name of the associated axis beneath the
it serves. You can call your axes anything.
Next, if you have multiple axes of the same type (e.g., two
y-axes), you should specify their
. In this case, we want the pounds'
to be on the left side of the chart and the dollars'
to be on the right side of the chart. As you can see above, the
last four lines of our code are geared toward defining the
. When adding special details about an axis, you first indent
the name of the axis beneath the
keyword, on the same indentation as a
You never include the
of an axis beneath a
keyword as in the below example.
To correct the above example, you would make the
keyword on the same indentation as the
keyword, and move the
keyword one indentation leftward as well. That's because axes
are attributes of the entire chart, and it's possible that
keywords could share the same
Okay, now our chart looks like this:
Getting better! But still not great... Let's change the
on the y-axes so they're more clear...
*chart: Summer Kale Sales *data: [[6, 32], [7, 44], [8, 38]] *type: bar *yaxis: pounds *data: [[6, 320], [7, 396], [8, 361]] *type: line *yaxis: dollars *yaxis: pounds *position: left *ticks: [[10, "10 lbs"], [20, "20 lbs"], [30, "30 lbs"], [40, "40 lbs"], [50, "50 lbs"]] *yaxis: dollars *position: right *ticks: [[300, "$300"], [325, "$325"], [350, "$350"], [375, "$375"], [400, "$400"]]
This is the same code as before, except now we've specified how we want the labels to read.
The light gray horizontal tick lines that appear on the chart will only originate from the data of one axis, not both. For the second axis, you just have to add labels wherever you'd like them to appear.
Now our chart looks like this:
That's pretty good! New
and some colors would improve things though. Plus, it's hard to
see the lines through the bars, so we should add some
If we set the
: dollars to 275, that would also align the dollar values with
the gray tick lines connected to the pounds, which would look
*chart: Summer Kale Sales *data: [[6, 32], [7, 44], [8, 38]] *type: bar *yaxis: pounds *color: green *opacity: .5 *data: [[6, 320], [7, 396], [8, 361]] *type: line *yaxis: dollars *color: black *opacity: .75 *yaxis: pounds *position: left *ticks: [[10, "10 lbs"], [20, "20 lbs"], [30, "30 lbs"], [40, "40 lbs"], [50, "50 lbs"]] *yaxis: dollars *position: right *ticks: [[300, "$300"], [325, "$325"], [350, "$350"], [375, "$375"], [400, "$400"]] *min: 275 *xaxis *ticks: [[6, "June"], [7, "July"], [8, "August"]]
This final code generates the image we started this section with. For a reminder, it looked like this:
With our code, we didn't need to specify a name for the
, because there's only one. If we wanted to though, we could add
more. One at the top too. We could even add multiple x-axes at
the bottom! We could have 6 y-axes and 7 x-axes just because we
were feeling crazy!
Scatter Plots 🔗
The code for making scatter plots works similarly to bar charts.
The main difference is that you set the
of the chart to "scatter" as in the example below. Your data
should be organized in this general format:
*data: [[x1, y1], [x2, y2], [x3, y3], [etc...]]
*chart: Ralphy's Height in Centimeters Over the Years *type: scatter *data: [[1989, 100], [1993, 120], [1998, 155], [1999, 175], [2004, 192]]
In our example, there are five data points. Each data point is surrounded by [brackets]. The value of the x-axis is written first (in our case, that's the year) and second is the y-axis (e.g., centimeters). Commas separate the values within each data point and they separate data points from each other. Additional brackets surround the entire dataset.
Variables can be substituted for any parts of the data, similarly to how we illustrated in the bar chart example.
The other keywords mentioned, such as
, etc., can also apply to scatter charts. Below is an example
keywords added to both axes:
*chart: Ralphy's Height in Centimeters Over the Years *type: scatter *data: [[1989, 100], [1993, 120], [1998, 155], [1999, 175], [2004, 192]] *xaxis *min: 1980 *max: 2000 *yaxis *min: 50 *max: 200
Keyword with Scatter Charts
You can add optional text values to a scatter charts so that when users hover their mouse over any of the above data plots, a small box pops up with additional information. Here's how the code looks:
*chart: Ralphy's Height in Centimeters Over the Years *type: scatter *data: [[1989, 100], [1993, 120], [1998, 155], [1999, 175], [2004, 192]] *rollovers: ["Toddler", "First year of school", "HS Freshman", "HS Sophomore", "College Freshman"]
In the chart that this example produces, when users hover their mouse over the 1993 data point, it reads, "First year of school." (You can try this example out yourself here .)
keyword is optional. If you include it, you must have as many
entries as there are data points.
to Scatter Charts
By adding the
keyword, you can show whether your data trends upward, downward,
or just flat.
Trendlines don't appear by default. To add a trendline to your
, like this:
*chart: Your moods over time *type: scatter *data: MoodData *trendline
Trendlines look something like this:
Line Graphs 🔗
Let's say I want to chart how my millions of dollars have grown over time (cause I'm saving for a yacht big enough to hold my helicopter).
I can use a line chart like this:
As you can see in the example below, the syntax of a line graph
is pretty similar to the scatter and bar charts, the main
difference is that in this case,
*chart: Rollin' in the benjies *type: line *data: [[2004, 10000000], [2006, 9000000], [2008, 13000000], [2010, 20000000], [2012, 18000000], [2014, 25000000], [2016, 35000000]]
The line graph is also compatible with all other keywords
mentioned in the bar chart example, such as
Next: Clearing the screen