We wrap up our work and prepare for a little bit of relaxing reading on Reddit when Calvin, Bob, and Roshan stop by. We show Roshan the first two charts, and then show off our colored candlestick chart. Roshan asks, "Can we just make the bigger chart a line chart? I'm afraid all the extra marks and what not will confuse users." We tell him that won't be a problem.
We also point out the price jump on February 15. "Right," Roshan says, "that was the day the quarterly earnings were released. Actually, some of the numbers were leaked over the weekend, and the stock jumped before the market opened."
Roshan stops and looks like he is thinking something over. "You added a line to one of the bar charts, showing a threshold. Can you do something similar to denote when the quarterly earnings were released?" We tell him we should be able to do that. "Excellent. I look forward to seeing it. Now, we'll get out of your hair."
We save the previous chart as a new file and begin making our changes using the following steps:
enablePlugins
to turn them all on. Then, we create the canvasOverlay
option:... <script src="../js/jqplot.canvasOverlay.min.js"></script> ... $.jqplot.config.enablePlugins = true; var stockPrice = $.jqplot ('stockPrice', "./data/q1_q3_2012.json", { ... canvasOverlay: {
objects
array. We set each of our three lines to dashedVerticalLine
. For the first line, we set the name to Q4 2011 Earnings
. With our previous lines, we set x
to our threshold, which was an integer. Since we are using dates, we need to convert our date to a valid ISO 8601 timestamp so that jqPlot can place it properly: objects: [
{
dashedVerticalLine: {
name: 'Q4 2011 Earnings',
x: new Date("2012-02-15T06:00:00").getTime(),
showTooltip
option and set it to true
. Then, we set tooltipLocation
to e
so that it will not overlap our highlighter tooltip. We finish by setting tooltipFormatString
to the name of our line. We'll use the same layout for the other two lines, but change the x
value, name
, and tooltipFormatString
: lineWidth: 2,
color: '#00f',
shadow: false,
yOffset: 0,
showTooltip: true,
tooltipLocation:'e',
tooltipFormatString: 'Q4 2011 Earnings'
}
},
...
]
},
...
renderer
option from the series
object. Then, we set showMarker
to false
, so we'll only show the line and not all the data points. We also set lineWidth
to 1
so that the line is not so thick: series: [ { showMarker: false, lineWidth: 1 } ],
...
With all of that wrapped, we load the chart in our browser. We hover over the middle line, and the tooltip appears and shows Q1 2012 Earnings.
We zoom in to look at the month of July and notice something as we hover over the data point for July 6. The numbers in the tooltip don't seem to match the line.
Our chart uses the opening price as the y
value for our line, ignoring the other elements in the array. We need to swap the opening price with the closing price on the y axis, but we want to keep all the other values for the tooltip.
18.219.249.210