As we begin this journey, we will look at the advantages of jqPlot over other web-based charting tools. We will look at the basic options available to us in jqPlot as we hit the ground running and create charts based on our company's data. In this chapter, we will cover the following topics:
- Review the components of a chart
- Learn the different ways of creating a chart in jqPlot
- Create arrays that contain values for our x and y axes and pass these into jqPlot
- Use a plugin that allows us to use dates for our x axis
- Create multiple lines on our chart
- Add multiple y axes to our chart
- Add a legend to one of our charts
- Set different options for our lines and use different marker options
Let's think back to our high school Math class where our teacher discussed charts and graphs. You might have been like me and wondered how you would apply this in real life. Fast forward to today and your boss dropping a stack of files on your desk just made it real.
We will use line charts as a basis for our review of the parts of a chart. Line charts are one of the most popular charts to use, while also being the simplest to understand and implement with jqPlot. Line charts are mainly used to show how data changes over time, but they can also be used to show how one dataset impacts another. For example, we can show how the number of social media shares affect revenue or how sales in different divisions affect the gross profit margin.
With this in mind, we need to look at the components of a chart. There are two axes, the x axis and the y axis. Some might think of these as independent variables and dependent variables, but they are more scientific labels. An easier way to think of the two axes would be cause and effect. Our y axis generally represents the dependent variable or effect, which for instance, can be the amount of profit generated during a given time period, or the total revenue generated by a sales associate.
Our x axis generally represents the independent variable or cause. Most line charts show trending data over time, where our x axis covers certain time frames such as days, weeks, or years. Usually, we have a set range of data points on our x axis, as a result of which our y axis will have data points that may vary greatly. If we had a chart showing the revenue generated by sales associates, their names would be on the x axis. The sales associates interact with the customers and generate the sales that provide the revenue.
A few other pieces of a chart to keep in mind are the grid and ticks. The ticks denote certain values along the axis. The grid represents the lines running vertically and horizontally, connecting the ticks on both axes. The grid makes it easier to decipher the value of each point of a line on the chart. The following diagram shows how each of these pieces composes a chart: