I have a problem with a highstock chart. I need for my university project to show a real time chart of values that I can find in a log on my PC.
I downloaded the highstock zip from the site and studied the examples. In particular I'm trying to modify the dynamic update index.html
How can I replace the random function for y value for get the data from my csv file?
This is the original code:
$('#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);
}
}
},
Thanks a lot for your help!
I advice to prepare www server, where you will keep your files, then load in your machine by $.get().
Related
I would like to use a CSV file as source for a highcharts graph.
Could you give some guidance? I need to understand basically how to get data in the web page.
Do I need to put the function that load the text file in the "series" part of the js function?
This is what I have so far:
<script type='text/javascript'>
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'chart example'
},
xAxis: {
categories: []
},
yAxis: {
},
series: []
};
$.get('test.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first
// position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 1) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
This is how the data file is structured in the CSV file:
Compound,Value
mix1,0.244
mix2,0.453
pureCu,1
pureAg,0.98
The value of column 1 is an ID basically, so the distance between each of them could be considered as 1. So technically, the first column would be always from 1 to 15 for example, with the label using the name in the first column
I would like to put the second field on the Y, and on the X the first field; but using the code pasted (which is what is on an example on the Highcharts website), I can't really figure out how to set up correctly the values on each side of the chart.
Thanks
Here you can find tutorials from Highcharts to load data from external file: http://www.highcharts.com/docs/working-with-data/preprocessing
About refreshing page - yes you can refresh page every n-seconds, however it would be better (I think) to call AJAX to fetch new data from server and then replace it in Highcharts (simply using chart.series[0].setData( new_array_of_data );
I am using JQPlot trying to draw a graph which contains dates. But I cant able to draw the graph, but i tried the sample application it is working fine. But whenever i pass my array it is not working, can anyone please help what i am doing wrong? Below is the code i am using.
$.get("${contextPath}/qos/graphJQPlot", $("#qosForm").serialize()).done(function(content) {
$.each(content, function (index1, value1) {
var innerArray = [];
$.each(value1, function (index2, value2) {
innerArray.push(value2, index2);
console.log(index2);
console.log(value2);
})
outerArray.push(innerArray);
})
var line1=[['2008-09-30 4:00PM',4], ['2008-10-30 4:00PM',6.5], ['2008-11-30 4:00PM',5.7], ['2008-12-30 4:00PM',9], ['2009-01-30 4:00PM',8.2]];
var plot3 = $.jqplot('chartdiv', [outerArray],
{
title:'Line Style Options',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d, %y'}/* ,
min:'2013-09-14',
max:'2013-09-21',
tickInterval:'1 day' */
/* ,
tickOptions:{formatString:'%b %#d, %Y'},
*/
}
}
}
);
});
If i pause an line1 to jqPlot it is working fine, but if i pass an outerArray it is not working.
Don't forget to include jqplot.dateAxisRenderer.js plugins
Im looking for a way to animate a highstock when updating.
the documentation said the default value of animation is true but i couldn't see any animation on this highstock example:
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);
}
}
},
full code:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/
I have tens of thousands (possibly hundreds of thousands) of points that I need plotted with Highcharts. Is there a way where I can cluster the data on the server, so it will show less than 1000 points, but as you zoom in it will make AJAX calls to the server to get the data for that zoomed region (it would probably run through the same cluster algorithm). How would this interface with the Highcharts API?
There is a highstock demo that does this http://www.highcharts.com/stock/demo/lazy-loading.
But you can do the same thing with highcharts http://jsfiddle.net/RHkgr/
The important bit is the afterSetExtremes function
...
xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
...
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var url,
currentExtremes = this.getExtremes(),
range = e.max - e.min;
var chart = $('#container').highcharts();
chart.showLoading('Loading data from server...');
$.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start='+ Math.round(e.min) +
'&end='+ Math.round(e.max) +'&callback=?', function(data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
Here is an improvement for Barbara's answer,
It registers to the setExtremes event,
to know if this is a reset zoom event.
If it is - it gets the entire dataset,
thus allowing reset zoom to work correctly.
It also allows zooming in both x and y.
http://jsfiddle.net/DktpS/8/
var isReset = false;
...
xAxis: {
events: {
afterSetExtremes : afterSetExtremes,
setExtremes: function (e) {
if (e.max == null || e.min == null) {
isReset = true;
}
else
{
isReset = false;
}
}
},
minRange: 3600 * 1000 // one hour
},
series: [{
data: data,
dataGrouping: {
enabled: false
}
}]
});
});
});
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var url,
currentExtremes = this.getExtremes(),
range = e.max - e.min;
var chart = $('#container').highcharts();
var min = 0;
var max = 1.35e12;
if(!isReset)
{
min = e.min;
max = e.max;
}
chart.showLoading('Loading data from server...');
$.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(min) +
'&end=' + Math.round(max) + '&callback=?', function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
In case when you will not have a limit of points, you can increase turboThreshold paramter.
I've been bashing my head for 3 days trying all three methods of loading data into Highstock chart. Is there a way to import data without using PHP? I'm on an IIS Server with no PHP installed.
When I use the $j.getJSON() method pointing to http://www.highcharts.com/samples/data/jsonp.php it works fine. However, when I started trying to add my own data (I tried CSV and XML) I can see everything runs without a problem via the firebug console, but I get a weird result.
http://i.imgur.com/qj5y8bM.png
Can I please get a sample (3 plot points) for a Stockchart chart. All the samples I can find are for a Highchart Barchart. Which is a completely different beast than what I'm doing with StockChart. Please, I need a sample CSV and sample JSON to base this off of. Somebody please help.
Take a look the docs, there're some demos and explanation about how to do it.
First, create the csv.
Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
Second, define the basic chart options.
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units'
}
},
series: []
};
Third, process data.
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
And here is the result.
You should be able to load data into a Highcharts/Highstock object by using an array or a named-value object. The PHP sample URL on highcharts.com returns JSON data that can be understood by Highcharts/Highstock, but you can use any data source that returns JSON data.
As an example, here is some code that uses a simple array for the series data:
$(function() {
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
title : {
text : 'My chart'
},
series : [{
name : 'My Series',
data : [
[Date.UTC(2006, 0, 29, 0, 0, 0), 30.14],
[Date.UTC(2006, 0, 29, 1, 0, 0), 34.76],
[Date.UTC(2006, 0, 29, 2, 0, 0), 34.34],
[Date.UTC(2006, 0, 29, 3, 0, 0), 33.9]
]
}]
});
});
Here's a live sample: http://jsfiddle.net/fF9Ru/1/
If you have an existing data source, please post a sample of the data it is returning. The chart may not be rendering if the data is not properly formatted.