Create graph in tooltip of highchart [duplicate] - javascript

This question already has an answer here:
Create chart in tooltip formatter
(1 answer)
Closed 8 years ago.
Have some data to display as column in highchart. The data is about registrations per month in columns.
Following is the link for jsfiddle:
http://jsfiddle.net/CkkbF/161/
In each tooltip of graph want to show another column chart.
$(function () {
// Registrations Data
var data ={10:{"Morning":2,"Afternoon":3,"Night":5},//Jan
12:{"Morning":2,"Afternoon":5,"Night":5},//Feb
15:{"Morning":5,"Afternoon":3,"Night":7},//Mar
17:{"Morning":8,"Afternoon":3,"Night":6},//Apr
18:{"Morning":2,"Afternoon":3,"Night":13}, //May
22:{"Morning":12,"Afternoon":3,"Night":7},//June
15:{"Morning":2,"Afternoon":8,"Night":5},//July
27:{"Morning":12,"Afternoon":11,"Night":4},//Aug
17:{"Morning":2,"Afternoon":5,"Night":10},//Sep
10:{"Morning":2,"Afternoon":3,"Night":5},//Oct
14:{"Morning":2,"Afternoon":4,"Night":8},Nov
24:{"Morning":12,"Afternoon":7,"Night":5},DEc
}
var series_data=[]
for (key in data) {series_data.push(parseInt(key))}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: series_data
}]
});
});
E.g. In above jsfiddle example
So on hover of Column associated with January data , it should show another column highchart in tooltip {"Morning":2,"Afternoon":3,"Night":5}.
i.e. In morning 2, Afternoon 3 and Night 5 registrations.
Any help how to achieve this.

To make a tooltip of a point contain another chart you need to do 3 things (I am sure there are other ways but this is the basic method). I do not remember where I pulled this from as it is not my code but it works:
1 First set up data to use for each point.
var data0 = [12, 12];
var data1 = [6, 12];
var toolTipData = [];
toolTipData.push(data0);
toolTipData.push(data1);
2 Then build a method to pull the appropriate data points out.
tooltip: {
useHTML: true,
formatter: function() {
var i = this.key;
setTimeout( function() {
$("#hc-tooltip").highcharts({
series: [{
data: toolTipData[i]
}]
});
}, 10)
}
},
3 Now you need to put the chart you just made into a container.
tooltip: {
useHTML: true,
formatter: function() {
var i = this.key;
setTimeout( function() {
$("#hc-tooltip").highcharts({
series: [{
data: toolTipData[i]
}]
});
}, 10)
return '<div id="hc-tooltip"></div>';
}
},
The setTimeout is used to smooth out the creation of the tooltip/chart. So, what we are doing here is creating an array (toolTipData) and populating it with the data (data0 and data1) that will be used for each point's tooltip chart. We access the toolTipData via the index of the point we are showing the tooltip for.

I'm not sure about having a chart inside the tooltip, but you can use HTML such as the following example from the API docs:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/footerformat/
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
}
No 100% sure how you would pass the data into it though...

Related

Set chart options when printing and add a footer

So I'm relatively new to highcharts, but I'd like to be able to take a chart and when we set it to print, which i've made the only available option, have the graphic be resized larger, increase the spacingBottom or maybe change the plot size, essentially i need to make space on the bottom and then add a label in this space.
I've figured out how to do the resize, and add the label with the events beforePrint() and afterPrint(), but the changing of the spacing on the bottom still eludes me. I've searched through the questions here, but all seem to be targeted at exporting, which I also tried, believing they were related, and they might be? I tried using the exporting.chartOptions, but that only seems to affect exporting and does nothing when we choose to print.
Thanks for any direction or help you can give.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
beforePrint: function() {
this.resetParms = [this.chartWidth, this.chartHeight, false];
this.setSize(600,400,false);
/*eventually if I ever get this to work this is how I'd add the text.*/
//this.myText = this.renderer.text('this is a test',10,350 ).add();
},
afterPrint: function() {
this.setSize.apply(this,this.resetParms);
/*if(this.myText) {
this.myText.destroy();
}*/
Highcharts.charts.forEach(function (chart) {
if (chart !== undefined) {
chart.reflow();
}
});
}
}
},
title: {
text: 'Hours'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Hours'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
exporting:{
buttons: {
contextButton:{
menuItems: null,
onclick: function () {
this.print();
}
}
}
},
series: [{
name: 'PY Admin',
data: [5, 3, 4, 7, 2,3,4,5,6,7,8,12],
color: '#85C1E9',
stack:'lyear'
}]
});
});
http://jsfiddle.net/cajmrn/jkv6jbh0/3/
Have you tried to update bottomSpacing property with the Chart.update() function on the beforePrint event? If yes, and it did not work, use update without redraw (second argument to false) and redraw chart without animation:
this.update({
chart: {
spacingBottom: 200
}
}, false);
this.redraw(false);
You could also, instead of setting spacing, set a new chart height minus the spacing you want to apply.
API Reference:
http://api.highcharts.com/highcharts/Chart.update
http://api.highcharts.com/highcharts/Chart.redraw
http://api.highcharts.com/highcharts/chart.spacingBottom
Examples:
http://jsfiddle.net/20r1z3kg/ - updating spacing
http://jsfiddle.net/xp0m4nbh/ - changing chart height with setSize()

How to show No Data Available Message in highcharts

Can we show a message using highcharts.When the data is not available? we have to show a message Example : No Data Available. If we have data hide : No Data Available message . in highcharts dynamically
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 0,
zoomType: 'xy'
},
});
Include no-data-to-display.js file in your page. It comes bundled with highcharts. You can get it here otherwise: https://code.highcharts.com/modules/no-data-to-display.js
Default message is "No data to display". If you would like to modify it, you can do this:
Highcharts.setOptions({
lang: {
noData: 'Personalized no data message'
}
});
You can use Highcharts Chart Renderer
Here's an example in JSFiddle
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: []
}, function(chart) { // on complete
chart.renderer.text('No Data Available', 140, 120)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
Some of these other answers seem kind of crazy... here's a super basic solution I wanted to share:
Highcharts.setOptions({lang: {noData: "Your custom message"}})
var chart = Highcharts.chart('container', {
series: [{
data: []
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div id="container" style="height: 250px"></div>
Hope this helps someone
Based on your comment (if we have data still showing no data available message so,can we hide in highcharts if we have data).I think you are using fustaki's solution and don't want to use no-data-to-display.js module. Yes there is problem as mentioned .You can still use the same code by modifying it i.e add condition inside continuing function to check if series is empty or not, based on this render message.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: []
}, function(chart) { // on complete
if (chart.series.length < 1) { // check series is empty
chart.renderer.text('No Data Available', 140, 120)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
}
});
Fiddle demo
For me with latest version it works like this:
const Highcharts = require('highcharts');
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
NoDataToDisplay(Highcharts);
Highcharts.setOptions({
lang: {
noData: 'No data is available in the chart'
}
});
With the current version (v7.1.2) and connected no-data-to-display module (v7.1.2) you can show your 'no data' message when you create a chart object as Patrik said by setting lang.noData option.
To be able to change this message after the chart is created you need to call method
yourChartObject.showNoData('you new message')
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
Highcharts.chart('container', {
lang: {
noData: "No data found"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px'
}
},
.
.
});
and then after series you should add:
lang: {
noData: 'Nessun dato presente'
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
and it will work just fine

Simple Bar Graph Doesn't Show Graph

I was planning to display a bar chart using HighCharts.js. But data in the series attribute was not displaying. See image below:
See my code below:
exec_dashboard_load_graph(
'exec_dashboard_collection_disbursement_graph',
response,
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
);
function exec_dashboard_load_graph(id,data, x){
var myChart = Highcharts.chart(id, {
chart: {type: 'column'},
title: {text: 'Annual Collection and Disbursement Summary'},
subtitle:{text: 'City Goverment of Butuan'},
xAxis: {categories: x,crosshair: true},
yAxis: {min: 0,title: {text: 'Amount (Peso Value)'}},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b> {point.y:.1f} Php </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},
series: data
});
}
The data variable contains the value below:
I wonder what's wrong with my data. Please help. Here's my jsfiddle.
It's because your numbers are in quotes, making them strings, and Highcharts doesn't know how to render the data as strings.
Changing them to numbers like so will fix it:
var collections = new Array(11242282.20,7966734.89,5936262.58,7903113.53,6527188.99,20639705.75,14359971.15,6861212.08,0,0,0,0);
var disbursements = new Array(117015425.13,151452477.46,182264161.40,218257774.81,188822327.59,209183652.51,15081727.17,204713881.30,0,0,0,0);
https://jsfiddle.net/nnfbcuzr/1/
Also, in case you don't have control over how the data is formatted, you could always convert the array over into ints first by using a function like this:
function parsValuesToInts(arr) {
var newArr = [];
for(var i = 0; i < arr.length; i++){
newArr.push(parseInt(arr[i],10));
}
return newArr;
}

force Highcharts redraw animation when changing graph type

I have a bunch of graphs that by default, come out as line graphs. I've added buttons to the side of my graph to allow the user to change it to a pie, bar, areaspline, or back to line.
When the user clicks the button, it runs this function:
function change_graph_type(moduleNumber, type) {
graph_type = type;
var chart = $('#graph' + moduleNumber).highcharts();
for ( i=0;i<chart.series.length;i++ ) {
chart.series[i].update({
type : graph_type
});
//chart.redraw(); //I've tried adding this here to no avail...
}
}
The code changes each series from e.g. - line to bar, or bar to areaspline, but I cannot figure out how to get the "animation" when the user toggles over to that new graph type, so it only runs the very first time the user generates the chart.
i tried many ways but there is no such function which fires animation after redraw
so created this below quick and dirty method which might help
http://jsfiddle.net/msekpj8m/
$(function() {
var chartOptions = {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
showEmpty: false
},
chart: {
type: 'column'
},
yAxis: {
showEmpty: false
},
series: [{
allowPointSelect: true,
data: [ // use names for display in pie data labels
['January', 29.9],
['February', 71.5],
['March', 106.4],
['April', 129.2],
['May', 144.0],
['June', 176.0],
['July', 135.6],
['August', 148.5], {
name: 'September',
y: 216.4,
selected: true,
sliced: true
},
['October', 194.1],
['November', 95.6],
['December', 54.4]
],
marker: {
enabled: false
},
showInLegend: true
}]
};
var container = $('#container');
container.highcharts(chartOptions);
// Set type
$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function(i, type) {
$('#' + type).click(function() {
container.highcharts().destroy();
chartOptions.chart.type = type;
container.highcharts(chartOptions);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="column" style="margin-left: 2em">Column</button>
<button id="line">Line</button>
<button id="spline">Spline</button>
<button id="area">Area</button>
<button id="areaspline">Areaspline</button>
<button id="scatter">Scatter</button>
<button id="pie">Pie</button>

Making y axis of highcharts in time format hh:mm

I need to put in y-axis time format hh:mm, for example y-axis should have 16:00,32:00 and etc. ticks or smth simmilar.
I've been working with highcharts - I'm new with JS and web-programming.
I have my data in miliseconds and convert it to hh:mm format, but when I have miliseconds more than 86400000 (24 hours) it shows me next date and I need it to be still displayed in hours:minutes format. Is there any way to do it? I've tried to change y-axis from type: 'datetime' to type: 'time', but it didn't help me alot.
Here is jsfiddle example of my charts and bellow you can find just js-code.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
title: {
text: 'Time (hh:mm)'
},
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H:%M'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]
}]
});
});
So here is the answer that I've got if anyone need it (here is the link to jsfiddle).
I set the time variables in ms:
data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]
And then I format this value as I need:
yAxis: {
title: {
text: 'Time (hh:mm)'
},
labels: {
formatter: function () {
var time = this.value;
var hours1=parseInt(time/3600000);
var mins1=parseInt((parseInt(time%3600000))/60000);
return hours1 + ':' + mins1;
}
}
}
That's the only way I found to make y axis in pure hh:mm format. Also you can make the data not in ms, but in w/e you want or need.
then better use your own formatting method, here you will have more control on formatting. you can use formatter as shown below.
yAxis: {
labels: {
formatter: function () {
//get the timestamp
var time = this.value;
//now manipulate the timestamp as you wan using data functions
}
}
}
hope this will help you in achieving what you needed.

Categories