Home  >  Q&A  >  body text

How to get date and time in point height chart?

<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粉848442185P粉848442185437 days ago479

reply all(1)I'll reply

  • P粉026665919

    P粉0266659192023-09-01 11:22:00

    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

    reply
    0
  • Cancelreply