HTML Charting Project

I’m experimenting with loading data into a chart.

Data will be stock data (OHLC) and one or more indictors.  I have a couple of options to consider for charting.

  • Where does my data come from (or what is my data source)? It will be static canned data to begin with stored in google spreadsheets, but can then extend to historical data on any symbol in EOD format and (very challenging) intraday data on any symbol.
  • Who consumes my data, aka what charts? Highcharts/HighStock, FusionCharts, Google Charts can all do the work. HighStock looks the best and likely performs the best. What format do they expect the data in?
  • What languages will I use? JavaScript for sure as all of the popular charting packages use it. I’m leaning towards Python as a back-end language.

Some goodies to try

Tabletop: Converts data from Google Spreadsheets into JSON

HTML and CSS 101


Starting with HTML 4.0, in an attempt to return HTML back to a pure content mark up and separate out styles, cascading style sheets were introduced and CSS declaration syntax in HTML was standardized.

CSS declarations are pretty straightforward — one or more key-value pairs, separated by semi colon in curly braces applied to an HTML element. The HTML element is called the selector. More here

Now, the tricky part on selectors. The hash and the dot.

You can restrict CSS formatting to a HTML element with a specific ID by using the #ID syntax.

E.g., if you have an HTML element called para1, you can restrict CSS to #para1.

On the other hand, if you want to apply the style to all elements, such as Center element in HTML, use the .Center.

Again more info here

JavaScript 101

Having programmed for many years, but never in JavaScript, these puzzled me.

$ = just happens to be a valid identifier. Often used to refer to the jquery global object

jQuery =  A really popular framework. More on the basics

# and . = a jquery shortcut on css selectors. # selects HTML elements by ID, while . selects by name. So “#row” selects all elements with ID row, while “.row” selects all elements. More on their CSS selectors

function() = just happens to be a default function name used in jQuery.

btw, single quotes or double ‘ vs ” are both valid. Use whichever suits your style. But be consistent. I use single quotes as it implies a program character, as opposed to content character.

jsfiddle is absolutely amazing.

JavaScript is case sensitive! addEvent and addevent are not the same obviously!

Excellent tutorial on JavaScript, especially for function prototypes etc.