Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
mparzen
Community Member

no script embed a chart help

Great discussion and answers from my last (unrelated) question. thanks......

reading around here i discovered that script is not allowed

I am trying to see if I can embed some finance stock charts into my canvas site

two places that have widgets to do this are

Free Stock Market Snapshot Widgets

<script src="http://markets.financialcontent.com/freewidget?Module=watchlist2&Output=JS"></script>

and

FreeStockCharts.com RealTime Stock Market Widgets - Scrolling Ticker

  <!-- START Worden Top Gainers Ticker Widget -->

<script src="http://widgets.freestockcharts.com/js/jquery-1.3.1.min.js" type="text/javascript"></script> <script src="http://widgets.freestockcharts.com/script/WBIHorizontalTicker2.js?ver=12334" type="text/javascript"></script> <link href="http://widgets.freestockcharts.com/WidgetServer/WBITickerblue.css" rel="stylesheet" type="text/css" />

<script>

    var gainTicker = new WBIHorizontalTicker('gainers');

    gainTicker.start();

  </script> <!-- End Scrolling Ticker Widget -->

Is this impossible to implement in canvas since both use javascript?

2 Replies
kona
Community Coach
Community Coach

 @mparzen ​, did the answer provided by Rick help with your problem? If not let us know so we can continue to try and help!

awilliams
Instructure
Instructure

Hey  @mparzen ,  @rmurchshafer2 ​ has given you a really fine option for getting stock data into Canvas. In the event that you just really had to have the ticker running across a page though, I think there is a solution. It will require that you advise your students how to bypass their browsers security settings though.

Here are the steps in brief:

1. Create your own HTML file with the code you referenced

2. Upload the file to Canvas

3. Create an iframe on a Canvas page and inside that iframe display your HTML file

Now let's get in to the weeds.

First I went to the site you referenced and copied the Java script code they offer. Then I created an HTML file and pasted that code into the body section. I am sure this HTML file could be improved but it should suffice, here's what it looks like:

stocks.html

<html><head><title>Stock Ticker</title></head>

<body>

        <!-- START Worden Top Gainers Ticker Widget -->

<script src="http://widgets.freestockcharts.com/js/jquery-1.3.1.min.js" type="text/javascript"></script> <script src="http://widgets.freestockcharts.com/script/WBIHorizontalTicker2.js?ver=12334" type="text/javascript"></script> <link href="http://widgets.freestockcharts.com/WidgetServer/WBITickerblue.css" rel="stylesheet" type="text/css" />

<script>

    var gainTicker = new WBIHorizontalTicker('gainers');

    gainTicker.start();

  </script> <!-- End Scrolling Ticker Widget -->

</body>

</html>

Now upload that file to Canvas.

Now go to the files section of your course and get the ID# of the file. To do this find the file and click on it. In the address bar you will see the ID# of the file on the very end:

coconino.instructure.com/courses/1325768/files/folder/Test%2520Folder?preview=71833478 (Your link will be different, the important part is the number on the end)

You'll want a modified version of that link like this:

coconino.instructure.com/courses/1325768/files/71833478 (again, your link will be slightly different)

Now that you have that link you can embed it in an iframe on any page. Here's the iframe code you would add in the HTML editor of a page:

<p><iframe src="https://coconino.instructure.com/courses/1325768/files/71833958" width="100%" height="22px"></iframe></p>

In testing a height of 22px gave the best results. If you use one of the double tickers you'll want to modify the height.

With that done everything is in place for this to work.

Since that site doesn't support https and web browsers are very picky about allowing insecure content inside a secure environment (and rightfully so!) you will now have to instruct your students how to allow this insecure content to be displayed. More information about that can be found at Which browsers does Canvas support? ​ under the heading Browser Privacy Settings.

And here is a short video of it working: