How to embed stock chart into website

UPDATE:  Current version of Explainum has more simple process of chart creation, so some forms may look differently. Also, now you can create new series in one click.

Here is step-by-step guide how to embed daily updated stock/index chart into a web page using Explainum. Briefly, sequence of actions is as follows:

• Sign in, create blank chart and launch Add Series wizard
• Choose data source (Google Finance, Yahoo Finance or MSN Money) and enter ticker name
• Select metric (High, Low, Volume, etc.) and date range, save series into chart
• Get HTML snippet for chart widget and insert in into the web page

And result will look like this widget below (it's interactive -- try clicking/hovering comments, selecting areas, scrolling, zooming, etc.).



Now, with more details:

Go to explainum.com and sign in/register, then create new blank chart. Go to the Series tab. As chart is just created so it doesn't contain any series -- launch wizard by pressing Add new series button.

Then you will be offered a list of various data sources. Stock charts can be built using either data source from these three:

• Google Finance
• Yahoo Finance
• MSN Money (Money Central)

Sequence of action is exactly the same for any of these data sources. For purpose of this guide I will use Yahoo Finance, however you can use any of them.

After you selected data source, you are offered to enter ticket name. When you entered the name you can press Check ticker ... to make sure that this ticker is recognized by data source. If everything is OK, press Continue to jump to the Step 2 of the wizard.

On step 2, select metrics you're interested in and define length of loaded history. For convenience use calendar which is invoked by calendar button nearby date field. Make sure that you checked Autoupdate, so that chart will be updated with fresh data every day. When all is done -- press Fetch.

Final step of the wizard -- preview loaded data to make sure data is loaded correctly and press Save ... .

Voila! You have chart with stock data. Now you can add comments to it and/or embed it into you website or blog. To embed chart, open it and press Get HTML button to get HTML snippet. The snippet should be similar to one below.

<script type="text/javascript">
//<![CDATA[
explainum_chart_id = 23;
explainum_widget_width = 700;
explainum_widget_height = 400;
//]]></script>
<script type="text/javascript" src="http://explainum.com/scripts/loader.js">
</script>

If needed, adjust widget's height and/or width and then insert the snippet into your web page. If you checked Autoupdate, widget will be automatically updated with new data points every day. You can tweak update setting on tab Update, if needed.

To add new comment simply select rectangular area around datapoints which you want to annotate, press Add comment. Then write comment and press Done. New comment will appear immediately on the list and commented area will be highlighted with yellow background indicating presence of annotations.

You can also add your own data to charts using CSV-files and DropBox.