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
- Skip dates with no values in chart js
- Chart.js - how to have statis lables and populate with dynamic data?
- how labels in chartjs can make data invisible
- Flickering of charts and getcontext error with chartjs in the context of Vuejs
- Ng2-charts + How to customize the position of X axis labels?
- Hide gridlines in chartjs without the drawTicks
- How do I use NuGet to install ChartJS?
- Creating a diagonal shaded area in chart.js
- Type 'import("/@types/chart.js/index.d.ts")' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more
- Installing chartjs in project without npm, bower or CDN
- cant resize range of Y axis of chart in HTML/PHP
- How do you create an extension to Chart.js?
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- Change List<Object> into List<List<int>> using LINQ
- custom filter charts in chart.js
- how to show data label on barchart using chart.js in Angular10 project?
- Chart.js not working after Django deployment on Heroku
- Refencing a plugin in ChartJs.Blazor
- Chart.js is not displayed when page loads first time
- Dynamic rendering of chart with chartjs
- Chart.js horizontalBar customization
- How to add an input box next to Chart.js y axis label?
- How call a function when my array is filled
- How to plot a line chart in ChartJS?
- Chart.js Ionic 2 Angular2: Background color of bar graph not changing
- How do I change the grid line style on the Y axis in Chart.js?
- How to implement doughnut ChartJS with CodeIgniter 3 and display data from database
- ChartJS and Flask, how to pass data?
- Update all Chart.js instances in order to apply changed defaults?
- Chartjs line chart gets all scrambled up when an x value coincides with a label