Is there a way to update the x-axis on a real time flot chart?
I want something like this -> (http://www.flotcharts.org/flot/examples/realtime/index.html)
but as you can see, there are no values on the x-axis..
So, is there a way to shift the x-axis values as the chart shifts?
Thanks in advance!
You first need to show the x axis:
var plot = $.plot("#placeholder", [ getRandomData() ], {
xaxis: {
show: true
}
});
Then on every data update you need to update the grid as well:
function update() {
plot.setData([getRandomData()]);
plot.setupGrid(); // updating the grid
plot.draw();
setTimeout(update, updateInterval);
}
Check this plunker for example.
Related
In Highcharts line chart some of the x-axis labels are not display after zoom in and zoom out.
Please have a look from following link ==>> https://jsfiddle.net/2yc9ozwk/
To reproducing this issue you need to adjust output window width minimum for more clarity check below snaps
1) Initially when chart load, It will show all x-axis labels.
2) After chart zoom in click on 'reset zoom' button
3) After zoom out some labels are not displaying.
This problem looks like a bug, so I reported it here: https://github.com/highcharts/highcharts/issues/10532
To workaround, use tickPositioner function:
xAxis: {
tickPositioner: function() {
var ticks = [];
for (var i = this.dataMin; i < this.dataMax; i++) {
ticks.push(i);
}
return ticks;
},
...
},
Live demo: https://jsfiddle.net/BlackLabel/7bgj6tvs/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner
I have requirement to extend date label formatting to show time period beside date when value is measured.
You can see on image how it should look.
Any way to achieve this by using format function of Highchart API?
EDIT: I need implementation without using third party solutions, since I need to embed solution into jasper report.
Thanks
As an alternative to use 'grouped categories' plugin, you can create additional xAxis labels by Highcharts. SVGRenderer.
chart: {
events: {
load: function() {
var chart = this,
ticks = chart.xAxis[0].ticks,
xy;
Highcharts.objectEach(ticks, function(tick) {
if ((tick.pos + 2) % 3 === 0) {
xy = tick.label.xy;
chart.renderer.text('date', xy.x, xy.y + 20)
.attr({
'align': 'center'
})
.add();
}
});
}
}
},
Live example: http://jsfiddle.net/BlackLabel/f7c54zop/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
I am using same chart in 2 different places and the data is being loaded dynamically.
In one of the place i am using HighChart and for other i use HighStock to get the Navigator,Scrollbar facility.
What i'm trying to achieve is i am loading data asynchronously and the chart shows loading text/a loader until it gets data from the server.This works perfectly fine for HighChart. But when it comes to HighStock things are not working. It shows data differently than what i am expecting it to be.
Let me explain, The chart is initialized first and when it fetches data from server i tried to log the value of xAxis here, it shows 1 for HighChart which is correct but for HighStock the statement show 2 xAxis.
//HighChart
var MyChart = {
initHighcharts: function() {
this.chart = new Highcharts.Chart({
// Chart related configuration
},
series: []
});
this.chart.showLoading();
},
updateChart: function(data) {
console.log('x axis', this.chart.xAxis);// Here i get 1 xAxis
// Load data here
this.chart.redraw();
this.chart.hideLoading();
},
};
MyChart.initHighcharts();
setTimeout(function() {
var data = someData;
MyChart.updateChart(data);
}, 2000);
I don't understand what goes wrong here when i change the HighChart to HighStock.The only piece of information i changed here is
this.chart = new Highcharts.StockChart({
//HighStock chart
var MyChart = {
initHighcharts: function() {
this.chart = new Highcharts.StockChart({
// Chart related configuration
},
series: []
});
this.chart.showLoading();
},
updateChart: function(data) {
console.log('x axis', this.chart.xAxis);// Here i get 2 xAxis
// Load data here
this.chart.redraw();
this.chart.hideLoading();
},
};
MyChart.initHighcharts();
setTimeout(function() {
var data = someData;
MyChart.updateChart(data);
}, 2000)
Here are the two fiddle that show the error i am facing,
HighChart Fiddle
HighStock Fiddle
I have logged the length of xAxis, Please open console window to see the xAxis value. Am i doing something wrong here?
Any help is much appreciated!!
Thanks
I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.
After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.
This can be viewed at http://jsfiddle.net/ab96pnjf/ as well
The code that creates the chart is the following
$(function () {
var fromdate = new Date('2011-04-01');
var todate = new Date('2012-05-21');
var series = [{
color: 'red',
data: MSFT,
name: 'MSFT'
}];
$('#container').highcharts('StockChart', {
navigator: {
series: {
data: series[0].data,
color: '#4572A7',
fillOpacity: 0.05
}
},
xAxis: {
ordinal: false,
min: fromdate.getTime(),
max: todate.getTime()
},
legend: {
enabled: true
},
series: series
});
});
Now, if I change the navigator.series property to
navigator: {
series: series
}
the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.
So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?
Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.
Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.
$(function () {
// ... as previous
$('#container').highcharts('StockChart', {
navigator: {
series: series
},
// ... as previous
});
// added code to apply a custom style to the navigator line diagram
var navseries = $('.highcharts-series:last').children();
// can be undefined if the series has no data points
if (navseries) {
navseries.css('stroke', '#4572A7');
navseries.css('strokeWidth', 1);
navseries.css('fillOpacity', 0.05);
}
});
Building a page with multiple graphs, I've decided to use NVD3.
The problem is that NVD3 fails to find the maximum value, rendering some useless graphs.
http://jsfiddle.net/pxU8c/
function renderGraph(parent, data) {
function getGraph(svgElement, data) {
var height = 500;
var chart = nv.models.lineChart()
chart.options({
noData: "Not enough data to graph",
transitionDuration: 500,
showLegend: true,
showXAxis: true,
showYAxis: true,
rightAlignYAxis: false
});
chart.xAxis //Chart x-axis settings
.axisLabel(data['x-label'])
.tickFormat(function(d) {
return d3.time.format('%d.%m.%Y')(new Date(+d))
});
chart.yAxis //Chart y-axis settings
.axisLabel(data['y-label'])
.tickFormat(d3.format('.02f'))
;
svgElement //Select the <svg> element you want to render the chart in.
.datum(data['data']) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
}
var svgELement = d3.select('svg#chart_'+data['code']);
nv.addGraph(getGraph(svgELement, data));
}
I'm also using twitter bootstrap for layout, if it helps.
EDIT
following fiddle should be more useful since it contains less garbage
http://jsfiddle.net/Bh578/
the first and the seconds graphs are displaying the problem while the third is rendered accordingly to my expectations (i.e. you can see the whole line)
I have also added the useInteractiveGuideline: true option so it's more obvious that there are values outside of the visible graph area that I'd like to see on the chart too.
Values should be integers, not JSON-decoded-as-strings integers, then it works like a charm.