We Keep Coding

How to plot a single value with line in line chart graph using charts.js?

I need to plot a single value in line chart. Currently i am using charts.JS library for line graph purpose.
The data will be varied some times i'll get the single data inside the data set at that time i need to plot the single value with line in the line chart.
I tried with the charts.js annotation plugin but it wasn't met my requirements. which is like it wis overlapping the plotted point in the graph area.
CODE WHICH I HAD TRIED
createLineChart() {
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: "line",
data: {
labels:[],
datasets: [
{
fill: false,
backgroundColor: "#0168FF",
borderColor: "#0168FF",
pointBackgroundColor: "white", // wite point fill
pointBorderWidth: 1, // point border width
lineTension: 0,
pointBorderColor: "blue",
pointRadius: 4,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
padding: 20,
beginAtZero: true,
min: 0,
stepSize: 100,
},
gridLines: {
drawBorder: false,
},
},
],
xAxes: [
{
// offset: true,
ticks: {
display: false,
//beginAtZero: true,
min: 0,
},
gridLines: {
zeroLineColor: "transparent",
drawBorder: false,
display: false,
},
//offset:true,
},
],
legend: {
display: false,
},
tooltips: {
enabled: false,
},
},
drawTime: "afterDraw", // (default)
} as ChartOptions,
// plugins: [ChartAnnotation]
},
});
}
To generate dynamic data and plot in the graph area.
generateRandomDataSet(size) {
let yaxisArr = [];
let xaxisArr = [];
let random_data:any = this.getRandomData(size)
let maxYTickVal = Math.max.apply(Math, random_data.map((val) => {return val.yaxis}));
let maxVal = Math.ceil((maxYTickVal+1) / 10) * 10
for(let data of random_data) {
yaxisArr.push(data.yaxis)
xaxisArr.push(data.xaxis)
}
console.log("X-Axis array values : "+xaxisArr)
console.log("Y-Axis array values : "+yaxisArr)
this.lineChart.data.datasets[0].data = yaxisArr
this.lineChart.config.data.labels = []
this.lineChart.config.data.labels = xaxisArr
this.lineChart.config.options.scales.yAxes[0].ticks.max =maxVal
this.lineChart.config.options.scales.yAxes[0].ticks.stepSize = maxVal/2
this.lineChart.update()
}
getRandomData(arraySize) {
let data = []
for(var i=1; i<=arraySize; i++) {
let number = Math.floor(Math.random() * 200) + 1
data.push({'xaxis':i,'yaxis':number})
}
return data
}
with the above code i am getting like
what i need to have

You can define an animation.onComplete function as follows to draw the line in case a single data value is present.
animation: {
onComplete: e => {
var ctx = chart.chart.ctx;
var data = chart.config.data.datasets[0].data;
if (data[0] == null) {
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
var y = yAxis.getPixelForValue(data[1]);
ctx.save();
ctx.globalCompositeOperation='destination-over';
ctx.strokeStyle = 'blue'
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(xAxis.left, y);
ctx.lineTo(xAxis.right, y);
ctx.stroke();
ctx.restore();
}
}
},
This function expects the data array to be of format [null, <value>, null] in case a single value is present, otherwise it will be hard to horizontally center the data point (see this answer). It's up to you to change the generateRandomDataSet() function in a way that it provides such data.
Please have a look at your changed code below.
const chart = new Chart('line-chart', {
type: "line",
data: {
labels: ['', 'A', ''],
datasets: [{
data: [null, 120, null],
fill: false,
backgroundColor: "#0168FF",
borderColor: "#0168FF",
pointBackgroundColor: "white",
pointBorderWidth: 1,
lineTension: 0,
pointBorderColor: "blue",
pointRadius: 4,
}],
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
animation: {
onComplete: e => {
var ctx = chart.chart.ctx;
var data = chart.config.data.datasets[0].data;
if (data[0] == null) {
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
var y = yAxis.getPixelForValue(data[1]);
ctx.save();
ctx.globalCompositeOperation='destination-over';
ctx.strokeStyle = 'blue'
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(xAxis.left, y);
ctx.lineTo(xAxis.right, y);
ctx.stroke();
ctx.restore();
}
}
},
scales: {
yAxes: [{
ticks: {
padding: 20,
min: 0,
stepSize: 100
},
gridLines: {
drawBorder: false
}
}],
xAxes: [{
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawBorder: false,
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>

Chart js always show labels on a doughnut chart

So I have a doughnut chart, and I'm trying to keep the labels always on, and in my research I've found this but it doesn't seem to work, here's my code
function showPieChart(){
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [50,25,15,10],
backgroundColor: ['#585ba7','#999acb','#8ac0e9','#363e96'],
label: 'Dataset 1'
}],
labels: ['Token Sale','Foundation','Early Contributors','Team & Advisors']
},
options: {
tooltipTemplate: "<%= value %>",
showTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.datasets[0].points, true);
},
tooltipEvents: [],
cutoutPercentage: 90,
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
responsive: true,
legend: {
display: false,
},
title: {
display: false,
},
animation: {
animateRotate: true,
duration: 1000,
animateScale: true,
animationSteps: 15
}
}
};
var ctx = $("#pie-chart").get(0).getContext("2d");
Chart.defaults.global.maintainAspectRatio = false;
window.myDoughnut = new Chart(ctx, config);
}
I've added toolTipTemplate, showToolTips, onAnimationComplete, and toolTipEvents the same way than on the answer I found, but it doesn't seem to work, and chartjs documentations doesn't have anything on these. Therefore, I'm looking for the reason why this is not working, and how I could get it to work in a non hacky way.

Using the plugin from this github issue seems to work, assuming you are on the latest version of chartjs (2.7.1 at the time of this answer)
here is a fiddle with working plugin: https://jsfiddle.net/Lngyxg3r/
here is the code from that fiddle:
html:
<canvas id="pie-chart"></canvas>
js:
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
function showPieChart(){
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [50,25,15,10],
backgroundColor: ['#585ba7','#999acb','#8ac0e9','#363e96'],
label: 'Dataset 1'
}],
labels: ['Token Sale','Foundation','Early Contributors','Team & Advisors']
},
options: {
tooltipTemplate: "<%= value %>",
showTooltips: true,
showAllTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.datasets[0].points, true);
},
tooltipEvents: [],
cutoutPercentage: 90,
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
responsive: true,
legend: {
display: false,
},
title: {
display: false,
},
animation: {
animateRotate: true,
duration: 1000,
animateScale: true,
animationSteps: 15
}
}
};
var ctx = $("#pie-chart").get(0).getContext("2d");
Chart.defaults.global.maintainAspectRatio = false;
window.myDoughnut = new Chart(ctx, config);
}
showPieChart();

Chartjs hovering over one Chart, shows tooltip across all charts

I am using ChartJS with angular (https://jtblin.github.io/angular-chart.js/)
I am able to get a vertical line in my chart when hovering using How to render a vertical line on hover in chartjs example.
I tried looking for examples of a curved line chart where the X-axis has a shared date range between all charts in DOM, but Y-axis has different values. Hovering over any chart will trigger hover over all available charts and display that vertical line like above with a tool-tip on all charts

tooltips: {
mode: 'x-axis'
},
If I understand what you want correctly, this should do it.

This jsfiddle may be able to help you:
https://jsfiddle.net/vikas12118/k4oveLsb/
var charts = [];
$(document).ready(function () {
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
if (charts) {
for (var i = 0; i < charts.length; i++) {
charts[i].tooltip._active = [];
charts[i].tooltip.update(true);
charts[i].draw();
}
}
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-0'].top,
bottomY = this.chart.scales['y-axis-0'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2;
ctx.strokeStyle = '#07C';
ctx.stroke();
ctx.restore();
if(charts)
{
showTooltip(chart1.chart.tooltip._active[0]._index);
}
}
}
});
var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart1 = new Chart(ctx1, {
type: 'LineWithLine',
data: {
labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
datasets: [{
lineTension: 0,
backgroundColor: "rgb(34,139,34)",
borderColor: "rgb(34,139,34)",
data: [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22],
fill: false,
pointRadius: 1.5,
pointHoverRadius: 1,
borderWidth :1.5
}],
},
options: {
maintainAspectRatio: false,
responsive: false,
/*legend: {
display: false
}, s: {
displayColors: false
},*/
hover: {
mode: 'index',
intersect: false,
},
title: {
display: true,
text: ''
},
legend: {
display: false
},
tooltips: {
mode: 'index',
//enabled: false,
intersect: false,
},
}
});
var ctx2 = document.getElementById('myChart2').getContext('2d');
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.scales['y-axis-0'].top,
bottomY = this.chart.scales['y-axis-0'].bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 2;
ctx.strokeStyle = '#07C';
ctx.stroke();
ctx.restore();
}
}
});
var chart = new Chart(ctx2, {
type: 'LineWithLine',
data: {
labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
datasets: [{
lineTension: 0,
backgroundColor: "rgb(34,139,34)",
borderColor: "rgb(34,139,34)",
data: [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8],
fill: false,
pointRadius: 1.5,
pointHoverRadius: 1,
borderWidth :1.5
}],
},
options: {
maintainAspectRatio: false,
responsive: false,
title: {
display: true,
text: ''
},
legend: {
display: false
},
tooltips: {
mode: 'index',
//enabled: false,
intersect: false,
},
}
});
charts.push(chart)
});
function showTooltip(index) {
if (Array.isArray(charts) && charts.length) {
for (var i = 0; i < charts.length; i++) {
var segment = charts[i].getDatasetMeta(0).data[index];
charts[i].tooltip._active = [segment];
charts[i].tooltip.update(true);
charts[i].draw();
}
}
}
html content
<div>
<canvas style="width: 800px" height="300px" id="myChart1"></canvas></div>
<div>
<canvas style="width: 800px" height="300px" id="myChart2"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

High and low points on chart getting cut off

The low and high points on this chart are getting cut off, is there any way to fix this without knowing what numbers will be in the data?
I've seen other people create some padding with the chart's minimum and maximum values, but I don't know what the values will be beforehand.
Chart:
A similar example suffering from the same problem is shown here: http://codepen.io/erose/pen/LNwdQO/
Here's the HTML:
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
Here's the CSS:
.chart-container {
width: 493px;
height: 83px;
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
and here the JS used to create the above chart:
var ctx = $("#chart");
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.backgroundColor = "lightblue";
Chart.defaults.global.tooltips.bodyFontFamily = "sans-serif";
Chart.defaults.global.tooltips.bodyFontSize = 20;
Chart.defaults.global.tooltips.bodyColor = "#95989a";
Chart.defaults.global.tooltips.bodyAlign = "left";
Chart.defaults.global.tooltips.titleFontSize = 0;
Chart.defaults.global.tooltips.titleMarginBottom = 0;
Chart.defaults.global.tooltips.footerMarginTop = 0;
Chart.defaults.global.tooltips.cornerRadius = 12;
Chart.defaults.global.tooltips.caretSize = 10;
Chart.defaults.global.tooltips.xPadding = 20;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.scale.gridLines.color = 'white';
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [" ", "", "", "", "", "", "", "", "", " "],
datasets: [{
label: '$',
data: [100,100,100,100,0,100,100,100,100,100],
fill: false,
borderWidth: 1,
borderColor: "#2f75c1",
borderCapSytle: "round",
pointBorderColor: "#2f75c1",
pointBackgroundColor: "#2f75c1",
pointBorderWidth: 5,
pointHoverRadius: 10,
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
display: false
},
scaleLabel: {
display: false
},
scaleLkneColor: 'white',
ticks: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
scaleLabel: {
display: false
},
// ticks: {
// display: false
// }
}]
}
}
});

From reading your question I believe you not only want the for the circle to not be cut off but you would like some extra padding inside the chart.
For that I would structure this a little different:
var ctx = $("#chart");
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.backgroundColor = "lightblue";
Chart.defaults.global.tooltips.bodyFontFamily = "sans-serif";
Chart.defaults.global.tooltips.bodyFontSize = 20;
Chart.defaults.global.tooltips.bodyColor = "#95989a";
Chart.defaults.global.tooltips.bodyAlign = "left";
Chart.defaults.global.tooltips.titleFontSize = 0;
Chart.defaults.global.tooltips.titleMarginBottom = 0;
Chart.defaults.global.tooltips.footerMarginTop = 0;
Chart.defaults.global.tooltips.cornerRadius = 12;
Chart.defaults.global.tooltips.caretSize = 10;
Chart.defaults.global.tooltips.xPadding = 20;
Chart.defaults.global.tooltips.yPadding = 10;
Chart.defaults.scale.gridLines.color = 'white';
var getData = [100,100,100,100,0,100,100,100,100,100];
var getLabels = ["", "", "", "", "", "", "", "", "", ""];
var minNum = function(array){
return Math.min.apply( Math, array )-10;
}
var maxNum = function(array){
return Math.max.apply( Math, array )+10;
}
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: getLabels,
datasets: [{
label: '$',
data: getData,
fill: false,
borderWidth: 1,
borderColor: "#2f75c1",
borderCapSytle: "round",
pointBorderColor: "#2f75c1",
pointBackgroundColor: "#2f75c1",
pointBorderWidth: 5,
pointHoverRadius: 10,
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
display: false
},
scaleLabel: {
display: false
},
scaleLkneColor: 'white',
ticks: {
suggestedMin: minNum(getData),
suggestedMax: maxNum(getData),
}
}],
xAxes: [{
gridLines: {
display: false
},
scaleLabel: {
display: false
},
// ticks: {
// display: false
// }
}]
}
}
});
.chart-container {
width: 493px;
height: 83px;
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<div class="chart-container">
<canvas id="chart"></canvas>
</div>
2 Important changes
I create a getData var to hold the array this way the array can be formatted however you like the function does not care it just looks for getData and expects an array.
I created a minNum and maxNum function to go through the array and select either the lowest or highest number then call that inside the ticker you can find more on this at ChartJS Scales

Drag and drop overlapping points

I have a graph plotted with a multitude of lines, a rather big figure overlapping the lines and ontop of that is a point that is capable of being drag and dropped all over the plot by the user.
The problem I'm facing currently is that as soon as the user drags and drops the point straight ontop of a line or a point of the figure, the user is unable to drag and drop the point away. I have set up a fiddle with my current setup.
JavaScript/jQuery code:
$(function() {
var startPoint = [[7.00, 0]];
var line10 = HHIsoPleth(7.00, 7.80, 10);
var line120 = HHIsoPleth(7.00, 7.80, 120);
var options = {
series: {
points: {
editMode: "none",
show: true,
radius: 0,
symbol: "circle",
fill: true,
hoverable: false,
},
lines: {
editMode: "none",
editable: false,
hoverable: false,
clickable: false
}
},
yaxes: [ {
position: "left",
min: 0, max: 60,
tickSize: 4,
} ],
xaxes: [ {
position: "bottom",
min: 7.00, max: 7.80,
} ],
grid: {
backgroundColor: "transparent",
editable: true,
hoverable: true,
clickable: false,
},
legend: {
position: "nw"
},
};
var data = [
{ data: line10, label: "PCO2", lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
{ data: line120, lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
{ data: startPoint, label: "Bloedzuur gehalte", lines: { show: true }, points: { show: true, radius: 3 }, editable: true, editMode: 'xy', color: '#00FF00' },
];
var plot = $.plot($("#flot-placeholder"), data, options);
// Drag and drop
$("#flot-placeholder").bind("datadrop", function(event, pos, item) {
var PCO2 = getPCO2(pos.x1.toFixed(2), pos.y1.toFixed(2));
var pH = getPH(pos.y1.toFixed(2), PCO2);
var HCOmm = getHCO3(pH, PCO2);
updatePoint(pH, HCOmm);
});
// Generate red lines / isopleths
function HHIsoPleth(minPH, maxPH, PCO2){
var isoPleth = [];
for (var i = minPH; i < maxPH; i+=0.01){
HCOmm = (0.03 * PCO2 * Math.pow(10,i-6.1));
isoPleth.push([i,HCOmm]);
}
return isoPleth;
}
function getHCO3(ph, pco2) {
return 0.03 * pco2 * Math.pow(10, ph - 6.1);
}
function getPH(hco3, pco2) {
return 6.1 + Math.log10(hco3 / (0.03 * pco2));
}
function getPCO2(ph, hco3) {
return (hco3 / 0.03) * Math.pow(10, 6.1 - ph);
}
//Reset point
$("#davenportReset").click(function() {
updatePoint(7.00, 0);
});
function updatePoint(x, y) {
data[16].data[0] = [x, y];
$.plot($("#flot-placeholder"), data, options);
}
// Debug purpose, get the index of the point that is clicked
$("#placeholder").bind("plotdown", function(event,pos,item){
$("#log").append("\nplotdown(" + item.seriesIndex + ")");
});
});
Additional libraries: Flot.js, JUMFlot
HTML:
<input class="davenportInput" id="davenportReset" type="button" value="Reset Point" />
<div id="flot-placeholder" style="width:558px;height:511px"></div>
eventlog<textarea id="log" rows="15" cols="28"></textarea>
In the provided fiddle you'll see that you can drag and drop the green point all around the plot. But once you drop it ontop any of the red lines it is no longer possible to drag and drop the green point somewhere else. In the textarea you'll see that when you click the green point, plotdown(16) will be shown in the textarea. But will show plotdown(0-15) when it is clicked when the point is over any of the red/yellow lines.
Would it be possible to get the 16th data serie(the drag and drop point) when it's overlapping any of the red lines?
Using (once again) Mark's answer I solved it. One condition I had though was that I had to keep the green point above all other lines.
This is what I did:
var startPoint = [[7.00, 0]];
var invisPoint = [[7.00, 0]];
var line10 = HHIsoPleth(7.00, 7.80, 10);
var line120 = HHIsoPleth(7.00, 7.80, 120);
To create a invisible placeholder point.
I than added it to the data object
var data = [
{ data: invisPoint , lines: { show: false }, points: { show: false, radius: 3 }, editable: true, editMode: 'xy', color: '#00FF00' },
{ data: line10, label: "PCO2", lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
{ data: line120, lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
{ data: startPoint, label: "Bloedzuur gehalte", lines: { show: true }, points: { show: true, radius: 3 }, editable: true, editMode: 'xy', color: '#00FF00' },
];
And updated the updatePoint function
function updatePoint(x, y) {
var data = plot.getData();
data[0].data[0] = [x, y]; // Invisible point
data[17].data[0] = [x, y]; // Green point
plot.setData(data);
plot.draw();
}
This way, the invisible point gets selected and dragged and dropped. I simply use those coordinates to position the green point aswell.

Internally, flot or jumflot in this case, when you mousedown is searching the points to see if one is near enough to your mouse cursor. It searches the points in order and finds your line segment before the point. So, simple fix, place your move-able point first:
var data = [
{ data: startPoint, label: "Bloedzuur gehalte", lines: { show: true }, points: { show: true, radius: 3 }, editable: true, editMode: 'xy', color: '#00FF00' },
{ data: line10, label: "PCO2", lines: { show: true, lineWidth: 1 }, points: { show: false }, editable: false, clickable: false, hoverable: false, color: "#FF0000" },
....
In addition, update your plot like this:
function updatePoint(x, y) {
var data = plot.getData();
data[0].data[0] = [x, y];
plot.setData(data);
plot.draw();
}
Calling $.plot over and over again is expensive and will probably leak memory (it used to at least - not sure if it was every fixed).
Updated fiddle.