We Keep Coding

Sync an html5 video with an highchart.js line chart

I have a one minute long video of a train moving and some data series about his position, onboard accelerometer etc.
My goal is to make line charts (with Highcharts.js) of those measurements that are dynamically drawn with the video at a rate of 20points per second. The charts have to move with the video, so that if the user go back also the charts go at the same frame and so on.
I was wondering if there's a way to attach an event to the video progress bar and redraw the chart every x milliseconds and/or every time that the user play/stop the video

Connecting timeupdate event for a video element with setData method for a Highcharts series should be enough.
Example:
let currentDataIndex = 0;
const video = document.getElementById("video1");
const chart = Highcharts.chart('container', {
series: [{
// Highcharts mutate original data array, so use a copy
data: data[currentDataIndex].slice()
}]
});
const updateChartData = index => {
chart.series[0].setData(data[index].slice());
currentDataIndex = index;
};
video.addEventListener('timeupdate', e => {
const second = Math.floor(video.currentTime);
if (second !== currentDataIndex) {
updateChartData(second);
}
});
Live demo: http://jsfiddle.net/BlackLabel/8a6yvjs5/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData
Docs:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

LightningJs - Find if chart is ready

I have x and y data fetched via ajax , after I fetch I add series like below
series.add({ x: xVal, y: yVal})
But problem is out of 5 times , 3 times chart not loading. I think it is because I try to add series before chart is ready. Is there any callback to know if chart is ready and then I can add the x and y to series ?

At least as of now, LCJS renders synchronously with animation frames so you can find out when the Chart has rendered its first frame (and is pretty much "ready") with requestAnimationFrame:
const chart = lightningChart().ChartXY()
// ... Chart application code ...
// Get informed when Chart has rendered.
requestAnimationFrame( () => console.log('ready') )
But you really shouldn't need to wait for the Chart before adding data to it.

Currently there is no callback to know when the chart is ready.
The behavior you described shouldn't be possible, as long as you're always creating the chart first, before the series - and creating the series before adding a point to it.
Please make sure the order of creation is Chart -> Series -> Series.add

Chart.js: bad alignment of label during ajax update

I use chart.js to display live data...
var doAjax = function() {
$.ajax({
url: url,
success: function(){
var currentTime = ++time
var currentValue = Math.random()*1000;
liveChart.data.labels.push(currentTime);
liveChart.data.datasets[0].data.push(currentValue);
liveChart.update();
},
complete: function () {
// Schedule the next
setTimeout(doAjax, interval);
}
});
};
doAjax();
...but at the beginning of the update, the first point is displayed in the center of the chart but its label is in the axes origin. How can I align first point and its label? Here is a jsfiddle to see the problem in action https://jsfiddle.net/uue7am8z/4/

After digging into the chart.js source, I can confirm that this is in fact a chart.js bug. When a line chart is created with a single label and single point, it incorrectly positions the rendering of the point.
I'm working on a fix for this, but in the mean time an official bug has been reported (#4037)

Redraw jqBarGraph

I'm using jqBarGraph to draw a graph on a page, but after the page loads, the graph updates with new values. How do I redraw the graph?
I'm updating the array I'm used to initialize the graph and then re-using it to initalize the graph (occurs within an each()).
Initial array:
array_msa_graph_1 = new Array(
[12300, 'MSA', '#88c100'],
[0, 'Gap', '#5e8500'],
[12300, 'ATB', '#74a400']
);
jQuery('#msa_graph_1').jqbargraph({
data: array_msa_graph_1
});
Updating array:
var graph_id = $(this).find('.msa_graph').attr('id');
var array_name = 'array_' + graph_id;
var graph_array = eval(array_name);
var msa_value = getMSA(graph_id);
graph_array[0][0] = msa_value;
$('#' + graph_id).jqbargraph({
data: graph_array
});
However, in the redraw process, it seems the array gets appended to the already existing graph and doesn't update the existing columns and labels.
What am I doing wrong?

Woah, this is quite an old post. I am also implementing bar graph using this plugin. I was having this trouble yesterday. I managed to solve this issue by taking a look at their page source. I found out that the person was able to clear the modification made on the graph. Hence, is this line of code that reset the values. $('#DivforGraph').html(''); //reset graph during dynamic change :)
*I will post the solution here.Maybe it might benefit someone who is facing the same problem as us! Cheers! ^_^

Why isn't my highcharts chart getting reset/destroyed properly?

In my code I'm initializing the chart like this...
<script type="text/javascript">
var chart = null,
defaultOptions = {
chart: etc etc
};
function drawDefaultChart() {
chart = new Highcharts.Chart(defaultOptions);
}
$(function() {
$(document).ready(function() {
drawDefaultChart();
});
});
</script>
then in the body I have
Reset
but when you click the link, all it does is redraw the graph with the settings from the previous state... I'm not quite sure what is going on. If I add chart.destroy(); the chart doesn't work at all...
function drawDefaultChart() {
chart.destroy(); //this makes the chart not work at all
chart = new Highcharts.Chart(defaultOptions);
}
You can clearly see that I 'm pasing default options to the chart that is suppose to get redrawn.... I don't understand why it uses the old filter settings, i'm about to jump off a bridge, can somebody PLEASE HELP?
my live example is here http://goo.gl/sGu0M
//////// UPDATE
I was able to do it with a lot of blood, sweat, and tears. I ended up putting the data into a php variable on another page (to save real estate), and then calling it using php variables, and then I just call it everytime someone clicks a link. I figured out that in order to redraw the graph, you have to reload ALL the data in each time. The PHP makes this easier in terms of amount of data on the screen.
this was the link that eventually helped me figure it out. http://jsfiddle.net/dane/YUa3R/34/

Always it's recommend to refer API documentation.
use following snippet to destroy the chart $('#container').highcharts().destroy();
Click here for a working solution.

First off, I know NOTHING about highcharts, but it would seem you need: (from your actual page)
function drawDefaultChart() {
$("#container").empty();
chart = new Highcharts.Chart(defaultOptions);
}
to be
function drawDefaultChart() {
$("#container").empty().highcharts(defaultOptions);
}
OR perhaps:
function drawDefaultChart() {
$("#container").highcharts(defaultOptions);
}