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: example 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

Popular posts from this blog

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -