javascript - UnitStepSize for regular time interval with Chartjs -
i'm having troubles getting regular 15min time interval chart js graph. here setup of xaxis:
xaxes: [{ type: 'time', ticks: { maxrotation: 90, minrotation: 80 }, time: { format: 'hh:mm', tooltipformat: 'hh:mm', unit: 'minute', unitstepsize: 15, displayformats: { 'minute': 'hh:mm', 'hour': 'hh:mm' }, min: 1502521200000, max: 1502553600000 } }] x data timestamps: 1502521200000
incidentally, want data frame start @ 1502521200000 , finish @ 1502553600000 first data point doesn't have label: 
help
jsfiddle: https://jsfiddle.net/tn7ksfb6/
as @rc suggested remove min , max , actual step size working use stepsize instead of unitstepsize
let mybubbledata = [{},{},{},{},{},{},{},{},{},{},{},{"x":1502531100000,"y":0.5,"r":3},{"x":1502532000000,"y":0.5,"r":3},{},{},{"x":1502534700000,"y":0.5,"r":6},{"x":1502535600000,"y":0.5,"r":3},{"x":1502536500000,"y":0.5,"r":3},{},{"x":1502538300000,"y":0.5,"r":3},{},{"x":1502540100000,"y":0.5,"r":3},{},{},{"x":1502542800000,"y":0.5,"r":6},{},{},{},{"x":1502546400000,"y":0.5,"r":3},{},{},{},{},{},{},{},{}]; let ctx = document.getelementbyid('test'); let mybubblechart = new chart(ctx,{ type: 'bubble', data: { animation: { duration: 10000 }, datasets: [{ data: mybubbledata }] }, options: { responsive: true, title:{ display: true, text:'chart.js bubble chart' }, scales: { yaxes: [{ display: false, position: 'left', ticks: { min: 0, max: 1 }, gridlines : { display : false } }], xaxes: [{ type: 'time', ticks: { maxrotation: 90, minrotation: 80 }, time: { format: 'hh:mm', tooltipformat: 'hh:mm', unit: 'minute', stepsize: 15, displayformats: { 'minute': 'hh:mm', 'hour': 'hh:mm' } } }] } } });<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.bundle.min.js"></script> <body> <div> <canvas id="test"></canvas> </div> </body>
Comments
Post a Comment