Building a candlestick chart with filtered data

We are happy with how our OHLC chart turned out. Now, we turn our attention to creating a candlestick chart. We consider this might work well on the dashboard.

We open the OHLC chart we just created and save it as a new file. We only need to set one option to make it a candlestick chart, but we also want to make a few other cosmetic changes. We execute the following steps:

  1. The first change is the data feed that will pull in the stock prices of the last 14 days. We also update our title:
    ...
  var stockPrice = $.jqplot ('stockPrice', "./data/last_14.json",
  {
    title:'Last 14 Days - jQ Big Box Electronics (jqBBE)',
  2. Under rendererOptions for our series, we set candleStick to true:
    ...
    series: [
      {
        renderer:$.jqplot.OHLCRenderer,
        rendererOptions: {
          lineWidth: 2,
          candleStick: true
        }
      }
    ],
  3. Previously, we used numberTicks to limit the number of ticks jqPlot created for our axes. For this chart, we decide to use tickInterval. When dealing with integers, we pass in a number and jqPlot creates ticks at that interval. Since we are using DateAxisRenderer, we need to pass. We pass in a string representing a period of time. Since it is a short time frame, we set our ticks for every 2 days:
    ...
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
        tickOptions: { formatString:'%b %e, %Y' },
        tickInterval: "2 days",
  4. We also set the max and min options to our new time frame. We set the min option to 1 day before, so that our first candlestick is not cut off:
            max: "12-06-2012 16:00",
        min: "11-21-2012 00:00"
      },
  5. We change the minimum value for our y axis to 20.
          yaxis: {
        min: 20,
        label: 'Share Price',
        tickOptions: { prefix: '$', formatString: '%.2f' }
      }
    },
    ...

Now that we have completed our new candlestick chart, we load it in our browser. At a glance, we see that most days the stock closed higher than the opening price. We highlight the candlestick for November 28 and see our tooltip explaining what we see in the body of the candlestick. The stock opened at 21.75 and closed at 21.85. We can tell on the next day that there was a big difference between the opening and closing prices, and the closing price was lower.

Building a candlestick chart with filtered data

We decide now is a good time to go for lunch. As we get up to leave, Calvin and Bob stop by the office.

"I really like the candlestick charts," Calvin says. Bob points at the screen. He says, "One variation of a candlestick chart uses colors to signify whether a stock closes higher or not. If it closes higher, the body is colored green, and if it closes lower, the body is red. Some people color the body blue for a higher closing price, but I like red and green. It matches traffic lights and is intuitive."

Calvin interrupts, "Bob and I have a work lunch with some of the VPs. That reminds me, Roshan wanted to know if you can zoom in on the data in a chart. He specifically mentioned those charts where they cover a year or more of data." We mention that it is possible. "Cool. Why don't you generate a colored candlestick chart like Bob mentioned, with a year's worth of data? It will let you test out the zoom feature. Bob and I will swing by later this afternoon and see where you're at." We agree, and Calvin and Bob leave. We grab our things and head for lunch as well.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.236.27