Chartjs show seconds on the x axis and volume on the y

Question

I would like to show y as time and x and volume of something

I basically if it takes 8.5 secs to do say 10 000 volume or 1000 000

I would like to have time on the x axis and volume on the y axis.

Time is not relative to a date, its time as in ticks, so its 0 start.

struggling to find a gd example to work from,

I have done quick POC's but seems like there should be and easier example to base my work from.

aka i believe i need to do some calculation to get the ranges, but even if i had the ranges unsure which chart type and setting would be best fit.

I want to display labels to the bottom displaying time in ms/s

[0,100,200,400, 800, 10000, 15000] ms - could then try some formatting options for divide by 1000 for secs.

strarted https://jsfiddle.net/co43r6ef/ but again seems like wrong direction.

also toying with but also seems iffy also wrong direction, is anyone else able to point me to an example... i can leverage.

to clarify it should start at 0 and move forward in time along x to the peek.

So when looking at the chart u can look at the peek and under it with a line going down it should be the time taken.

// var labels = []
// var tickms = 325362132 / 10000;

//   for (let i = 0; i < tickms ; i++) {
//    if (i%1000 === 0) {
//  labels.push(i)
//    }
//   }
var ctx = $("#canvas")[0].getContext("2d");
var data = {
  datasets: [
    {
      label: "Scatter Dataset",
   //   labels: labels,

      data: [
        { x: 0, y: 0},
        { x: 10, y: 1000 },
        { x: 20, y: 2000 },
        { x: 30, y: 3000 },
        { x: 40, y: 6000 },
        { x: 50, y: 8000 },
        { x: 1066, y: 10000 }
      ]
    }
  ]
};

var myLineChart = new Chart(ctx, {
  type: "line",
  data: data,
  options: {
    scales: {
      xAxes: [
        {
          scaleLabel: {
            display: true
          },

        }
      ]
    }
  }
});

Answer 1

You should be fine when you add

options: {
  scales: {
    xAxes: [{
      type: 'linear'
    }]
  }
}

Here's an example: https://jsfiddle.net/1sxrtcw5/1/