If you've ever taken a science class, you're probably familiar with generating line charts based on a set of data for your experiments. Line charts are probably one of the most useful data visualizations when communicating data trends. In this recipe, we'll create a configurable Line Chart class which takes in an array of data elements and plots each point while connecting the points with line segments.
Follow these steps to create a Line Chart class that can automatically position and size a line chart from an array of data:
Define the constructor for the
LineChart
class that draws the x and y axis:function LineChart(config){ // user defined properties this.canvas = document.getElementById(config.canvasId); this.minX = config.minX; this.minY = config.minY; this.maxX = config.maxX; this.maxY = config.maxY; this.unitsPerTickX = config.unitsPerTickX; this.unitsPerTickY = config.unitsPerTickY; // constants...