Questions about the usage of line charts

[Big-Gremlin]

Hey,

after the mail conversation with Tanner and Evert, I will put the mails to this issue.

Today I tried ChartJS 2.0 (Beta 2 and current dev).

I want a time scaled line chart with dynamic data. That works fine, but the chart is not perfect.

First Question
The xAxes has a min value of -150 and a max value of -50. ChartJS decides how many labels are will be shown.
What I need, is an option to set the maximum axis labels, like: "maxLabels: 5"
Or manually like "shownLabels: [-50, -75, -100, -125, -150]"

I need the same for the yAxes. In this case I want to restrict the time values in 4 or 5 labels.
The first point should define the start of the time scale and the last Point should finish the time scale.
I need to round the values to every 10 seconds, like in the picture (That was a coincidence. :) )

Second Question
How can I scale the radius of the point? I know how it works with the hover points.

Third Question
Is it possible to disable a dataset after initialization?

Final Question
AS you can see, the last data points are lower than -150. Is it possible to cut the rendered line at the bottom?

BTW: Bug?
The maxRotation was set to 0, but the labels are rotated.

Last but not least, my definition:

var data = {
   labels: [ new Date()
       ],
   datasets: [{
       label: "Signalstärke",
       fill: false,
       backgroundColor: "rgba(220,220,220,0.2)",
       borderColor: "#6ABCED",
       borderWidth: 1,
       pointBorderColor: "#0e4a80",
       pointBackgroundColor: "#fff",
       pointBorderWidth: 1,
       pointHoverRadius: 5,
       pointHoverBackgroundColor: "#fff",
       pointHoverBorderColor: "#0e4a80",
       pointHoverBorderWidth: 2,
       data: []
   }]
};

var options = {
   animation: false,
   responsive: true,
   maintainAspectRatio: false,
   tooltips: {
       enabled: false
   },
   scales: {
       yAxes: [{
           type: 'linear',
           ticks: {
               min: -150,
               max: -50
           }
       }],
       xAxes: [{
           type: 'time',
           ticks: {
               fontSize: 10,
               maxRotation: 0
           },
           time: {
               format: false,
               unit: false,
               displayFormats: {
                   'millisecond': 'HH:mm:ss',
                   'second': 'HH:mm:ss',
                   'minute': 'HH:mm:ss',
                   'hour': 'HH:mm:ss'
               },
               // Sets the display format used in tooltip generation
               tooltipFormat: ''
           },
           ticks: {
               maxTicksLimit: 11
           }
       }]
   }
};

var definition = {
   type: 'line',
   data: data,
   options: options
}; 

[Big-Gremlin]

Answer from Evert:

I think I can answer your questions:

1. Number of Steps
Using the latest version from the v2.0-dev branch you could change the ticks.fixedStepSize option and set it to 25 to achieve the desired step size. Note that this parameter was not available in v2.0.0-beta2.

2. Point Radius
To change the point radius, you can add the following to your config to change the radius of all points

elements: {
    point: {
        radius: <your new radius here>
    }
}

I looked in the source, you could also set the radius property of a dataset to be the radius you'd like. If this property is a number, it applies to all points in the dataset. If it is an array, the first point gets the first radius, the second point gets the second radius, etc. If there are more points than specified radii, the last element in the radius array is used for all subsequent points. Not documenting this is an error on our part.

3. Disabling a dataset
This is possible. On the dataset object, add a property named 'hidden' and set it's value to true. You'll need to call 'update()' on the chart after doing this.

4. Line Clipping
This is currently a known issue :( I investigated using the canvas clipping methods but the performance is not great. The alternative would be to figure out where the line intersects the edge of chart area and stop it there. When the lines are straight this is easy. When they are bezier curves it's more complicated.

5. Max Rotation
If the labels were rotating when the maxRotation was 0 that's definitely a bug. Please file a Github issue for it.

Hopefully this is helpful.
-Evert

[Big-Gremlin]

My last Mail to Evert:

Hey Evert,
Thank you very much for your solutions and fast answer. :)

This is my current chart:

1. Number of Steps
That works fine on yAxes.

But how can I do it on my time scaled xAxes?

My dataset has Date-Objects, but it would be no problem, if I change it to timestamps.

The number of steps is possible with "maxTicksLimit", I know.

But there is not the same step size.
The second time should be 09.17:22

BTW: It would be nice if the timescale can look like the chart in question 6. Maybe every 10 seconds a step and a range of 1 minute. In my small chart every 30 seconds.

I mean
08:55:10 -> 08:55:40 -> 08:56:10
and not
08:55:12 -> 08:55:42 -> 08:56:12

But this would be only nice to have. :)

1.1 Line ends with last point
As you can see, the last point is not the end of the xAxes. How can i fix that? :)

2. Point Radius
Works and looks great. :)

3. Disabling a dataset
Works fine. I put the phidden propety in my initial options. :)

4. Line Clipping
I think I can try this without an bezier curve till this issue is fixed.

5. Max Rotation
This is no bug. That was an failure of mine. The problem was, I have set the "ticks" property twice. The second setting has overwritten the first setting.

       xAxes: [{
           ...
           ticks: {
               fontSize: 10,
               maxRotation: 0
           },
           ...
           ticks: {
               maxTicksLimit: 11
           }

---

I forgot something:/

6. Cuttet Line
Is it possible to make something like this? (This is the current Chart (Flotchart), which I want to replace with ChartJS :) )

7. Moment.js
Sometimes the console will show the following warning:

"Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at http://momentjs.com/"

But "Moment.js" is already included. If I press F5, the warning is away. If it is a bug, I will create an issue.

Greetings

[etimberg]

@Big-Gremlin i'll reply here

Q1

You can change the time.min and time.max settings like the min and max settings on the y axis.

Your axis config would look like

{
    time: {
        min: <min>,
        max: <max>
    }
}

The last vertical grid line not at the right edge is to allow the text to fit properly.

Q6

This is possible. If you put a NaN into your data it will cut the line (I think flot uses null if I recall correctly).

Q7

This sounds like a loading order issue. Is moment loaded before Chart.js?

[Big-Gremlin]

@etimberg
Thank you very much :)

This is my current chart, nearly perfect...

Q1

The time range works, but the representation is not correct. In this example the last point should be at 13:36:46 (01:36:46 PM), but it is before the vertical line.

In the right yAxes I need other Labels.

Q6

As you can see, it works. :)

Q7

Yes, it is loaded before Chart.js.
Maybe in my case, it can be fixed, if I use the bundle version.

Q8

The final thing I need, are other labels for the right yAxis.

1: one
2: two
3: three
...

Currently the data values are 1,2,3,...,undefined
If it is necessary, I can convert the current values to Strings.

[etimberg]

Q1

Hmm, not sure why the line isn't drawn in the right spot. Is it possible to post a fiddle for this?

Q8

You can definitely format the axis labels. To do show, you can set up your config similar to what is below. Not the cleanest, but it's a starting point.

scales: {
    yAxes: [{
        <left axis config here>
    }, {
        position: 'right',
        ticks: {
            callback: function(tick, index, ticksArray) {
                if (tick === 1) {
                     return 'one';
                } else if (tick === 2) {
                     return 'two';
                } else if (tick === 3) {
                     return 'three'
                }

                return '';
            }
        }
    }]
}

[Big-Gremlin]

@etimberg
Here is my fiddle:

https://jsfiddle.net/vymjsfhj/ (Link updated)

I added tooltips with the correct time of every point.

The problem is, the max property of the time scale.
If you remove this property, the xAxis will be shown correctly:

But I need the max value, becaue the last point should by on the right side of the chart.

[etimberg]

@Big-Gremlin I'll look into the max property causing an error. This looks like a bug

[etimberg]

@Big-Gremlin is your fiddle correct? It looks like a pie chart ...

[Big-Gremlin]

@etimberg
ahh damned... I copied the wrong url...

I'm sorry. :)

https://jsfiddle.net/vymjsfhj/

[etimberg]

@Big-Gremlin no worries :) I can reproduce it now, hopefully it won't be too hard to debug

[etimberg]

@Big-Gremlin I fixed the max error in #2101