0

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
          },

        }
      ]
    }
  }
});
Seabizkit
  • 2,417
  • 2
  • 15
  • 32

1 Answers1

1

You should be fine when you add 

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

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

HeadhunterKev
  • 1,728
  • 5
  • 13
  • getting so close https://jsfiddle.net/a2s9deLj/, thx will work on more later, this is probably the accepted answer.. – Seabizkit Jan 17 '20 at 11:40
  • probably better to do some sort of scatter chart to represent this type of day https://www.chartjs.org/samples/latest/charts/scatter/basic.html – Seabizkit Jan 17 '20 at 11:44
  • Depends on what you want to have. I'm not sure how you want to represent the values. – HeadhunterKev Jan 17 '20 at 11:51
  • Yeah, if you want only one data per dataset, then a scatter chart would be better. If you want a line between them, put them in one dataset in a line chart. – HeadhunterKev Jan 17 '20 at 11:54
  • to give context... im trying to show, run time vs amount processed. I'm processing data lines, and I record the amount of time it takes and the amount of rows processed... what I'm trying to show is some sort of fancy graph, which shows per run the amount of time taken vs rows processed. Building an app which im trying to point out as a selling point is the amount of time it takes... (quick) ..trying to show this in a visual way. – Seabizkit Jan 17 '20 at 11:54
  • I think it tricky to show this type of data, as there are lots of variables involved. volume is dynamic and the load on the server is also dynamic, trying to find the best way of presenting information to consumer that it took a should period of time. – Seabizkit Jan 17 '20 at 12:00
  • I could perhaps could color code the points which are the same source , which then would give more context. – Seabizkit Jan 17 '20 at 12:03
  • i guess the hardest part is if my values vary between 0 > 1min and 95% of them are in the less than 3 secs range, to get the graph to display this, is very hard, as you want lots of space for 0....3 and then less 3< 1min, do you know if that possible. – Seabizkit Jan 17 '20 at 12:09
  • You should use one dataset per source which you want to color code. You can easily change colors per dataset. And you can't set a specific space between these points. The only option you have is a category axis with the same spacing between all points or a logarithmic cartesian axis. – HeadhunterKev Jan 17 '20 at 12:14
  • `You should use one dataset per source which you want to color code` the data wouldn't show correctly then, as its not part of the same run just same source, ie processing the same file twice appose to to different files. I know the chart can scale to leave out ranges so it displays nicely, but is it possible to say hone in on 0-1 secs and then auto scale the rest. dont thnk it is, so instead figure out how to get scrolling working.. so i can set the scale at something like .5 secs, and then when its say 55 secs or more, it would be scrolling to see the data point, hope that make sense – Seabizkit Jan 17 '20 at 12:22
  • OK, you know what's best. For the scale I don't think I can help you any more. Bat that's another problem you can find information online or ask another question about this problem. – HeadhunterKev Jan 17 '20 at 12:39
  • no maybe i was wrong, the thing is for it to be meaning full it should be grouped, so i guess maybe it does may sense to have 1 per source, I need to think about the data more but thank you for you assistance with what i was wanting at that point in time. – Seabizkit Jan 17 '20 at 14:09
  • Three years ago @Seabizkit wrote: "...there are lots of variables...volume...load on server" -- in most circumstances like this using time as your axis is much more valuable...because you can view multiple data points across the same point in time. – Jan Nielsen Feb 11 '23 at 00:13