hightchart Plotting variables Issue - graph

Question

I am stuck with highchart data. I have few variables in array format and in want to display them in tooltip of the chart but it is showing whole array instead of a single entity per record.
Here is my code:
$json['sales'] = array();
$json['xaxis'] = array();
$json['revenue'] = array();
$json['sales']['name'] = $this->language->get('text_products');
$json['sales']['type'] = 'column';
$json['sales']['data'] = array();
switch ($range) {
default:
case 'day':
$results = $this->model_report_sale->getSaleVsOptions($filter_data, $date=1);
foreach ($results as $key => $value) {
$json['sales']['data'][] = $value['quantity'];
$json['revenue'][] = $value['total'];
$json['xaxis'][] = $value['xaxis'];
}
break;
and my ajax call code is below:
$.ajax({
type: 'get',
url: 'index.php?route=dashboard/sale/getSale&token=<?php echo $token; ?>&range=' + $(this).attr('href') + '&filter_option=' + $('#option .active a').attr('href'),
dataType: 'json',
beforeSend: function() {
$('.salevsoption').find('.progress_loading_bar').fadeIn();
},
complete: function() {
$('.salevsoption').find('.progress_loading_bar').fadeOut();
},
success: function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'sale_vs_option',
type: 'line'
},
title: {
text: ''
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
categories: json['xaxis'],
crosshair: true
},
yAxis: [{ // Primary yAxis
labels: {
//format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Products',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.0f}'
}
}
},
tooltip: {
shared: true,
pointFormat: 'Products: <b>{point.y:.0f}</b><br/> Sales: <b>{point.revenue:.2f}</b>'
},
legend: {
layout: 'vertical',
align: 'left',
x: 360,
verticalAlign: 'top',
y: -15,
floating: true,
enabled: false
},
series: [
json['sales']
]
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
I have issue in tooltip section with {point.revenue:.2f}.
I get everything fine but didnot get revenue value in tooltip.
When i replace {point.revenue:.2f} with json['revenue'] it display whole array on each record of chart.

Answer 1

You will need to use formatter instead format API Doc
tooltip: {
formatter: function() {
return 'Products: <b>' + this.y + '</b><br/> Sales: <b>' + this.point.revenu + '</b>'
}
}
Fiddle