Highcharts Dynamic Updated Highstock Charts doesn't display along with Bar Chart

Highcharts Dynamic Updated Highstock Charts doesn't display along with Bar Chart - javascript

I am a beginner in JQuery and Highcharts. I am following Highchart's highstock demo to create a basic html page to display Highstock's Dynamically Updated Charts.
I started out with a bar chart and it works, but when I add a Highstock chart, it doesn't work anymore.
I really can't figure out why. Please help. Thank you!
This simple bar chart works!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script>$(function () {
$('#bar').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
</head>
<body>
<div id="bar" style="width:100%; height:400px;"></div>
</body>
</html>
Then Adding Dynamic Updated Script to head:
$(function() {
Highcharts.setOptions({
global : {
useUTC : false
}
});
// Create the chart
$('#realtime').highcharts('StockChart', {
chart : {
events : {
load : function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'Random data',
data : (function() {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for( i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
});
and this Div to Body:
<div id="realtime" style="height: 500px; min-width: 500px"></div>
And it STOPS working, as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
$(function() {
Highcharts.setOptions({
global : {
useUTC : false
}
});
// Create the chart
$('#realtime').highcharts('StockChart', {
chart : {
events : {
load : function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'Random data',
data : (function() {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for( i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
});
</script>
<script>$(function () {
$('#bar').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});</script>
</head>
<body>
<div id="bar" style="width:100%; height:400px;"></div>
<div id="realtime" style="height: 500px; min-width: 500px"></div>
</body>
</html>
Please Help! Thank you!

First off you need to only include highstock.js or highcharts.js. I would say only include highstock as it includes all highcharts types as well.

Related

How do i set the X-Axis as Date Array in highcharts.js simple highcharts.chart plot or .stockChart?

I can succesffuly chart the data in a table on mysql
$sql = "SELECT TradeDate as date, LScore2 as L FROM levermann_kurz WHERE Stock_short='MSFT' ORDER BY TradeDate desc";
$stock2 = mysqli_query($mysqli,$sql);
$stock2 = mysqli_fetch_all($stock2,MYSQLI_ASSOC);
$stock2 = json_encode(array_column($stock2,'L'),JSON_NUMERIC_CHECK);
and the body
<script type="text/javascript">
// load("getdata.php")
var data_stock1 = <?php echo $stock1; ?>;
var data_stock2 = <?php echo $stock2; ?>;
Highcharts.chart('container', {
title: {
text: 'Levermann Scores'
},
subtitle: {
text: 'TradeFlags'
},
// xAxis: {
// categories: dates
// },
yAxis: {
title: {
text: 'Levermann Score'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
//pointStart: 0
}
},
series: [{
name: 'AAPL',
data: data_stock1
}, {
name: 'MSFT',
data: data_stock2
// }, {
// name: 'External Data',
// data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</body>
But just can't get it to display the Date array as the x-Axis
It just has values 0,1,2,3,4,... etc.
What am i doing wrong? How do you set the x-axis array in the highchart plot?
I thought you could simply pass through a 2 column array with Dates in the first column and Values in the second column ?
Please help!
I have looked on highcharts documentation but it doesnt seem to explain to me how i should pass the data to the chart container. which format it should be?
CONSOLE LOG:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.highcharts.com/modules/series-label.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.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
</head>
<body>
<div id="container" style="height: 400px; max-width: 800px"></div>
<script type="text/javascript">
// load("getdata.php")
var data_stock1 = [3,2,2,3,3,3,3,3,3,3,3,3,3,3,3,2,3,3,2,3,2,3,2,2,1,-1,0,0,0,0,0,1,1,0,0,-1,0,-1,-1,-1,-1,-1,0,0];
var data_stock2 = [2,3,2,2,2,2,2,2,2,2,2,2,2,1,2,2,3,2,3,3,1,2,0,2,2,2,1,2,2,2,2,2,2,1,2,2,1,2,2,2,2,1,1,2];
var data_datearray = ["2018-05-25","2018-06-01","2018-06-08","2018-06-15","2018-06-22","2018-06-27","2018-07-06","2018-07-20","2018-07-27","2018-08-03","2018-08-10","2018-08-17","2018-08-24","2018-08-31","2018-09-07","2018-09-14","2018-09-21","2018-09-28","2018-10-05","2018-10-12","2018-10-19","2018-10-26","2018-11-02","2018-11-09","2018-11-16","2018-11-23","2018-11-30","2018-12-07","2018-12-14","2018-12-21","2018-12-28","2019-01-04","2019-01-11","2019-01-18","2019-01-25","2019-02-01","2019-02-08","2019-02-15","2019-02-22","2019-03-01","2019-03-08","2019-03-15","2019-03-22","2019-03-29"];
//var seriesOptions = [], seriesCounter = 0, names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
//function createChart() {
Highcharts.stockChart('container', {
///
title: {
text: 'Levermann Scores'
},
xAxis: {
type: 'datetime',
categories: data_datearray
},
series: [{
name: 'AAPL',
data: data_stock1
}, {
name: 'MSFT',
data: data_stock2
}]
////
// responsive: {
// rules: [{
// condition: {
// maxWidth: 500
// },
// chartOptions: {
// legend: {
// layout: 'horizontal',
// align: 'center',
// verticalAlign: 'bottom'
// }
// }
// }]
// }
});
// end of container }];
//}
console.log(data_stock1)
</script>
</body>
i can get the date into this format with two columns but it wont work in the chart
var data_dual = [{"date":"2018-05-25","L":"3"},{"date":"2018-06-01","L":"2"},{"date":"2018-06-08","L":"2"},{"date":"2018-06-15","L":"3"},{"date":"2018-06-22","L":"3"},{"date":"2018-06-27","L":"3"},{"date":"2018-07-06","L":"3"},{"date":"2018-07-20","L":"3"},{"date":"2018-07-27","L":"3"},{"date":"2018-08-03","L":"3"},{"date":"2018-08-10","L":"3"},{"date":"2018-08-17","L":"3"},{"date":"2018-08-24","L":"3"},{"date":"2018-08-31","L":"3"},{"date":"2018-09-07","L":"3"},{"date":"2018-09-14","L":"2"},{"date":"2018-09-21","L":"3"},{"date":"2018-09-28","L":"3"},{"date":"2018-10-05","L":"2"},{"date":"2018-10-12","L":"3"},{"date":"2018-10-19","L":"2"},{"date":"2018-10-26","L":"3"},{"date":"2018-11-02","L":"2"},{"date":"2018-11-09","L":"2"},{"date":"2018-11-16","L":"1"},{"date":"2018-11-23","L":"-1"},{"date":"2018-11-30","L":"0"},{"date":"2018-12-07","L":"0"},{"date":"2018-12-14","L":"0"},{"date":"2018-12-21","L":"0"},{"date":"2018-12-28","L":"0"},{"date":"2019-01-04","L":"1"},{"date":"2019-01-11","L":"1"},{"date":"2019-01-18","L":"0"},{"date":"2019-01-25","L":"0"},{"date":"2019-02-01","L":"-1"},{"date":"2019-02-08","L":"0"},{"date":"2019-02-15","L":"-1"},{"date":"2019-02-22","L":"-1"},{"date":"2019-03-01","L":"-1"},{"date":"2019-03-08","L":"-1"},{"date":"2019-03-15","L":"-1"},{"date":"2019-03-22","L":"0"},{"date":"2019-03-29","L":"0"}];
or using UNIX_TIMESTAMP i converted the date format into timestamps:
var data_dual = [{"date":"1527206400","L":"3"},{"date":"1527811200","L":"2"},{"date":"1528416000","L":"2"},{"date":"1529020800","L":"3"},{"date":"1529625600","L":"3"},{"date":"1530057600","L":"3"},{"date":"1530835200","L":"3"},{"date":"1532044800","L":"3"},{"date":"1532649600","L":"3"},{"date":"1533254400","L":"3"},{"date":"1533859200","L":"3"},{"date":"1534464000","L":"3"},{"date":"1535068800","L":"3"},{"date":"1535673600","L":"3"},{"date":"1536278400","L":"3"},{"date":"1536883200","L":"2"},{"date":"1537488000","L":"3"},{"date":"1538092800","L":"3"},{"date":"1538697600","L":"2"},{"date":"1539302400","L":"3"},{"date":"1539907200","L":"2"},{"date":"1540512000","L":"3"},{"date":"1541116800","L":"2"},{"date":"1541721600","L":"2"},{"date":"1542326400","L":"1"},{"date":"1542931200","L":"-1"},{"date":"1543536000","L":"0"},{"date":"1544140800","L":"0"},{"date":"1544745600","L":"0"},{"date":"1545350400","L":"0"},{"date":"1545955200","L":"0"},{"date":"1546560000","L":"1"},{"date":"1547164800","L":"1"},{"date":"1547769600","L":"0"},{"date":"1548374400","L":"0"},{"date":"1548979200","L":"-1"},{"date":"1549584000","L":"0"},{"date":"1550188800","L":"-1"},{"date":"1550793600","L":"-1"},{"date":"1551398400","L":"-1"},{"date":"1552003200","L":"-1"},{"date":"1552608000","L":"-1"},{"date":"1553212800","L":"0"},{"date":"1553817600","L":"0"}];
but using this array data_dual in the series will just render a chart with blank.

You need to use a datetime axis and provide dates as timestamps or as a Date objects, in the first elemets of the data array:
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
data: [
[1262304000000, 29.9],
[1267401600000, 71.5],
[1270080000000, 106.4]
]
}]
});
Or as an object:
series: [{
data: [{
x: 1262304000000,
y: 29.9
},
{
x: 1267401600000,
y: 71.5
},
{
x: 1270080000000,
y: 106.4
}
]
}]
Live demo: http://jsfiddle.net/BlackLabel/7tov823n/
API Reference: https://api.highcharts.com/highcharts/series.column.data

i am try to include theme in my high chart but on web page no theme is apply, only chart is visible

<!DOCTYPE html>
<html>
<head>
<title>Start With Highchart</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="/js/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
$(document).ready(function(){
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>
In this code i am simply trying to start with highchart. this code display highchart but no theme is applying to it. how to work with this line. it is not included. In console "GET http://localhost/js/themes/gray.js " this error is shown.

check this one..
<!DOCTYPE html>
<html>
<head>
<title>Start With Highchart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript" src="/js/themes/gray.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Highcharts.setOptions(Highcharts.theme);
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>

This complete code works perfectly. I userd the cloudfare CDN for the theme file, which can be replaced by path to local file if you need.
<!DOCTYPE html>
<html>
<head>
<title>Start With Highchart</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/js/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script type="text/javascript">
$(document).ready(function(){
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>

Highcharts - Multiple pie charts from json

Highcharts - Multiple pie charts from json
Let's say I have a server with 4 hard drives. How do I show 4 pie charts, one for each hard drive? It works if the chart type is stacked column (code below).
JSON produces this output:
[{
"name":"Drive",
"data":["C:","D:","E:","F:"]},{
"name":"Free",
"data":[673869,2267920,105627,307096]},{
"name":"Used",
"data":[94029,2264810,6373,104]
}]
And my script code (for stacked column):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacked column chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
colors: ['#50B432', '#ED561B'],
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Server',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Used / Free'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +' '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#000000',
formatter: function() {
return bytes(this.point.y, true);
}
}
}
},
series: []
}
$.getJSON("data2.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
function bytes(bytes, label) {
if (bytes == 0) return '';
var s = ['MB', 'GB', 'TB', 'PB'];
var e = Math.floor(Math.log(bytes)/Math.log(1024));
var value = ((bytes/Math.pow(1024, Math.floor(e))).toFixed(2));
e = (e<0) ? (-e) : e;
if (label) value += ' ' + s[e];
return value;
}
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Thank you for any suggestions.

You can iterate on each json item and create new div (by for example append) and init chart.
What is important, all values in data should be numbers, not strings like you have.
Example:
http://jsfiddle.net/9ov3en2t/
$(function () {
var json = [{
"name": "Drive",
"data": ["C:", "D:", "E:", "F:"]
}, {
"name": "Free",
"data": [673869, 2267920, 105627, 307096]
}, {
"name": "Used",
"data": [94029, 2264810, 6373, 104]
}];
var each = Highcharts.each,
$charts = $('#charts');
each(json,function(item, i) {
$charts.append('<div id="container' + i + '"></div>');
var $chart = $('#container' + i);
$chart.highcharts({
chart:{
type:'pie'
},
series:[{
name: item.name,
data: item.data
}]
});
});
});

Highcharts Library not working

I currently tried to just implement the example from highcharts just to get a feel for it and play around, but it doesn't seem to be working. I tried loading their standalone framework, different versions of jQuery, but the chart will not render. Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
//alignTicks: false,
type: 'line',
renderTo: 'container'
},
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
Thanks in advance.

http://jsfiddle.net/rjreddy78/hgCPa/
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

You need to add
$(function () {
//chart code
});
or
$(document).ready(function(){
//chart code
});

Dynamic High Chart no Displaying

I am trying to plot high chart from the example given in the HighChart Web Site.
The code I am trying is given below,
<html>
<head>
<title>
Chart
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Unfortunately nothing is coming up in the google chrome.
Error Code : 0x800a01b6 - Microsoft JScript runtime error: Object doesn't support this property or method

A small example on highcharts
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<button id="update">Update chart</button>
$(function () {
var cat=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
$('#container').highcharts({
chart: {
animation: false
},
xAxis: {
categories: cat
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
i = 1;
$('#update').click(function () {
var chart = $('#container').highcharts();
chart.series[0].data[0].update(i++ % 2 ? 200 : 0);
});
});

I made some mistake in referencing the jquery files. I made it in order and its working perfectly fine..
Chart
<!-- <script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript" src="jquery/highcharts.js"></script>
<script type="text/javascript" src="jquery/jquery.min.js"></script> !-->
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Highcharts Dynamic Updated Highstock Charts doesn't display along with Bar Chart - javascript

First off you need to only include highstock.js or highcharts.js. I would say only include highstock as it includes all highcharts types as well.

Related

How do i set the X-Axis as Date Array in highcharts.js simple highcharts.chart plot or .stockChart?

i am try to include theme in my high chart but on web page no theme is apply, only chart is visible

Highcharts - Multiple pie charts from json

Highcharts Library not working

Dynamic High Chart no Displaying

Categories

Resources