score:1
your problem comes from 2 things:
- your chart config in options with
xaxes
that should bexaxis
instead - missing labels and correct data in chart data
here is the codes that works:
var stocksdata = {
datasets: [
{
label: 'open',
backgroundcolor: 'rgba(104,0,255,0.1)',
data: [
],
},
],
};
window.onload = function() {
var ctx = document.getelementbyid('mychart').getcontext('2d');
var linechart = new chart(ctx, {
type: 'line',
data: stocksdata,
options: {
scales: {
xaxis: [
{
type: 'linear',
position: 'bottom',
},
],
},
},
});
window.linechart = linechart;
};
var sym = 'aapl'; //get from form
var tseries = 'time_series_intraday'; //get from form
var target = `https://www.alphavantage.co/query?function=${tseries}&symbol=${sym}&interval=5min&apikey=va3rz8b9ppywkqkn`;
function update () {
fetch(target)
.then(response => response.json())
.then(data => {
var prices = data['time series (5min)'];
for (prop in prices) {
var stockprices = prices[prop]['1. open'];
//change to 2. high, etc
console.log(`${prop} : ${stockprices}`);
//stocksdata.datasets[0].data.push({x: prop, y: +stockprices})
stocksdata.datasets[0].data.push(stockprices);
// format date here. for example with moment:
// var date = moment(prop).format('yyyy-mm-dd')
stocksdata.labels.push(prop);
//time x axes are preventing render
window.linechart.update();
}
})
.catch(error => console.error(error));
}
a complete format for chart data would be like:
var stocksdata = {
labels: ['date1', 'date2', 'date3', 'date4'],
datasets: [
{
label: 'open',
backgroundcolor: 'rgba(104,0,255,0.1)',
data: [
'data1', 'data2', 'data3', 'data4'
],
},
],
};
then each data and date label should be push separately:
stocksdata.datasets[0].data.push(stockprices);
stocksdata.labels.push(prop);
to format with moment you can use:
var datestr = moment(prop).format('yyyy-mm-dd');
score:1
the "odd" time format is (almost) the standard international datetime format. in this case yyyy-mm-dd hh:mm:ss
. i strongly suggest you familiarise yourself with it and use it in preference to dd/mm/yyyy
or mm/dd/yyyy
.
you can fix your code by changing the x-axis type to time
and adding the appropriate configuration options:
options: {
scales: {
xaxes: [
{
type: 'time',
...
note that you'll also need to change your call to chart.js to the version with moment.js bundled (or include moment separately):
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.bundle.min.js"></script>
Source: stackoverflow.com
Related Query
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to zoom Y axis on time series or X-Y chartjs graph
- Chartjs real time graph x axis movement
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to add ChartJS code in Html2Pdf to view image
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- How to set a time scale to a ChartJS chart from JSON?
- chartjs 2.7 how to add labels in center of horizontal bar graph
- ChartJS - Time graph from JSON
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- How to keep side bars in Chartjs bar graph from clipping?
- How to Add X axis Padding in chart js Line Graph
- How to set min Value a step down of min value received from database in Y Axis in ChartJS
- How to get the image from graph created using chartjs
- How to use computed property with data from JSON in data object for time axis in Vue using Chart.js
- How to set ChartJS Y axis title?
- How to prevent first/last bars from being cut off in a chart with time scale
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to add tooltips to chart.js graph
- how to plot multiple time series in chartjs where each time series has different times
- How to add label for ChartJs Legend
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- How to add datas to chart js from javascript array itself?
- How to change the color of legend in chartjs and be able to add one more legend?
- How to show Y axis ticks for every point in the graph
- How can I create a time series line graph in chart.js?
- How do I fix over limit y axis value in ChartJS
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- How to work out Chartjs using TypeScript with Chartjs.definitelyTyped from github
More Query from same tag
- ChartJS and jsPDF - why the background is black?
- My chart.js canvas disappears after hide() function
- load a graph with chart.js and react
- Chartjs - show elements in all datasets on hover using bar chart
- Chartjs : Remove specific labels
- ChartJS Data Overflowing Chart area
- Possible to merge 2 bars in bar chart (chart.js)
- Is it possible to scale Chart.js background Image
- Chart.JS: Show custom labels permanentely on doughnut chart
- Change chart values from API
- Only 1 out of 2 ChartJS i showing
- Chart.JS: How can I only display data labels when the doughnut size is big enough for the text?
- Is it possible to generate multiple chart in Laravel using chartjs ? If possible please give the solution
- Chart.js automatic chosen scale value
- How to disable Chart JS tooltip when there is no value?
- Chart.js: How to change the x-Axes background color?
- Zoom and Pan in react-chartjs-2
- How to replay animation chart.js
- Chart.js dynamic updates with data from database
- ChartJS Annotation Hide /Show
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- Remove specific label
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- How to set the size of the arc in ChartJS?
- Uncaught TypeError: Cannot create property '_meta' on string
- chartjs creating data array dynamically
- Chart.js is not showing data
- Ionic 3 Angular component load listener
- Make Line Chart Dynamic From JSON File Using Chartjs
- How to pass dynamic string as dataset in charts.js