The snippet below displays tooltip like Colin Cockram : 601118.076 with the currency symbol.
How can i append my 3rd <td> values in this tooltip ?
Need tooltip like Colin Cockram : 601118.076 - Survey : 891.
How can i achieve this ?
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2);
}
},
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable" style="display:none;">
<thead>
<tr>
<th></th>
<th> Test </th>
</tr>
</thead>
<tbody>
<tr>
<td>Gavin Leney</td>
<td>13592.400</td>
<td>39</td>
</tr>
<tr>
<td>Colin Cockram</td>
<td>601118.076</td>
<td>891</td>
</tr>
<tr>
<td>Alan Alker</td>
<td>152274.000</td>
<td>235</td>
</tr>
</tbody>
</table>
There is a better way to do this by making your data source as json objects rather than dataTable
Get your data to the chart using series
series: [{
data: [{
name: 'Gavin Leney',
y: 13592.400,
z: '39'
},{
name: 'Colin Cockram',
y: 601118.076,
z: '891'
},{
name: 'Alan Alker',
y: 152274.000,
z: '235'
}]
}],
and then you can get rid of your data
data: {
table: 'datatable'
}, //This is no longer needed as you are feeding data with series. Also, now you can get rid of your entire html for data table.
See the working code below: [NOTE: I have not added all the data in series.]
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2) +' - <b>Survey</b>: '+ this.point.z;
}
},
series: [{
data: [{
name: 'Gavin Leney',
y: 13592.400,
z: '39'
},{
name: 'Colin Cockram',
y: 601118.076,
z: '891'
},{
name: 'Alan Alker',
y: 152274.000,
z: '235'
}]
}],
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
My solution is quite hacky jQuery wise. It's not done via the recommended highcharts way but I don't have that much time on hand to read through their documentations.
This piece of code searches for the TD with the text of the current point in the chart and then hops over two spots to get the number in the 3rd td element. The text is then included in the tooltip formatter
$(function () {
$('#container').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Survey Reports Chart'
},
subtitle: {
text: ''
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Amount'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: \u00a3'+Highcharts.numberFormat(this.point.y, 2) + ', Survey: '+ $('td:contains("'+ this.point.name +'")').next().next().text();
}
},
plotOptions: {column: {colorByPoint: true}},
legend: {
enabled: false
},
credits: {
enabled: false
},
});
});
Related
I have tried several times using other examples available but still no luck
here's the code https://jsfiddle.net/mrbfqay6/
P.S: you just need to add a random amount in first input field and then click submit to generate graph. Thanks
function renderChart(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginRight: 20,
events: {
load: function() {
// nothing to do here right now
}
}
},
title: {
text: 'Some random data'
},
xAxis: {
tickPixelInterval: 50
},
yAxis: {
title: {
text: 'Value'
}
},
exporting: {"enabled":true},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
}, plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
name: ' Amortization',
data:amort_data,
}
,{
name: 'Saving',
data: wow_saving,
stack:'wow'
},
{
name: 'Financing',
data: lease_data,
stack: 'wow'
}
]
});
}
You have defined options for exporting twice:
chart = Highcharts.chart({
exporting: {
"enabled": true
},
...,
exporting: {
enabled: false
},
...
});
Which results in disabled exporting. You just need to enable it.
Live demo: https://jsfiddle.net/BlackLabel/na5rc2s9/
API Reference: https://api.highcharts.com/highcharts/exporting.enabled
I want to display real time data in highcharts from my MYSQL database, I have tried methods like setInterval and setTimeout and chart.redraw() but cant seem to make it work.
I have also tried the dynamic update chart in highcharts link is here : enter code herehttps://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/dynamic-update but cant seem to convert random data syntax to my database data. my code is :
<html>
<head>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js">
</script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js">
</script>
<link rel="stylesheet" type="text/css" href="/public/oi chart.css">
</head>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<script type="text/javascript">
$(document).ready(function() {
Highcharts.stockChart('container', {
options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
Highcharts.stockChart('container', {
rangeSelector: {
enabled: true,
selected: customRange,
buttons: [{
type: 'day',
count: 1,
text: '1D'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'week',
count: 2,
text: '2W'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
text: 'All'
}]
},
time: {
timezoneOffset: timezone
},
events: {
load: function requestData() {
$.ajax({
url: 'temp_chart.js',
success: function(points) {
var series = chart.series,
shift;
$.each(series, function(i, s) {
shift = s.data.length > 1;
s.addPoint(points[i], true, true);
});
setTimeout(requestData, 1000);
chart.redraw();
},
cache: false
});
}
},
title: {
text: 'Temperature',
},
subtitle: {
text: 'temperature in maharashtra',
},
yAxis: {
title: {
text: 'temperature'
},
resize: {
enabled: true
}
},
xAxis: {
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
marker: {
enabled: false
},
label: {
connectorAllowed: false
},
}
},
series: [{
name: 'Mumbai',
data: []
}, {
name: 'Pune',
data: []
}],
};
$.getJSON('temp_chart.js', function(json) {
data1 = [<% data array %>];
data2 = [<% data array %>];
$.each(json, function(key, value) {
data1.push([value[0], value[1]]);
data2.push([value[0], value[2]]);
});
options.series[0].data = data1;
options.series[1].data = data2;
chart = new Highcharts.stockChart(options);
});
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</html>~
Notice that the load callback should be nested in the chart.events object config. API: https://api.highcharts.com/highcharts/chart.events.load
in my code im trying to display all the enrolled students per year and i want to summarize them all in 1 column per year.
is there anyway to add filter or most likely in the code itselft to combine all the data per year?
var strCampus = "ORT";
$(function() {
$.getJSON("http://localhost:37590/Get_OGSData/" + strCampus, function(data) {
console.log(data);
Highcharts.chart('container', {
chart: {
type: 'column'
},
rangeSelector: {
selected: 1
},
title: {
text: 'On Going Students per Year'
},
subtitle: {
text: 'Click each column to see details'
},
xAxis: {
type: 'category',
categories: data.map(function(x) {
return x.YEAR;
})
},
yAxis: {
title: {
text: 'On Going Students'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
//format: '{point.y:.1f}'
}
}
},
tooltip: {
enabled: false,
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f}</b> of total<br/>'
},
series: [{
colorByPoint: true,
data: data.map(function(x) {
return x.OGS * 1;
})
}]
});
});
});
i want to combine all the data per year in 1 column
You can use dataGrouping with options below:
dataGrouping: {
approximation: 'sum',
forced: true,
units: [
['year', [1]]
]
}
Live demo: http://jsfiddle.net/BlackLabel/me3Lzur6/
API reference: https://api.highcharts.com/highstock/series.column.dataGrouping
well im with a problem with a Highchart Graphic. This one -> http://www.highcharts.com/demo/column-basic
I have a database with a table call "Days" and "Works" and i want to put the days that i have in the "categories []" and the work in series[];
BUT
i dont know how my JSON need to be, or the best way to do it is with a JS array
I tried this way:
js_array = new Array(<?php echo implode(',', $array1); ?>);
xAxis: {
categories: js_array,
crosshair: true
},
or just categories:<?php echo json_encode($array1);?>
but dont succeed.
can you help me?
I do this using asp.net (MVC5), but I think is the same idea for php, hope it helps.
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: "Client's downloads"
},
subtitle: {
text: 'Click the columns to view products.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total downloads'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
},
series: [{
name: "Downloads",
colorByPoint: true,
data: [
#foreach (var item in Model)
{
<text>{</text>
<text>name: "</text> #item.Name <text>",</text>
<text>y: </text> #item.Downloads <text>,</text>
<text>drilldown: "</text>#item.Name<text>"},</text>
}
]
}],
drilldown: {
series: [
#foreach (var item in Model)
{
<text>{</text>
<text>name: "</text>#item.Name<text>",</text>
<text>id: "</text>#item.Name<text>",</text>
<text>data: [</text>
foreach (var download in item.ProductDownloads)
{
<text>["</text> #download.Product <text>", </text> #download.Downloads <text>],</text>
}
<text>]</text>
<text>},</text>
}
]
}
});
});
</script>
I tried setting the min of the Y Axis to 1 as seen in my js fiddle here: http://jsfiddle.net/e2XPx/
Anyone know how to make the 0 value be 1 by default?
$(function () {
$('#container0').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Keyword: test'
},
xAxis: {
categories:['04-14-2013','04-15-2013','04-16-2013','04-17-2013','04-18-2013','04-19-2013','04-20-2013']
},
yAxis: {
allowDecimals: false,
min: 1,
title: {
text: 'Number'
},
reversed: true
},
series: [{
name: 'test',
data: [1,4,5,2,6,7,8]
}],
});
});
You can use tickPostitions: http://api.highcharts.com/highcharts#yAxis.tickPositions or tickPositioner http://api.highcharts.com/highcharts#yAxis.tickPositioner