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
- Datalabels not showing on Chart.js
- Chartjs! How to remove datalabel when value is 0
- yAxis labels are being cut off in ngEchars (Echarts)
- Stacked bar chart with rounded corner of bar using Chart.js
- how to add tool tip in yii-chartjs extension
- How could I skip drawing empty/zero value and its value on tooltip
- Charts.js line chart: Show the most recent date on x-axis when setting ticks.maxTicksLimit
- how do I change the textsize in of doughnut in react-chartjs-2?
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- Changing color of specific chartjs point
- Chart.js v3.x time series on x axis
- how labels in chartjs can make data invisible
- Want to draw data using chartjs in django
- Angular Chartjs Overlapping Bar Chart with Chartjs ver 2.7
- Tooltips not working in chart.js. Any ideas?
- How do I increase the arrow length on the pie chart in Charts.js?
- How to load page containing Chart.js using jQuery
- Building Chart.js master - generated .js gives errors
- ChartJS: How to dynamically create data arrays
- Vue + chartjs : Nearest point on hover tooltip not working
- how can i modify scale labels in angular chart js?
- ChartsJS get value of Data/Dataset Label for Tooltip
- Chart.js -> Displaying % on pie chart
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- chart js and json, chart not showing up
- chartjs - how do I add border radius on bottom corners
- How to create a Doughnut chart in django admin interface using foreign key field data?
- Chartjs, plot data based with unequal time intervals
- Displaying Chart with data retrieved from Entity Framework in Controller
- cartjs tooltips displays in the wrong place on a chart