It is currently Sat Oct 20, 2018 8:16 pm Advanced search

Adding a different legend name for each point

Technical support, bug reports and more.

Adding a different legend name for each point

Postby dustincharts » Fri Jul 27, 2018 6:05 pm

Hello

I am having trouble adding a different legend name for each data point on the vector plot in highcharts. Granted, the data on vector plot comes in like this:

series: [{
type: 'vector',
name: 'Sample vector field',
color: Highcharts.getOptions().colors[1],
data: [
[5, 5, 190, 18],
[5, 10, 185, 27],
[5, 15, 180, 36],
.....

However, it seems if I want to put a different name for each point the "data:" in "series:" needs to be formatted something like this:

series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {

Then when you hover over a point, the name appears. Unfortunately, for the vector plot, Highcharts only takes in the data with the 4 integer array.

Does anyone have any ideas on how to work around this setup? I've looked into putting categories in the x-axis and adjusting plotLabels, but I can't seem to find anything where when you hover your mouse over the point, the name appears.

Thanks
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Re: Adding a different legend name for each point

Postby rafalS » Sat Jul 28, 2018 11:30 pm

Hello dustincharts,

Actually data point in vector plot chart doesn't need to be the 4 integer array. It can be an object with, among others, name value. So we can name every single point like this:

Code: Select all
{
        x: 5,
        y: 5,
        name: "Sample name",
        length: 190,
        direction: 18
      }


Then we can display properly formatted tooltip using tooltip.formatter function:

Code: Select all
tooltip: {
    formatter: function() {
      if (typeof this.key === 'number') {
        return `${this.series.name}<br /><b>[${this.point.x}, ${this.point.y}]</b><br/>Length: <b>${this.point.length}</b><br/>Direction: <b>${this.point.direction}°</b><br/>`
      } else {
        return `${this.key}<br /><b>[${this.point.x}, ${this.point.y}]</b><br/>Length: <b>${this.point.length}</b><br/>Direction: <b>${this.point.direction}°</b><br/>`
      }
    }
  },


I named 2 points in the bottom left corner (hover over them to see their name): https://jsfiddle.net/kmd39487/

Or you can create 2 different series and name group of points: https://jsfiddle.net/x8rw6b5z/

API Reference: https://api.highcharts.com/highcharts/series.vector.data
https://api.highcharts.com/highcharts/tooltip.formatter

I hope this is what you've been looking for.

Best regards!
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 410
Joined: Thu Jun 14, 2018 1:40 pm

Re: Adding a different legend name for each point

Postby dustincharts » Mon Jul 30, 2018 3:24 pm

Thank you so much. This is exactly what I've been looking for. Much appreciated.
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Re: Adding a different legend name for each point

Postby dustincharts » Wed Aug 08, 2018 9:05 pm

Hey Rafal,

I was wondering if there was a simple way to display the name on the visualization without hovering over the arrow? So again, no hovering, just the name displayed right next to the associated arrow.
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Re: Adding a different legend name for each point

Postby rafalS » Thu Aug 09, 2018 9:54 am

Hi again,

Yes, there is a simple way. You can use plotOptions.vector.dataLabels for this: https://api.highcharts.com/highcharts/plotOptions.vector.dataLabels

Code: Select all
plotOptions: {
    vector: {
      dataLabels: {
        format: "{point.name}",
        enabled: true
      }
    }
  },


jsFiddle: https://jsfiddle.net/BlackLabel/8n6q5xym/

Best regards!
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 410
Joined: Thu Jun 14, 2018 1:40 pm

Re: Adding a different legend name for each point

Postby dustincharts » Thu Aug 09, 2018 3:44 pm

Rafal, thank you so much, you have been so incredibly helpful! You are truly a Highcharts API master. Thank you for your prompt and well-explained responses!

Best Regards!
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Re: Adding a different legend name for each point

Postby dustincharts » Thu Aug 09, 2018 4:18 pm

Hey Rafal,

So I thought I had everything all set, but I have one last missing piece to this puzzle; however, it is a difficult one.

Is there a way to get the actual length of the vector on the plot? According to Highcharts API:
"The length is the relative length of the vector compared to the other vectors. The actual vectors are then rendered so that the vectorLength option defines the pixel length of the longest vector, and the other vectors are relative to the longest vector."

However, for example, if I have two points (x1,y1) and (x2,y2) and then I use the distance formula to find the distance between the points. Is there a way to get the actual length, and not just the scaled version, so that the origin of the vector is (x1,y1) and the arrow then extends and touches the final point (x2,y2).

I realize this may not be possible, because this may not be innate to a type "vector plot"; however, if you do know a way to work around this, that would be fantastic. Thank you for your time!

Best Regards!
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Re: Adding a different legend name for each point

Postby rafalS » Fri Aug 10, 2018 1:18 pm

Hi again!

Thanks for your warm words! I'm glad i could help you.

Nothing is imposible with Highcharts ;)

In Highcharts, the real maximum drown vector's length is 20 - as you said, the rest of vectors are relative to the max real length. So we just need to look for maximum point's length (which in our data is 190), pick vector whose real length we want to calculate (for example this point's data length is 95), divide it's 95/190 which gives us a ratio (in this case 0.5) and multiply our ratio by real maximum length (which is 20). The result is 10. And it's true, because if the longest vector (190) is 20 real length, the vector we picked (95) is relative half length which is 10.

I don't know if I explained properly, but I hope you got it ;)

Here's a code:
Code: Select all
chart: {
    events: {
      load: function() {
        var chart = this,
          series = chart.series[0],
          points = series.points,
          vectorLength = series.options.vectorLength,
          lengthMax = series.lengthMax;
        points.forEach(function(point, i) {
          var pointLength = point.length,
            ratio = pointLength / lengthMax,
            pointRealLength = ratio * vectorLength;
          console.log(i + 1 + ". vector's real length is: " + pointRealLength);
        })
      }
    }
  },


Here you can take a look at online demo (and your console): https://jsfiddle.net/BlackLabel/cw1yh9La/

Have a good day!
Rafal
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 410
Joined: Thu Jun 14, 2018 1:40 pm

Re: Adding a different legend name for each point

Postby dustincharts » Fri Aug 10, 2018 4:21 pm

Hmm, I understand what you're suggesting, but I probably should've explained my data set better.

In the vector plot example data set, the maximum length is 190; however, I am working with a data set where the length ranges from 0-100 (length actually ranges from 0-5 not actually to 100). So since none of these length values are above 100 (which is the x and y axis limit), ideally I wouldn't want any of these values to be scaled or to be made a ratio of.

To provide a real example. I created a fake point [15, 65, 20, 80] where format is [x, y, length, direction]. Yes, the length is 20 and all other length values are between 0-5, but I don't want length 20 to be scaled. I would like the coordinates (15,65) aka (x1,y1) to be the 'tail' or base point of the vector, and then I would like the 'head' of the vector to extend actual length 20 in the 80 degree direction to reach (x2,y2).

I do understand what you mean by the real vector's length is 20, and the rest of the vectors are relative to this length so if 190 is equivalent to 20 on the plot, then yes 95 would be equivalent to 10 on the plot. However, in the point I just mentioned above, [15, 65, 20, 80], the length does not seem to be 20. In fact, the entire vector (tail to head) approximately looks like a length of 2 on the plot at best. The next greatest length in my dataset is 5 (all lengths range from 0-5 except this fake point I created to better see it)

I know this is a super long reply, and even after explaining it out myself, I realize adjusting the innate scaling ability of the Highcharts Vector Plot may not be reasonable, since this is a purposely, built-in feature of this specific plot. So regardless of the result, I am extremely grateful that you have followed up with my case. You have been so helpful throughout this conversation and represent Highcharts as a company very well.
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Re: Adding a different legend name for each point

Postby rafalS » Sat Aug 11, 2018 12:46 pm

Hmmm, I am still not quite sure what do you want to achieve, even after reading your message few times :?

However, in the point I just mentioned above, [15, 65, 20, 80], the length does not seem to be 20. In fact, the entire vector (tail to head) approximately looks like a length of 2 on the plot at best.

Compared to the longest vector (190), your vector [15, 65, 20, 80] has real plot length approximately 2. But it's because there is a longer vector (190) and shorter vectors are relative to this one. But I think you know this already.
Here you have an example, where [15, 65, 20, 80] vector is the longest, and others are relative shorter
https://jsfiddle.net/swuLkjmo/

Could you prepare a short demo or maybe send a picture of what do you try to achieve? I really hope and even believe, that we will manage this issue, but it needs to be explained well :)
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 410
Joined: Thu Jun 14, 2018 1:40 pm

Re: Adding a different legend name for each point

Postby dustincharts » Mon Aug 13, 2018 3:20 pm

Good Morning Rafal,

Sorry for the poor explanation. In the example you provided, I would like to have the [15, 65, 20, 80] vector extend 20 units in the 80 degree direction starting from [15,65].

I've attached the revised image below of what I would like it to look like. In the image, I want the length "20" to be actually 20 units in length. Head to tail 20 units in length.

If you look at the x axis, the x axis jumps from 0, 20, 40, 60, 80, 100, so the red line is just an approximate vector of what seems to be 20 units in length relative to the axes range.

I hope that makes more sense. I just don't want length to be scaled. So if I have a vector [0, 20, 100, 0], I want that vector to start at [0,20] and literally extend the entire plot horizontally so that the head of the vector is [100,20]. And if on that same plot, I have the [15, 65, 20, 80] vector, I don't want that vector's length to be scaled just because there is a much larger vector.

All of the vectors will have a length under 20. In fact many vectors have a very small length similar to the most recent jfiddle example you sent.

Thank you for responding so promptly. I hope this explanation and picture helps. Thank you!
Attachments
rafal.png
rafal.png (14.84 KiB) Viewed 146 times
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Re: Adding a different legend name for each point

Postby rafalS » Tue Aug 14, 2018 11:42 am

Oh, now I know what do you mean saying "length". I have been talking about length in pixels - so by default the longest vector can be 20 px length. But you have been talking about units length.

I think (and hope) the answer for your question is really simple. Try to experiment with this property: https://api.highcharts.com/highcharts/series.vector.vectorLength

jsFiddle: https://jsfiddle.net/BlackLabel/y15axj0q/

Best regards!
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 410
Joined: Thu Jun 14, 2018 1:40 pm

Re: Adding a different legend name for each point

Postby dustincharts » Tue Aug 14, 2018 3:51 pm

Rafal,

You are the absolute man! This is EXACTLY what I was looking for. Thank you, Thank you, THANK YOU! I was looking into vectorLength on Highcharts API docs, but I just never knew where to apply it, but you've revealed it to me perfectly! I hope you get promoted and achieve all your goals in life, because you deserve it. You have truly exemplified Highcharts versatility in this example.

I wish you the best. You have been a fantastic online mentor and true professional. Thank you!

Best Regards!
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Re: Adding a different legend name for each point

Postby rafalS » Tue Aug 14, 2018 6:27 pm

You're welcome! Thanks for appreciating :) I wish you the best too.

Rafal
Rafal Sebestjanski,
Highcharts Developer
rafalS
 
Posts: 410
Joined: Thu Jun 14, 2018 1:40 pm

Re: Adding a different legend name for each point

Postby dustincharts » Wed Aug 15, 2018 3:21 pm

Hey Rafal,

Okay so I know I said that was my last question, but if you have any time left in your schedule, I promise this is actually my last final question. I know this is my last question because everything is exactly as I need it - I didn't realize this detail until after I started playing with vectorLength numbers yesterday and the vectors got larger so I could see them better.

My last and final question, if you have time to answer, pertains to where the point (x, y) of the vector actually lies ON the vector. So for example, in the last jfiddle link you sent [15, 65] is currently lies on the midpoint of the vector. I was wondering if [15, 65] could lie on the tail of the vector.

I've attached an image below of what I'm referring to. Thank you again for all your help.
Attachments
Vector+Parts.jpg
Vector+Parts.jpg (56.26 KiB) Viewed 114 times
dustincharts
 
Posts: 10
Joined: Fri Jul 27, 2018 5:35 pm

Next

Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 1 guest