We Keep Coding

Highcharts - How do I track/follow a live updated chart without using a navigator?

I have a graph which has live data feeding in, but the chart only tracks or follows the data line if the navigator is enabled.
I am unsure if this is a feature or is it a bug.
On the JSFiddle, notice how it doesn't track, but as soon as you change enabled: false to enabled: true, on line 43, it instantly starts tracking.
http://jsfiddle.net/6eso1hgy/1/
Is it possible to make it have the tracking behavior without a navigator?

I don't know if you really need Highstock. If not then you can change the code to just Highcharts and then remove all unnecessary code and add the following:
series: [{
marker: {
radius: 0
},
...
Fiddle

You can achieve it using xAxis.setExtremes() method:
Code:
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
var chart = this;
setInterval(function() {
NewTime = (new Date()).getTime(); // current time
var x = NewTime,
y = Math.round(Math.random() * 10);
series.addPoint([x, y], false, false, false); //redraw shift animation
chart.xAxis[0].setExtremes(
chart.xAxis[0].min + 1000,
chart.xAxis[0].max + 1000,
true,
false
);
}, 1000);
}
}
Demo:
http://jsfiddle.net/BlackLabel/z1mu0Lgh/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

Highcharts - use same chart on multiple places

I have a website where the same solid gauge graph has to be used on multiple places at the same time, however I'd like to be able to update them all by simply calling a single line of code:
section1_graph.series[0].setData([32], true);
So really 1 instance, but multiple renders.
Who can help me? ^^

I created an example how to add multiple charts with the same options and simple updating. To add more charts, just add div element with gaugeContainer class.
var options = {
series: [{
type: 'gauge'
}],
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: {
min: 0,
max: 200
}
}
var containers = document.getElementsByClassName('gaugeContainer');
for (var i = 0; i < containers.length; i++) {
Highcharts.chart(containers[i], options);
}
function setChartsData(data) {
Highcharts.charts.forEach(function(chart) {
if (chart && chart.renderTo.classList.contains("gaugeContainer")) {
chart.series[0].setData(data.slice());
}
});
}
setChartsData([32]);
setTimeout(function() {
setChartsData([120]);
}, 1500);
Live demo: http://jsfiddle.net/BlackLabel/6qxtd20g/

Hide x-axis label in chartsjs [duplicate]

I want to hide labels on x-axis as i have a solution to set
$scope.labels = ['', '', '', '', '', '', ''];
but in that case labels are also getting hidden on tooltip. What i want is to show labels on bars hover but i don't want to show those labels on x-axis. As it also disturbs my UX as well because charts width is too low.
I did spend too much time on this but couldn't find a solution to get rid of x-axis labels. Please help me here....

I think that's something you can do it with options setting in the latest versions of chartjs:
options: {
scales: {
xAxes: [
{
ticks: {
display: false
}
}
];
}
}

You can extend the chart to do this, like so
Chart.types.Bar.extend({
name: "BarAlt",
initialize: function(data){
Chart.types.Bar.prototype.initialize.apply(this, arguments);
var xLabels = this.scale.xLabels;
for (var i = 0; i < xLabels.length; i++)
xLabels[i] = '';
}
});
and call it like so
var myBarChart = new Chart(ctx).BarAlt(data);
Fiddle - http://jsfiddle.net/kq3utvnu/
Thanks #Samuele for pointing this out! For really long labels, you'll need to set the labels to something shorter and then set it back to the original ones (in the chart elements) so that no space is taken up below the x axis for the labels.
Chart.types.Bar.extend({
name: "BarAlt",
initialize: function(data){
var originalLabels = data.labels;
data.labels = data.labels.map(function() { return '' });
Chart.types.Bar.prototype.initialize.apply(this, arguments);
this.datasets[0].bars.forEach(function(bar, i) {
bar.label = originalLabels[i];
});
var xLabels = this.scale.xLabels;
for (var i = 0; i < xLabels.length; i++)
xLabels[i] = '';
}
});
Fiddle - http://jsfiddle.net/nkbevuoe/

I was able to hide labels on the x-axis, while keeping the title in the tooltip by doing the following:
In chart data: labels: [""]
In chart options, add object.label = "ToolTipTitle"; before the line specifying the values that should be returned

Bar chart looks bad before change data

Hi here I set the data to the bar chart:
setDatosBarra: function(data){ //
var self = this;
var horaEstim = 0;
var horaReal = 0;
var horaTotal = 0;
if(data[0].horas_estim != '-'){
horaEstim = data[0].horas_estim;
}
if(data[0].horas_real != '-'){
horaReal = data[0].horas_real;
}
if(data[0].total_horas != '-'){
horaTotal = data[0].total_horas;
}
var datosBarra =[{data: [[0,horaEstim]], color: "#691717"}, {data: [[1,horaReal]], color: "#173D69"},{data: [[2,horaTotal]], color: "#176469"}];
self.flotLinea(datosBarra);
},
When all is ready I send the data to self.flotBar;
This is the flotBar function:
flotBar: function(datos){
var self = this;
if(datos == 0){
var data = [["SIN REGISTROS",0]];
}else{
var data = datos;
}
function getTooltip(label, x, y) {
return "<strong style='font-size:18px;'> " + y + " </strong> horas";
}
var plot = $.plot("#placeholder",data, {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
ticks: [[0,"Horas estimadas"],[1,"Horas reales"],[2,"Total horas"]],
mode: "categories",
tickLength: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
});
},
Ok , and this is my problem, example:
I select a option in an dropDown:
And the bar chart looks like this:
If I select other option in the dropDown:
The bar chart looks like this:
And if I select again the first option "Correcion de errores", the bar chart looks like this:
So.. always the first time that I show the bar chart looks like in the first image , with the numbers in the line, but If I select other option looks good.
I need see good the bar chart always and no just when I select other option.
I'm using flot javascript library.
How can I fix this? sorry by my english

The main issue with the question as stated is that we do not have all the code. In essence, you should either provide all the code, or shrink down the problem to something that shows the issue and then, well, provide all the code. As far as I can guess, you have some other code somewhere else that is drawing the initial chart. The second and subsequent times? Drawn properly. To support my assertion, notice that in your initial image the captions for the x-axis tick markers (ditto the bars themselves) are right aligned not centered.
For fun, I wrote a quick jsFiddle that showed how to switch datasets using a button (much as you want to do with the drop-down) and redraw the chart:
drawChart = function(index) {
var chartData = getDataForChart(rawData[index]);
if (chart) {
chart.setData(chartData);
chart.draw();
}
else {
chart = $.plot("#barchart", chartData, chartOptions);
}
},
switchDataset = function() {
datasetIndex = (datasetIndex + 1) % datasetCount;
drawChart(datasetIndex);
};
$("#switchButton").on("click", switchDataset);
Because I decided to load new data into the chart rather than redraw it all from scratch (to be honest I saw no real difference either way), it meant that I had to pre-calculate the maximum value for the y-axis:
calcValueMax = function() {
var max = 0;
rawData.forEach(function(values) {
values.forEach(function(value) {
if (value > max) {
max = value;
}
});
});
return max;
},
// other code
chartOptions.yaxis.max = calcValueMax();
Hope that helps.

Wijmo BarGraph - using an image on the axis

I am using Wijmo barcharts and am trying to create a graph which has images instead of labels on the x axis.
This is the code I have currently got, however, the image source is being printed out as a string rather than showing the image. Does anybody know of a way around this?
$(document).ready(function () {
defaultPalette = ['#e11a00', '#ddcd0e', '#005698'];
$("#wijbarchart").wijbarchart({
horizontal:false,
hint: {
content: function () {
return this.data.label + '\n ' + this.y + '';
}
},
seriesList: [{
label: "Entries",
legendEntry: true,
data: {
x: [<img src="photos/image1.jpg" />,<img src="photos/image2.jpg" />,<img src="photos/image3.jpg" />],
y: [22,10,65]
}
}],
painted: function (args) {
var bars = $(this).data('fields').chartElements.bars
if (bars.length > 0) {
for (var i in bars) {
bars[i].attr({ fill: defaultPalette[i % defaultPalette.length]});
}
}
},
mouseOut: function (e, data) {
data.bar.attr({ fill: defaultPalette[data.index % defaultPalette.length]});
}
});
});
Thanks!

Currently, there is no support for displaying images in place of valuelabels. However, I have made an enhancement for same to the development team and hopefully, it will be supported in future builds.
Regards
Ashish