How to get date and time in point height chart?
P粉848442185
P粉848442185 2023-08-31 23:02:00
0
1
509
<p>I draw tall charts on the page. This works great but I have a small problem, it seems to me that when I hover over it I don't get the date and time. </p> <p>This is what my json looks like:</p> <p><code>[{"measurement value":"measurement value","date":"date","data":["9/5/2022",14.6,"9/5/2022" ,14.8,"6 -9-2022",15.948,"2022/9/6",17.112,"2022/9/6",</code></p> <p>My chart looks like this:</p> <p>You see the balloon on the left, it shows the number 0: 14.6.14.6 is the value, which is fine, but 0 is a number for that value, like another point, giving </p> <p>But how do I display the date and time that the number in the balloon belongs to?</p> <p>我的图表代码是这样的:</p> <pre class="brush:php;toolbar:false;">$.getJSON("mfrmetingen300RG.json", function(data) { const processedData9 = []; for (let a = 0; a < data[0].data.length; a = 2) { processedData9.push([data[0].data[a], data[0].data[a 1]]); } data[0].data = processedData9; avg = <?php echo $rowj[0]; ?>; StDev = <?php echo $rowj[1]; ?>; Aantalwaarden9 = <?php echo $rowj[2]; ?>; //Cp=(USL-LSL)/(6xstd.Dev) see.:https://www.easycalculation.com/statistics/learn-cp-cpk-calculator.php //Cpk = (USL-gemiddelde) / (3 x std.Dev) of (gemiddelde-LSL) / (3 x std.Dev) cpkl1 = (<?php echo $_cpkh10waarde; ?>-<?php echo $_cpkl10waarde; ?>)/(6*StDev); Cpk1High = (<?php echo $_cpkh10waarde; ?>-avg)/(3*StDev); Cpk1Low = (avg-<?php echo $_cpkl10waarde; ?>)/(3*StDev); chart9 = new Highcharts.Chart('container9',{ chart: { zoomType: 'x', type: 'line', marginRight: 130, marginBottom: 100, backgroundColor:'azure' }, rangeSelector: { buttons: [{ text: ' ', events: { click() { return false } } }, { text: '-', events: { click() { return false } } }] }, title: { useHTML: true, text: "Gemeten MFR waarde van PP 300R Grey Extrusie over de laatste " (Aantalwaarden9) " waarden.", x: -20 //center }, credits: { enabled: false }, subtitle: {text: 'Gem.=' avg.toFixed(2) ' Stdev=' StDev.toFixed(2) ' Cp=' cpkl1.toFixed(2) ' Cpk_High=' Cpk1High.toFixed(2) ' Cpk_Low=' Cpk1Low.toFixed(2) '',x: -20}, xAxis: { uniqueNames: false, type: 'category', title: { text: 'Datum' } }, yAxis: { "min":15, "max":23, title: { text: 'MFR' }, plotLines: [{ value: 0, width: 1, color: '#808080' }], plotLines: [{value: <?php echo $_cpkl10waarde; ?>,color: <?php echo $_color_min_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}}, {value: <?php echo $_cpkh10waarde; ?>,color: <?php echo $_color_max_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}}, {value: <?php echo $_cpkm10waarde; ?>,color: <?php echo $_color_guide_line; ?>,dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn'}}, {value: avg.toFixed(2),color: <?php echo $_color_avg_line; ?>,dashStyle: 'spline',width: 2,label: {text: 'Avg'}}, ] }, tooltip: { formatter: function() { return '<b>Meetwaarden</b><br/>' this.x ': ' this.y; } }, legend: {layout: 'vertical',align: 'right',verticalAlign: 'top', x: -100,y: 0,floating: true,borderWidth: 0}, series: data, plotOptions: { line: { dataLabels: { enabled: true } } }, }); chart9.legend.allItems[0].update({name:'MFR'}); }, 1000); });```</pre></p>
P粉848442185
P粉848442185

reply all(1)
P粉026665919

Because you have category type xAxis, your category name is contained in the point.key variable. So based on your example you only need to reference this.key

tooltip: {
  formatter: function() {
      return '<b>Meetwaarden</b><br/>'+ this.key +': '+ this.y;
  }
},

Simplified demonstration: https://jsfiddle.net/BlackLabel/87bousnL/

API Reference: https://api.highcharts.com/highcharts/tooltip.headerFormat

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template