I am new on highchart. I have gone through the help portal of this and I am unable to fulfill my requirement so need you help/guide to complete this task .
My task is to read the data from a csv/TXT file which contains TPS details as per below format and show it on a dynamic running chart ( it's ok if the chart will refresh in one minute ) .
DATA format:
16:08:02,3
16:08:04,5
16:08:05,1
16:09:01,10
The above file is appending on every second , will read the last one minute data from file and plot this on chart .
I have tried this using below code. Don't know what I am missing.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TPS Example</title>
<script type="text/javascript" src="C:/Backup/SUNIL/Software/library/jquery-2.2.0.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
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.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'TPS Data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 3,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});
</script>
</head>
<body>
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>
<div id="container" style="min-width: 50px; height: 200px; margin: 0 auto"></div>
</body>
</html>
You probably have incorrect paths to your script files.
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>
The code works fine: http://jsfiddle.net/tmp3pty2/
Related
Complete beginner here.
From Spline updating each second, I wanna change amplitude of graph (it means, the range of random generated number) via slider. How to implement it?
I am able to change variables, but variable y that stands for amplitude is inside a function, and none of my solutions worked unfortunately.
Here is the code
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
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.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
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: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
</script>
</body>
How to add slider, that can control value of variable y in load?
Thanks in advance.
Refer to this live demo: http://jsfiddle.net/kkulig/4y120nbo/
I placed the reference to the HTML slider in 'higher' scope than load function. I use rangeForm.value to manipulate the amplitude of generated numbers:
// 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.random() * rangeForm.value;
series.addPoint([x, y], true, true);
}, 1000);
I am new to js, just copy from official website, the code is:
<html>
<head>
<title>Charts using Socket.io and Highcharts</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"> </script>
<script>
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
Highcharts.stockChart('container', {
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 += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}]
});
});
</script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
</html>
the console told me ‘$’ is not defined, and I have tried to get rid of 'function', getting highcharts error #13. I run it on nodejs, and the code is in index.html file, no other js file.
Add this before your current script tags:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Check this:
https://jsfiddle.net/basmLukr/
Note: $(function () {..} is The jQuery shorter method for the document ready event, so first you need to include jQuery. And I think Highcharts creating/updating should be called after page loaded, That's why It didn't work when you got rid of $(function () {..} which is "page loaded" function.
I'm using Highcharts to draw a graph with dynamic data.
I found this official demo.http://jsfiddle.net/vn9bk80j/
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
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.random();
series.addPoint([x, y], true, false);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
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: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: []
}]
});
});
});
<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>
The graph window size is varing, it looks like
Howerver, I need graph window size to be fixed, data in this graph shifts from right to left as a whole from the beginning. Just like in the following pic.
How can I get the effects in picture 2 with Highcharts?
You can use null points to create empty space, and then just add pints with shift=true, see: http://jsfiddle.net/vn9bk80j/1/
function getEmptyData() {
var interval = 1000, // 1 second,
numberOfPoints = 50,
now = (new Date()).getTime(),
min = now - interval * numberOfPoints,
points = [];
while (min <= now) {
points.push([min, null]); // set null points
min += interval;
}
return points;
}
And method use case:
series: [{
name: 'Random data',
data: getEmptyData()
}]
shift=true example:
series.addPoint([x, y], true, true);
I am trying to embed a chart from highcharts.com (using jquery). The graphs works fine if I just open windows.html in chrome itself, but it will not load in my chrome app. Just a blank screen. I have all the standard .js files in the folder, but didn't include them here.
I started with the example here:
https://developer.chrome.com/apps/first_app
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});
manifest file:
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
window.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
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.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
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: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<div id="container" style="min-width: 200px; height: 200px; margin: 0 auto"></div>
</body>
</html>
The answer is in this JSFiddle: http://jsfiddle.net/jarrodek/sdr57h3g/
<body>
<!-- Firstly show content, the app will looks more responsive -->
<div id="container" style="min-width: 200px; height: 200px; margin: 0 auto"></div>
<!-- now you have content loaded and you can execute you code -->
<script type="text/javascript" src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<!-- move your code to external file (panel below) -->
<script src="myapp.js"></script>
</body>
Now you can be sure that all dependencies has been loaded before your code run.
I am new to programming with JavaScript and am having some troubles implementing a HighCharts chart. The API I am using is markit (https://github.com/markitondemand/DataApis/blob/master/MarkitTimeseriesServiceSample.js) to produce a chart as shown halfway down this page http://dev.markitondemand.com/
Now I thought I had to add that js script in place of the js shown in this fiddle (http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/) but it doesn't seem to be working.
I think it may be because I am not assigning where I actually want to put it but I am not 100% sure.
Please see below for my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
/**
* Version 1.1, Jan 2012
*/
var Markit = {};
/**
* Define the TimeseriesService.
* First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG.
* Second argument is duration (int) for how many days of history to retrieve.
*/
Markit.TimeseriesService = function(symbol,duration){
this.symbol = symbol;
this.duration = duration;
this.PlotChart();
};
Markit.TimeseriesService.prototype.PlotChart = function(){
//Make JSON request for timeseries data
$.ajax({
beforeSend:function(){
$("#chartDemoContainer").text("Loading chart...");
},
data: {
symbol: this.symbol,
duration: this.duration
},
url: "http://dev.markitondemand.com/Api/Timeseries/jsonp",
dataType: "jsonp",
context: this,
success: function(json){
//Catch errors
if (!json.Data || json.Message){
console.error("Error: ", json.Message);
return;
}
this.BuildDataAndChart(json);
},
error: function(){
alert("Couldn't generate chart.");
}
});
};
Markit.TimeseriesService.prototype.BuildDataAndChart = function(json){
var dateDS = json.Data.SeriesDates,
closeDS = json.Data.Series.close.values,
openDS = json.Data.Series.open.values,
closeDSLen = closeDS.length,
irregularIntervalDS = [];
/**
* Build array of arrays of date & price values
* Market data is inherently irregular and HighCharts doesn't
* really like irregularity (for axis intervals, anyway)
*/
for (var i=0; i<closeDSLen;i++){
var dat = new Date(dateDS[i]);
var dateIn = Date.UTC(dat.getFullYear(), dat.getMonth(), dat.getDate());
var val = closeDS[i];
irregularIntervalDS.push([dateIn,val]);
}
//set dataset and chart label
this.oChartOptions.series[0].data = irregularIntervalDS;
this.oChartOptions.title.text = "Price History of " + json.Data.Name + " (1 year)";
//init chart
new Highcharts.Chart(this.oChartOptions);
};
//Define the HighCharts options
Markit.TimeseriesService.prototype.oChartOptions = {
chart: {
renderTo: 'chartDemoContainer'
},
title:{},
subtitle: {
text: 'Source: Thomson Reuters DataScope / Markit On Demand'
},
xAxis: {
type: 'datetime'
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
marker: {
lineWidth: 1
}
}
},
series: [{
name: "Close price",
lineWidth: 2,
marker: {
radius: 0
}
}]
//,credits:{ enabled:false },
};
new Markit.TimeseriesService("GOOG", 365);
/**
* Need help? Visit the API documentation at:
* http://dev.markitondemand.com
*/
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Thanks a lot for the help.
In your <div> change the id to #chartDemoContainer
Replace your jQuery libraries with these,
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
And here's a working version of your example - http://jsbin.com/behicetivi/edit?html,output
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
/**
* Version 1.1, Jan 2012
*/
var Markit = {};
/**
* Define the TimeseriesService.
* First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG.
* Second argument is duration (int) for how many days of history to retrieve.
*/
Markit.TimeseriesService = function(symbol,duration){
this.symbol = symbol;
this.duration = duration;
this.PlotChart();
};
Markit.TimeseriesService.prototype.PlotChart = function(){
//Make JSON request for timeseries data
$.ajax({
beforeSend:function(){
$("#chartDemoContainer").text("Loading chart...");
},
data: {
symbol: this.symbol,
duration: this.duration
},
url: "http://dev.markitondemand.com/Api/Timeseries/jsonp",
dataType: "jsonp",
context: this,
success: function(json){
//Catch errors
if (!json.Data || json.Message){
console.error("Error: ", json.Message);
return;
}
this.BuildDataAndChart(json);
},
error: function(){
alert("Couldn't generate chart.");
}
});
};
Markit.TimeseriesService.prototype.BuildDataAndChart = function(json){
var dateDS = json.Data.SeriesDates,
closeDS = json.Data.Series.close.values,
openDS = json.Data.Series.open.values,
closeDSLen = closeDS.length,
irregularIntervalDS = [];
/**
* Build array of arrays of date & price values
* Market data is inherently irregular and HighCharts doesn't
* really like irregularity (for axis intervals, anyway)
*/
for (var i=0; i<closeDSLen;i++){
var dat = new Date(dateDS[i]);
var dateIn = Date.UTC(dat.getFullYear(), dat.getMonth(), dat.getDate());
var val = closeDS[i];
irregularIntervalDS.push([dateIn,val]);
}
//set dataset and chart label
this.oChartOptions.series[0].data = irregularIntervalDS;
this.oChartOptions.title.text = "Price History of " + json.Data.Name + " (1 year)";
//init chart
new Highcharts.Chart(this.oChartOptions);
};
//Define the HighCharts options
Markit.TimeseriesService.prototype.oChartOptions = {
chart: {
renderTo: 'chartDemoContainer'
},
title:{},
subtitle: {
text: 'Source: Thomson Reuters DataScope / Markit On Demand'
},
xAxis: {
type: 'datetime'
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
marker: {
lineWidth: 1
}
}
},
series: [{
name: "Close price",
lineWidth: 2,
marker: {
radius: 0
}
}]
//,credits:{ enabled:false },
};
new Markit.TimeseriesService("GOOG", 365);
/**
* Need help? Visit the API documentation at:
* http://dev.markitondemand.com
*/
</script>
</head>
<body>
<div id="chartDemoContainer" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>