我发布了这个问题AJAX URL更新,因为我认为我的代码的问题是使用AJAX,但我认为这可能是HighStocks的一个问题。
我有一个带有这些函数的外部.js文件:
//uses AJAX call to retrieve data and then creates the chart with the data function createChart(ticker) { $.ajax({ type: 'post', url: 'http://...' + ticker + '....com', success: function (data, status) { //chart is rendered in here } //gets the user inputted ticker symbol from a HTML input box // and passes to chart function function getTicker() { var ticker = document.getElementById('userInput').value; createChart(ticker); }我的HTML文件只有一个简单的表单,带有一个输入框和一个按钮,点击它时会调用getTicker函数。 由于某种原因,图表没有被创建,AJAX调用似乎不起作用。
这可能与HighStocks有关吗? 任何建议,将不胜感激。
更新感谢您的建议,我试图使用JSONP,但图表仍然无法加载。 谁能看到我做错了什么?
var closePrices = new Array(); var dateArray = new Array(); var timeStampArray = new Array(); var timeClose = new Array(); function jsonCallback(data, ticker) { console.log( data ); //Put all the closing prices into an array and convert to floats for(var i=0; i < data.query.results.quote.length; i++) { closePrices[i] = parseFloat( data.query.results.quote[i].Close ); } //displays the values in the closePrices array console.log( closePrices ); //Put all the dates into an array for(var i=0; i < data.query.results.quote.length; i++) { dateArray[i] = data.query.results.quote[i].date; } //Convert all the dates into JS Timestamps for(var i=0; i < dateArray.length; i++) { timeStampArray[i] = new Date( dateArray[i] ).getTime(); } for(var i=0; i<data.query.results.quote.length; i++) { timeClose.push( [timeStampArray[i], closePrices[i]] ); } timeClose = timeClose.reverse(); console.log ( timeClose ); //displays the dateArray console.log( dateArray ); console.log( timeStampArray ); // Create the chart $('#container').highcharts('StockChart', { rangeSelector : { selected : 1 }, title : { text : ticker + ' Stock Price' }, series : [{ name : ticker, data: timeClose, tooltip: { valueDecimals: 2 } }] }); } function createChart() { var url = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3D%20%22' + ticker +'%22%20and%20startDate%20%3D%20%222013-01-01%22%20and%20endDate%20%3D%20%222013-02-25%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?'; //Ajax call retrieves the data from Yahoo! Finance API $.ajax( url, { dataType: "jsonp", success: function(data, status){ console.log(status); jsonCallback(data, ticker); }, error: function( jqXHR, status, error ) { console.log( 'Error: ' + error ); } }); } //Function to get ticker symbol from input box. function getTicker() { var ticker = document.getElementById('userInput').value; createChart(ticker); }I posted this question AJAX URL update as I thought the problem with my code was with AJAX but I think this could be an issue with HighStocks.
I have an external .js file with these functions:
//uses AJAX call to retrieve data and then creates the chart with the data function createChart(ticker) { $.ajax({ type: 'post', url: 'http://...' + ticker + '....com', success: function (data, status) { //chart is rendered in here } //gets the user inputted ticker symbol from a HTML input box // and passes to chart function function getTicker() { var ticker = document.getElementById('userInput').value; createChart(ticker); }My HTML file just has a simple form with an input box and a button that when clicked calls the getTicker function. For some reason the chart is not being created and the AJAX call doesnt seem to work.
Is this something with HighStocks maybe? Any suggestions would be appreciated.
UPDATE Thank you for the suggestions, I have attempted to use JSONP but the chart still does not load. Can anybody see what I am doing wrong?
var closePrices = new Array(); var dateArray = new Array(); var timeStampArray = new Array(); var timeClose = new Array(); function jsonCallback(data, ticker) { console.log( data ); //Put all the closing prices into an array and convert to floats for(var i=0; i < data.query.results.quote.length; i++) { closePrices[i] = parseFloat( data.query.results.quote[i].Close ); } //displays the values in the closePrices array console.log( closePrices ); //Put all the dates into an array for(var i=0; i < data.query.results.quote.length; i++) { dateArray[i] = data.query.results.quote[i].date; } //Convert all the dates into JS Timestamps for(var i=0; i < dateArray.length; i++) { timeStampArray[i] = new Date( dateArray[i] ).getTime(); } for(var i=0; i<data.query.results.quote.length; i++) { timeClose.push( [timeStampArray[i], closePrices[i]] ); } timeClose = timeClose.reverse(); console.log ( timeClose ); //displays the dateArray console.log( dateArray ); console.log( timeStampArray ); // Create the chart $('#container').highcharts('StockChart', { rangeSelector : { selected : 1 }, title : { text : ticker + ' Stock Price' }, series : [{ name : ticker, data: timeClose, tooltip: { valueDecimals: 2 } }] }); } function createChart() { var url = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3D%20%22' + ticker +'%22%20and%20startDate%20%3D%20%222013-01-01%22%20and%20endDate%20%3D%20%222013-02-25%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?'; //Ajax call retrieves the data from Yahoo! Finance API $.ajax( url, { dataType: "jsonp", success: function(data, status){ console.log(status); jsonCallback(data, ticker); }, error: function( jqXHR, status, error ) { console.log( 'Error: ' + error ); } }); } //Function to get ticker symbol from input box. function getTicker() { var ticker = document.getElementById('userInput').value; createChart(ticker); }最满意答案
感谢Jeffrey Blake和Pawel Fus的建议。 使用JSONP我能够让我的程序正常运行:)
Thanks to Jeffrey Blake and Pawel Fus for your suggestions. Using JSONP I was able to get my program functioning correctly :)
更多推荐
发布评论