Highcharts Plot Cross Values ​​for Column Height

Question

I am trying to build a categorical multi-axis chart of ranking columns. Ratings number 1 should be the highest column, and the lowest rating - the shortest.

Essentially, I would like the height of the bar to be mutual.

It is very close to:

var player_name_array = ["Aaron Rodgers", "Andrew Luck", "Drew Brees", "Russell Wilson", "Peyton Manning", "Ryan Tannehill", "Tony Romo", "Matt Ryan", "Cam Newton", "Ben Roethlisberger", "Eli Manning", "Philip Rivers", "Colin Kaepernick", "Teddy Bridgewater", "Marcus Mariota", "Matthew Stafford", "Robert Griffin III", "Joe Flacco", "Jay Cutler", "Sam Bradford"]; var series_array = [{"name":"espn_ranking","data":[38,33,63,64,67,95,75,85,96,76,999,999,999,999,999,999,999,999,999,999]}]; rankings_chart = new Highcharts.Chart({ chart: { renderTo:'rankings_chart', type: 'column' }, title: { text: 'Draft Rankings' }, subtitle: { text: 'Source: The Internet' }, xAxis: { categories: player_name_array, crosshair: true }, yAxis: { type: 'logarithmic', //reversed: true, title: { text: 'Draft Rankings' } }, tooltip: { headerFormat: '<span style="font-size:14px"><b>{point.key}</b></span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { series: { stacking:'normal', }, column: { pointPadding: 0.2, borderWidth: 0 } }, rangeSelector: { selected: 1 }, series: series_array }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <div id="rankings_chart" ></div> 

The problem with this is that the columns go down from the top, and ranking 1 is still the smallest column.

Is it possible to add a function for the height of each column?

Answer 1

Set your data as inverse to the ranking of players:

 var rankings = [38,33,63,64,67,95,75,85,96,76,999,999,999,999,999,999,999,999,999,999] var inv_rankings = []; for (i = 0; i < rankings.length; i++) { inv_rankings[i] = 1 / rankings[i] } 

Set your Highcharts data as your early rating:

 series: { name: "espn_ranking", data: inv_rankings } 

Use the formatter for data labels and tooltips to return the opposite (that is, the original value):

 plotOptions: { series: { dataLabels: { enabled: true, formatter: function() { return 1 / this.y; } } }, tooltip: { pointFormatter: function() { return 1 / this.y; } } } 

Working violin

Answer 2

It was an interesting and fascinating puzzle!

I thought the nagyben answer was great , and I based my code on a method of accessing the results to get a relative rank.

Here we have created a working script based on this concept, as well as several improvements that I have shared below: https://jsfiddle.net/brightmatrix/j4ug40qm/

• I added a sorting function to rank the data in descending order, regardless of how the data was located in the original two arrays. To do this, I first combined both arrays into a single Javascript object.
• I changed the format to a column (vertical) to a chart (horizontal). This will make player names more readable for your users.
• I updated the tooltip to show the player rating when the user hovers over a specific panel.
• I deleted some chart elements that are not needed in this type of chart, such as legend, grid lines and axis labels (since you just rank, the true value of each bar is not related to the user).

Here is the sorting code I built into this:

 // combine both arrays into a single object so we can then sort them by rank var rankArray = []; $.each(player_name_array, function(index) { tempArray = {}; tempArray['name'] = player_name_array[index]; tempArray['y'] = 1 / series_array[index]; rankArray.push(tempArray); }); // sort the objects by rank (the "y" value) in descending order (due to the inverse) // see accepted answer by Stobor at: // http://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects rankArray.sort(function(a, b) { return parseFloat(by) - parseFloat(ay); }); 

And here are the updated chart options:

 rankings_chart = new Highcharts.Chart({ chart: { renderTo:'rankings_chart', type: 'bar' // chose a bar vs. column chart so the player names are easier to read }, title: { text: 'Draft Rankings' }, subtitle: { text: 'Source: The Internet' }, legend: { enabled: false }, // there is no legend needed for this chart xAxis: { type: 'category', tickmarkPlacement: 'on' // place the lines directly on the player name }, yAxis: { // we're measuring by rank, so there no need for labels, gridlines, or a title labels: { enabled: false }, title: { enabled: false }, gridLineWidth: 0 }, tooltip: { pointFormatter: function() { // show the rank of the player, based on their sort order return 'ranked #' + parseInt(this.x+1); } }, plotOptions: { bar: { groupPadding: 0.1, pointPadding: 0.2, borderWidth: 0 } }, series : [{ name : 'Draft Data', data : rankArray // our array will look like this: [{name: 'NAME', y: 0}, ...] }] }); 

Here is the result:

I hope this has been helpful to you in converting your charts.

Answer 3

Since you seem to have already set an upper limit of 999 for your data, I would suggest just building 1000-x.

One way to do this is to allow high-frequency diagrams to do the math in functions for the series:

 series : [{ name : 'Draft Data', data : (function () { // generate an array of random data var data = []; for (var x = 0;x <= series_array.length; x += 1) { data.push([ 1000-series_array[x]; ]); } return data; }()) }] 

JSFiddle: http://jsfiddle.net/hmjnz/4/

In this case, I would hide the yaxis shortcut and place annotations in the columns with the rank instead.

As an alternative, I would discuss whether the column chart is an adequate representation for this data type.