Highchart column animation when adding new column - javascript

I'm trying to make a simple bar chart that updates every 5 seconds using highchart. Below is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="underscore-min.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Activity Count per Model'
},
xAxis: {
categories: [],
crosshair: true,
title: {
text: 'Model'
}
},
yAxis: {
min: 0,
title: {
text: 'Activity Count'
}
},
plotOptions: {
column: {
animation: true,
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Count',
data: []
}]
});
setInterval(function(){
$.getJSON("http://localhost/getdata.php", function(data){
$('#container').highcharts().series[0].setData(data.value,true);
$('#container').highcharts().xAxis[0].setCategories(data.model);
});
}, 5000);
</script>
</html>
The data returned from JSON call:
{"model":["a","aa","aaa","aaaa","aab","b","c","d","e"],"value":[40,20,70,40,70,20,30,40,50]}
Right now functionally the code works fine (chart shows up with the data updated every 5 second). The problem is that if the chart updates with new column, there's no animation on it. But if the existing data is updated without adding new column, there's animation in it (column growing up / shrinking, other column adjust if axis change). How do I enable the animation when new column is inserted into the chart?


In that case there are different possibilities how the chart should be animated. So you should consider what animation you'd want to.
From setData() docs:
When the updated data is the same length as the existing data, points will be updated by default, and animation visualizes how the points are changed.
IN your case you can split your data in two parts - the new point and the rest data. The rest data can be set with setData() - and you will preserve the animation because the old and new data have same length. And the point can be added with animation via addPoint().
$('#button').click(function () {
const data = new Array(12).fill(2)
chart.xAxis[0].setCategories(categories.concat('13'), false);
chart.series[0].setData(data);
chart.series[0].addPoint(40, true, false, true);
});
example: http://jsfiddle.net/Lqy2e42h/

Related

Highcharts horizontal scroll

I'm new in highcharts and I'm trying to do a graphic with bars and a line. The bars represent the average of set values and the line represents the real value of the set.
I generated the set randomly with 100 values, but the graphic interface sees horrible when I run chart in Jsfiddle. I put a drag selection zoom but is not comfortable to use. Then I decided to put an horizontal scroll and I've seen in Stack Overflow posts that I must to include highstock.js, enable scrollbar and set parameter min and max to enable scroll scrolling. I did it and my chart works but without the scroll.
Link to the Chart: http://jsfiddle.net/zd12fa5L/2/
According to Jsfiddle, my HTML is:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
<div id="report"></div>
And the JSON is:
// create the chart
Highcharts.chart('container', {
chart: {
events: {
selection: function (event) {
var text,
label;
if (event.xAxis) {
text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
} else {
text = 'Selection reset';
}
label = this.renderer.label(text, 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
},
zoomType: 'x'
},
title: {
text: 'Chart selection demo'
},
subtitle: {
text: 'Click and drag the plot area to draw a selection'
},
xAxis: {
min: 0,
max:9,
categories: ['Subject1','Subject2','Subject3','Subject4','Subject5','Subject6','Subject7','Subject8','Subject9',
'Subject10','Subject11','Subject12','Subject13','Subject14','Subject15','Subject16','Subject17',
'Subject18','Subject19','Subject20','Subject21','Subject22','Subject23','Subject24','Subject25',
'Subject26','Subject27','Subject28','Subject29','Subject30','Subject31','Subject32','Subject33',
'Subject34','Subject35','Subject36','Subject37','Subject38','Subject39','Subject40','Subject41',
'Subject42','Subject43','Subject44','Subject45','Subject46','Subject47','Subject48','Subject49',
'Subject50','Subject51','Subject52','Subject53','Subject54','Subject55','Subject56','Subject57',
'Subject58','Subject59','Subject60','Subject61','Subject62','Subject63','Subject64','Subject65',
'Subject66','Subject67','Subject68','Subject69','Subject70','Subject71','Subject72','Subject73',
'Subject74','Subject75','Subject76','Subject77','Subject78','Subject79','Subject80','Subject81',
'Subject82','Subject83','Subject84','Subject85','Subject86','Subject87','Subject88','Subject89',
'Subject90','Subject91','Subject92','Subject93','Subject94','Subject95','Subject96','Subject97',
'Subject98','Subject99','Subject100']
},
scrollbar: {
enabled: true
},
series: [{
type: 'column',
name: 'Average',
data: [514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0 ]
},
{
name: 'Value',
data: [11.0,11.0,118.0,126.0,131.0,142.0,159.0,172.0,178.0,181.0,182.0,186.0,189.0,206.0,218.0,219.0,221.0,238.0, 256.0,260.0,272.0,282.0,283.0,300.0,317.0,337.0,351.0,360.0,404.0,424.0,425.0,438.0,446.0,456.0,462.0,
464.0,468.0,469.0,479.0,488.0,494.0,501.0,501.0,503.0,504.0,516.0,518.0,519.0,522.0,530.0,531.0,533.0,
534.0,537.0,549.0,563.0,565.0,573.0,577.0,599.0,608.0,631.0,638.0,641.0,649.0,668.0,674.0,68.0,68.0,
683.0,7.0,727.0,735.0,748.0,749.0,771.0,782.0,783.0,799.0,831.0,839.0,844.0,847.0,847.0,854.0,86.0,867.0,
873.0,888.0,891.0,894.0,896.0,898.0,910.0,918.0,938.0,944.0,963.0,981.0,999.0
]
}]
});
Thank you, regards.

Read Scrollbars for any axis
Include only <script src="https://code.highcharts.com/stock/highstock.js"></script> and remove <script src="https://code.highcharts.com/highcharts.js"></script>. Then scrollbar will appear.
Fiddle demo

Highcharts :Uncaught TypeError: $(...).highcharts is not a function

Getting this error while running a HighCharts in my JSP Application.
Uncaught TypeError: $(...).highcharts is not a function(anonymous function) # VendorReports:125n.Callbacks.j # jquery-1.11.0.js:893n.Callbacks.k.fireWith # jquery-1.11.0.js:928n.extend.ready # jquery-1.11.0.js:982K # jquery-1.11.0.js:989
Please suggest what to do
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
$(function () {
$('#container').highcharts({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples' ]
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
//Nothing wrong with this code

I was having this issue, too. Ensure jQuery is imported before highchart.js. That fixed the issue for me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

What happens if you replace
$('#container').highcharts({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column'
},
/* ... */
by
var chart = new Highcharts.Chart({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column',
renderTo: 'container'
},
/* ... */
?
I had the same issue as you a while ago and I resolved it by using this type of initialization.

I was using an old version of the high charts version. From their website I assumed that the version listed under Specific version was their latest version and used that so it wouldn't auto update on me. However the version they had listed was super old so changing it to the actual latest version fixed the issue.

The approach taken from the official examples is working well. They defined the include script tag within the body tag therefore the solution given by Kabulan0lak is better I think.
<html>
<head>
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
}
// ... other options and data/series
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.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>
</body>
</html>

It happens with me too. In my case, I need click in a button to load the chart and if I click twice or more the chart stops to work. I was setting the color like this:
Highcharts.setOptions({
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
})
});
$.getJSON("./myDataGraph.php", function(response){
// Create the chart
var chart = Highcharts.chart('myGraph', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
... });
I couldn't solve the error, but I remove the "Highcharts.setOptions" and the chart works!!!

Highcharts multiple charts, each with live data

I have the following files:
rsrp.txt, sinr.txt, rssi.txt
each of them containg information like this:
[1433289760000,-83.5]
I want to use multiple charts on the same page.
I tried to use the sample script from the Highcharts page:
var chart; // global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: 'rssi.txt',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 30; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1700);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'RSSI'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 2.5,
maxPadding: 2.5,
title: {
text: 'dBm',
margin: 80
}
},
series: [{
name: 'RSSI',
data: []
}]
});
});
Copy pasting the script outside the and changing the URL does not work. (only one chart is getting updates)
If I create a second requestData()-function and copy the $(document).ready part does not work either.
Is this possible in Highcharts?
It would be not a problem to combine the input files into a single file, if that would help.
Edit:
I tried to solve it using the answers here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Signal</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script>
var chart; // global
var chartRsrp;
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: 'rssi.txt',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 30; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1700);
},
cache: false
});
}
function requestData2() {
$.ajax({
url: 'rsrp.txt',
success: function(point) {
var series = chartRsrp.series[0],
shift = series.data.length > 30; // shift if the series is longer than 20
// add the point
chartRsrp.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1700);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'RSSI'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 2.5,
maxPadding: 2.5,
title: {
text: 'dBm',
margin: 80
}
},
series: [{
name: 'RSSI',
data: []
}]
});
chartRsrp = new Highcharts.Chart({
chart: {
renderTo: 'container2',
defaultSeriesType: 'spline',
events: {
load: requestData2
}
},
title: {
text: 'RSRP'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 2.5,
maxPadding: 2.5,
title: {
text: 'dBm',
margin: 80
}
},
series: [{
name: 'RSRP',
data: []
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="width: 800px; height: 400px; margin: 0 auto"></div>
Edit 2: solved it that way:
requestData2();
requestData3();
requestData4();
setTimeout(requestData, 1300);
in the first requestData()

In Highcharts-land, each chart needs to be its own object. It's certainly possible to have multiple charts on the same page, but you'd have to make sure that:
Each chart is instantiated separately (in this case, if you're just copying/pasting the $(document).ready part, you're probably stepping on your chart variable. So, instead of a single chart variable you could set these up separately (e.g. chartRsrp = new Highcharts.Chart(...)) and be sure to reference them differently in your requestData calls.
Each chart is rendered to a different DOM element. So, you might render to "container-rsrp", "container-sinr", "container-rssi" etc.
Hopefully this helps!

First of all, each chart have to be instantiated separately, so in your HTML you must have a div with an ID for each chart where the chart will be rendered, for example:
<div id='chartrsrp' class="large-12 columns"></div>
<div id='chartsinr' class="large-12 columns"></div>
<div id='chartrssi' class="large-12 columns"></div>
Next, to render your chart from Js you have to get the div object and instantiate each chart like:
var chartrsrp = $("#chartrsrp");
chartrsrp.highcharts({
title: {
...
},
chart: {
...
});
Hopefully this helps!

Highcharts renders the other graph's data too

I have one html page where there are two divs. In each div I am loading different jsp files(one.jsp and two.jsp).
home.html:
<script src="resources/js/jquery.js"></script>
<script type="text/javascript" src="resources/js/highcharts.js"></script>
<script type="text/javascript" src="resources/js/exporting.js"></script>
<script type="text/javascript" src="resources/js/export-csv.js"></script>
<script>
function loadGraphs()
{
$('#plotContainer1').load('one.jsp');
$('#plotContainer2').load('two.jsp');
}
</script>
where plotContainer1 and plotContainer2 are two divs. So that I want to load two graphs at a time.
one.jsp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<div id="container1" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
<script type="text/javascript">
var seriesArray;
var chart;
callAjax();
var graphTitle = "";
var chart;
function drawgraph1() {
Highcharts.setOptions({
colors: ['#54CBE5', '#57B442']
});
chart = $('#container1').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: graphTitle
},
xAxis: {
tickInterval: 30,
type: 'datetime',
categories: xAxisCategories
},
yAxis: {
min : 0,
title: {
text: ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series : seriesArray
});
};
function callAjax() {
$("#container1").empty();
seriesArray = [{
name: 'line1',
data: []
}, {
name: 'line2',
data: []
}];
xAxisCategories = [];
var params = {"param1" : value};
$.getJSON("graph1datafetcher",params, function(data) {
$.each(data, function(key, val) {
var xaxisPoints=data[key];
xAxisCategories.push(Date.parse(key));
for(var i in xaxisPoints) {
seriesArray[i].data.push(xaxisPoints[i]);
}
});
console.log(" JSON: " + JSON.stringify(data));
drawgraph1();
});
}
</script>
</body>
</html>
two.jsp almost contains the same code. Now first two.jsp loads as it contains less data compared to one.jsp. When one.jsp loads in and shows up in div, the one.jsp graph shows two.jsp data and its own data too. I am logging the data in the console, the data that is coming is fine. So, the problem is somewhere the highchart persists the first data. I have been struggling with this for past 7 hours. Can someone please answer how to resolve this?

Ajax dynamic data with column bar chart

Is it possible to run the highcharts column bar charts? I've tried it a couple of times and unfortunately this no real way to refresh the data without reloading it.
I whipped up some pseudo code which is the way I did it at work (I'm not there now so can't get to the code).
Should I whip up a loop and run it like 5,000 times or something with a 5 second delay? I'm not real sure how to proceed.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
< your typical ajax call function here
return some value;
>
$(function () {
<var ajax_far = ajax_function();>
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Some Bar'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [ajax_var]
}]
});
});
}, 5000);
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

put your ajax code in one function that it call from ready function...try this
$(document).ready(function(){
example();
setInterval("example()",5000);
}
function example()
{
//ajax code here
}

The ajax call should simply obtain new data for the chart to display. There is no need to redraw the entire chart, you can just replace the series data, or add indivual points. Here is a good article on doing this on the highcharts website here http://docs.highcharts.com/#preprocessing-live-data, but the ajax code they suggest is:
/**
* Request data from the server, add it to the graph and set a timeout to request again.
*/
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // Shift if the series is longer than 2.
// Add the point.
chart.series[0].addPoint(point, true, shift);
// Call it again after one second.
setTimeout(requestData, 1000);
},
cache: false
});
}
In this code, the requestData function is called every second (via setTimout). It obtains a new data point via an ajax call to live-server-data.php and uses chart.series[0].addPoint to add it to the chart.
If the ajax call returned the entire series, you would call chart.series[0].setData to replace the entiire series.
The only thing you need to worry about is making sure the chart is created before you start call addPoint or setData.

$(function () {
var chart;
var list;
$(document).ready(function() {
var options = {
chart: {
//all chart attr here
}
//other attr
}
chart = new Highcharts.Chart(options);
setInterval(function() {
$.ajax({
type: "GET",
url: "service",
dataType: "json",
success: function (data)
{
chart.series[0].setData(data);
}
}),1000); //will set ur data to ajax data every 1 sec
if u want to update to existing chart data try addPoint()
});
});

Categories

Resources