We Keep Coding

Chartjs - destroy() does nothing

I've got a problem with chartJS. I'm calling a function to create a new chart. The creation works, but I would like to destroy any previous charts, so that I get a new one when calling a function.
This is my code at the moment:
var chartID;
function addData(chartType,data) {
for (var i = 0; i < data.length; i++) {
dataLabels.push(data[i][0]);
dataPoints.push(data[i][1]);
//console.log(data[i][1]);
}
if(chartID){
console.log('destroy');
chartID.destroy();
}
var ctx = document.getElementById('chart01').getContext('2d');
chartID = new Chart(ctx, {
type: chartType,
data: {
labels: dataLabels,
datasets: [{
label: 'Labels',
data: dataPoints,
backgroundColor: '#333'
}]
},
options: {
maintainAspectRatio: false,
aspectRatio: 1
}
});
}

Even I had the same issue earlier. I simply added a condition to check the chart variable is empty or not.
if(chartID != null){
chartID.destroy();
}
Include this at the top of the function. It'll work fine as you are declaring chartID globally. This way you don't need to redeclare the chart again.

Try this:
const chartCanvas = document.getElementById('myChart');
if( window.lineChart != undefined){
window.lineChart.destroy();
}
window.lineChart = new Chart(chartCanvas,{
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Cases',
data: [23,42,22,45,56,77,33,22,46,77,32,44],
fill: false,
// backgroundColor: 'red',
borderColor: ['rgb(255, 255, 0)'],
lineTension: 0.2,
borderWidth: 1.5
}
]
},
options:{
title: {
display: true,
text: "Temperature variation",
fontFamily: 'Arial',
fontSize: 16
},
legend: {
display: true,
position: "right",
labels: {
boxWidth:10
}
},
//stacked - start with 0 as minimum value for y-axis
scales:{
yAxes: [{
stacked: true,
gridLines:{
display: true,
color: '#FFFFFF',
lineWidth: 1,
zeroLineColor: 'blue',
zeroLineWidth: 2,
drawBorder: false // this to remove the ghost line that appears
// when you add zeroLine x-axis
}
}],
xAxes: [{
gridLines:{
display: true,
zeroLineColor: 'blue',
zeroLineWidth: 1,
color: 'transparent'
}
}]
}
}
});
----------------- Added code sample above ------------------
I had some issues with ChartJs. Somehow, it created a new chart with the previous chart still in the canvas which shows up when you hover.
This worked for me:
if( window.chartID!= undefined){
window.chartID.destroy();
}
chartID = new Chart(ctx, {...});

I am creating multiple charts on click.
but before creating chart I just destroy any previous charts
so , thats how it looks
var chartStatus
// on one onclick
if (chartStatus) { chartStatus.destroy(); }
chartStatus = new Chart(document.getElementById("co2Chart"), co2Config);
// on another onclick
if (chartStatus) { chartStatus.destroy(); }
chartStatus = new Chart(document.getElementById("tempChart"), tempConfig);

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()

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.

highchart: add images to top of chart on every column

Does anyone know if it's possible to create something like this in Highcharts:
It's about the weather icons on the top. I added them as a "scatter graph" which is nice, so the images/graph can be disabled. But I want them always at the top. For example: y=20px or something. Is it possible to do this with Highchart? I know set their data to "30 celcius" but that would mess up the graph if it the temperature would go up to 30 degrees.

You can use a trick of having two x-axes, one with images and offset'ed to the top of the chart and one with the usual labels at the bottom:
xAxis: [{
offset: -290,
tickWidth: 0,
lineWidth: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> ';
}
}
}, {
linkedTo: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
Full example on jsfiddle

I found a solution by chance because of a logging code I forgot to remove. You can access the data inside the method formatter using "this":
...
plotOptions: {
series: {
dataLabels: {
useHTML: true,
enabled: true,
x: -50,
y: -50,
formatter: function(){
console.log(this);
return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />';
},
}
...
This code surely isn't working, but shows up the idea, doesn't it?
Hope it helps!

Given that highcharts is just SVG you can always go directly and manipulate the SVG to show the images you want, usually with just CSS. You can inspect the chart with Chrome's web inspector and find the elements you want to style. I have to warn you though that having customized highcharts myself in the past has made upgrading to newer versions difficult.

You can add another scatter plot to your series that contains specific markers: http://jsfiddle.net/ZZ7Kd/135/

You can use Renderer.image() to add images in any place on chart
http://api.highcharts.com/highcharts#Renderer.image()