add to tooltip additional values from array

Question

well... I am new with HighCharts. I read all the post but I am still struggling how to show additional data on the tooltip.

I created a quick sample plotting a 2D chart, the first 2 columns are x and y, and the other 3 columns are additional information I want to display on the tool-tip https://jsfiddle.net/oscjara/0qnwxgsh/

Highcharts.chart('container', {
tooltip: {
  shared: false,
  headerFormat: '<b>{series.name}</b><br>',
  valueDecimals: 2,
  formatter: function() {
    return '<b>' + this.series.name + '</b><br>' +
      'X: ' + this.x + ' - ' +
      'Y: ' + this.y + '<br>'+
      'Z: ' + this.z;
  }
 },
  series: [{
      data: [
          [0,      29.9,    0.21,    125.54,    -0.2],
          [1.2,    71.5,    0.25,    254.01,    -21.2],
          [...,    ...,     ...,     ...,       ...]]
  }]
 });

The array is plot a 2D chart with additional information, it is not for a 3D chart or multidimensional plot.

Any help will be highly appreciated.

Core972 · Accepted Answer · 2019-05-03 14:30:42Z

2

You need to change the array of array to array of object

series: [{
  data: [
    {x:0, y:29.9, z:0.21},

Then you can refer to z using this.point.z

formatter: function() {
  return '<b>' + this.series.name + '</b><br>' +
    'X: ' + this.x + ' - ' +
    'Y: ' + this.y + '<br>'+
    'Z: ' + this.point.z;
}

Edit

To change the data :

data.forEach(point => {
  var coords = {
    x: point[0],
    y: point[1],
    z: point[2]
  };
  parsedData.push(coords);
});

Updated Fiddle

edited May 3, 2019 at 14:30

answered May 3, 2019 at 7:55

Core972

4,1143 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Core972 Over a year ago

@OscarJara, even if the data are prepared as an array of array you can change them to an array of object yourself.

Oscar Jara Over a year ago

sorry, I just realized I wrote half of the comment in english and half in spanish!!!... hahahaha... all comment in english: thanks @Core972. Well, the web-app prepares the data as an array for every point. I think will be less traumatic finding a way to add the info in the tooltip than re-arraying the data.

Oscar Jara Over a year ago

One sample I am working on has 1406 data points, adding the object name to the JSON format will increase significantly the amount of data transfer.However, do you have some samples I can follow in how to change to an array of objects?

Oscar Jara Over a year ago

getting closer @Core972... doing your suggestion I found the data point is already with an object as you suggested. Have a look of the image I took from console. looks like the array is already 0 to 4. is there a way you can index the position of the value on the array? github.com/oscjara/Samples/blob/master/responseData.png

Oscar Jara Over a year ago

another question... on line 15 parseData[] on your fiddle, how can I add that line to my data? the data set is coming as a parameter and I don't have control of it. github.com/oscjara/Samples/blob/master/endofarray.png sorry if I am not getting it quick, I am still learning.

Murtaza Hussain · Accepted Answer · 2019-05-03 08:47:12Z

please find the attached fiddle to render 3d data using hightchart.

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'scatter',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15,
      depth: 200,
      viewDistance: 5,
      frame: {
        bottom: {
          size: 1,
          color: 'rgba(0,0,0,0.05)'
        }
      }
    }
  },
  tooltip: {
    shared: false,
    headerFormat: '<b>{series.name}</b><br>',
    valueDecimals: 2,
    formatter: function() {
      return '<b>' + this.series.name + '</b><br>' +
        'X: ' + this.x + ' - ' +
        'Y: ' + this.y + '<br>' +
        'Z: ' + this.point.z;
    }
  },
  title: {
    text: 'Chart with rotation on angles  demo'
  },
  subtitle: {
    text: 'Test options by dragging the sliders below'
  },
  series: [{
    data: [
      [0, 29.9, 0.21],
      [1.2, 71.5, 0.25],
      [2, 59.9, 0.61],
      [3, 39.9, 0.11],
    ]
  }]
});


function showValues() {
  $('#alpha-value').html(chart.options.chart.options3d.alpha);
  $('#beta-value').html(chart.options.chart.options3d.beta);
  $('#depth-value').html(chart.options.chart.options3d.depth);
}

// Activate the sliders
$('#sliders input').on('input change', function() {
  chart.options.chart.options3d[this.id] = parseFloat(this.value);
  showValues();
  chart.redraw(false);
});

showValues();

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="height: 400px"></div>
<div id="sliders">
  <table>
    <tr>
      <td>Alpha Angle</td>
      <td><input id="alpha" type="range" min="0" max="45" value="15" /> <span id="alpha-value" class="value"></span></td>
    </tr>
    <tr>
      <td>Beta Angle</td>
      <td><input id="beta" type="range" min="-45" max="45" value="15" /> <span id="beta-value" class="value"></span></td>
    </tr>
    <tr>
      <td>Depth</td>
      <td><input id="depth" type="range" min="20" max="100" value="50" /> <span id="depth-value" class="value"></span></td>
    </tr>
  </table>
</div>

let me know if it helps.

Thanks :)

thanks @Murtaza for you help. However, the array I want to plot in the chart is 2D, not a 3D. the third and additional columns are more information I want to add into the tooltip.
Alright.. you did not mention about 2d before, but anyway ways you can still use the above solution and remove thr 3d config from highchart and let me know if that works

Oscar Jara · Accepted Answer · 2019-05-04 00:54:04Z

@Core972 thanks for the help... This is how I figured the indexation of the array to be able for the tooltip. @Murtaza thanks as well for the interest.

I set a loop to index the series and when x and y match, the additional values gets assign to a, b, c and d local variables.

        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            valueDecimals: 2,
            formatter: function() {
                var a, b, c, d;
                for (var i = 0; i < series.length; i++){
                    if( (series[i][0] === this.x) && series[i][1] === this.y)
                    {
                        a = series[i][2];
                        b = series[i][3];
                        c = series[i][4];
                        d = series[i][5];
                        break;
                    }
                }
                return  this.series.name + '<br>'
                        + 'x:' + x + ' y:' + y + '<br>'
                        + 'a:' + a + '<br>'
                        + 'b:' + b + '<br>'
                        + 'c:' + c + '<br>'
                        + 'd:' + d + '<br>'
            }
        },

Collectives™ on Stack Overflow

add to tooltip additional values from array

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related