Develop Reference

Chartjs-plugin-zoom plugin does not change x axis labels

I am working with the chart.js module in order to plot some data and am using the chartjs-plugin-zoom in order to enable zooming and panning however although the zooming works the labels on the x axis will not change for whatever reason.
I have seen similar questions but they all dealt with time series data and therefore the advice was unhelpful.
Here is the plot zoomed out:
and here is it zoomed in:
The key thing to notice is how the labels on the y axis have changed but the x axis labels have not changed. Here is the relevant config variable of the chart:
const config3 = {
type: 'line',
data: {
labels: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
datasets: [
{
label: "",
backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
borderColor: '#0071BC',
data: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
fill: false,
borderWidth: 1,
},
],
},
options: {
responsive: true,
title: {
display: true,
text: 'Peak: -1.2188'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Frequency (Hz)'
},
ticks:{
autoSkip: true,
maxTicksLimit: 20
},
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Amplitude'
}
}],
},
plugins:{
zoom: {
pan: {
enabled: true,
mode: 'xy',
speed: 20,
threshold: 10,
},
zoom: {
enabled: true,
drag: false,
mode: "xy",
speed: 0.1,
// sensitivity: 0.1,
}
}
},
elements: {
point:{
radius: 0
}
}
}
};
If needed I can provide more code but I imagine the mistake is probably contained in the config. I tried changing zoom.mode to be 'x' but that did not work.

In case someone else comes along this I figured out a solution that is pretty unintuitive.
The first problem is the way that labels are dealt with in chart.js and because they are treated as categories not x data the way that I thought they were. Therfore first you must pass your data in as coordinates in this format:
(as shown in this documentation: https://www.chartjs.org/docs/latest/charts/line.html)
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
And delete the labels variable.
However this will not work with line charts despite what the documentation says. To get around this you can set: type: 'scatter' and inside the dataset write showLine: true
This will generate a line plot where the x labels are auto generated and zooming will work perfectly.
I also think there was a performance boost which is a nice bonus.

Zingchart - some points are hidden in the graph

I use Zingchart to plot some log Data therefore I need to display every single point in the graph. I activated the points attribute in the json(see
$scope.graphoptions = {
theme:"dark",
"gui":{
behaviors:[]
},
globals: {
shadow: false,
fontFamily: "Helvetica"
},
type: "line",
plot: {
aspect: "segmented",
marker: {}
},
"legend":{
margin :"5% 88%",
layout: "float",
fontSize : "10px",
backgroundColor: "#888888",
borderColor : "#000000",
shadowColor : "transparent",
toggleAction: "hide",
item: {
markerStyle : "circle",
fontColor: "#ffffff"
},
},
scaleX: {
zooming: true,
item: {
fontColor: "white"
},
guide: {
visible: false
},
"transform": {
"type": "date",
"all": "%G:%i",
}
},
"scaleY": {
zooming:true,
lineColor : "#DDD",
tick : {
lineColor : "#DDD"
},
item : {
fontColor : "#DDD"
},
refLine : {
lineColor : "#DDD"
},
},
tooltip : {
//we have to store the tooltip fkt globally so its ouside angulars
//scope thatswhy we have to pass the data to the function
jsRule : "applyTooltip("+$scope.fileName+")",
shadow:false
},
plotarea: {
"adjust-layout":true,
backgroundColor : '#272822'
},
}
for full json).
As you can see in this screenshot
Some points of the read Graph are drawn but none of the blue one.
When I zoom in:
Some markers of the Blue graph are displayed.
Is this a bug or do I have to activate an other attribute in the json I am not aware of.
Thanks in advance!

Assuming that your data is supposed to plot on those points, then you would need to increase the number of default markers drawn on the plot. By default, ZingChart calculates this number based upon the number of points, and the width of a chart.
maxNodes: N where N is the maximum amount of nodes you want displayed at a given point. e.g. maxNodes: 1000
If tooltips are important at a fine resolution, you would need to also change maxTrackers: N, where N is the amount of nodes to track for a tooltip. Do note that this will decrease performance heavily depending on the number of nodes to track. e.g. maxTrackers: 1000

Flot Graph not plotting data

I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.
My code is here:
init: function()
{
// apply styling
charts.utility.applyStyle(this);
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: this.data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: this.data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
}
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},

So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:
1.) You no longer seem to have a parent charts object, so
charts.utility.applyStyle(this);
isn't going to work.
2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.
3.) In your sample code you never actually call the init function to draw the plot.
4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).
Taking all this into account here's a fiddle which makes this code work.
Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.
Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.

This code is working
//Defining data for the chart
var data=
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
};
//Defining options for the chart
var options=
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}};
// shorthand for document.ready
$(function(){
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
});
Check out the working example here on jsfiddle.

Data labels cutting off in jqPlot

I'm working with jqplot, and am seeing some odd series label behavior.
If the value is too large, the labels don't show. I can't find a setting that preserves canvas area for the labels. Any thoughts?
[example fiddle] http://jsfiddle.net/abenrob/nDcPB/11/
$(document).ready(function(){
optionsObj = {
grid: {
background: "rgba(0,0,0,0.0)",
drawBorder: false,
shadow: false
},
seriesColors: ["#6699FF"],
seriesDefaults:{
shadow:false,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barWidth:15,
barMargin: 5
}
},
series:[
{pointLabels:{
show: true
}}],
axesDefaults: {
rendererOptions: {
drawBaseline: false
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions:{
showGridline:false,
markSize:0
}
},
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
}
}
}
};
// labels not shown
plot = $.jqplot('chart1', [[[507740000000,'Budget'],[496740000000,'Forecast'],[506740000000,'Expended']]], optionsObj)
// labels shown
plot2 = $.jqplot('chart2', [[[50774000,'Budget'],[49674000,'Forecast'],[50674000,'Expended']]], optionsObj)
});

Doesn't seem like jqPlot will render them if there's not enough space to the right of your bars. You can use the xaxis pad option to provide more space but I also had to throw a min: 0 in there to get the auto-scaling to behave a little saner:
...
xaxis:{
tickOptions:{
show: false,
showGridline:false,
markSize:0
},
min: 0,
pad:1.8
}
...
Updated fiddle here.

jqplot label one point on the plot

I have a figure including two lines (one horizontal line, and one parabolic curve), and I would like to show the value of the crossing over point as well as label it with text "MSY". I tried to use the option pointLabels, but it seemed like I did not find the right way. Can anyone give me some hints? Here is the demo of the problem.
jquery code:
$(document).ready(function() {
$.jqplot.config.enablePlugins = true;
var s1 = [[0.0, 0.0], [1.0, 0.036], [2.0, 0.064], [3.0, 0.084], [4.0, 0.096], [5.0, 0.1], [6.0, 0.096], [7.0, 0.084], [8.0, 0.063], [9.0, 0.036], [10.0, 0.0]];
$.jqplot('chart1', [s1], {
seriesDefaults: {
showMarker: false,
pointLabels: {
show: false
}
},
axes: {
xaxis: {
label: 'X label',
pad: 0
},
yaxis: {
label: 'Y label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
legend: {
show: true,
location: 'ne',
placement: 'inside',
fontSize: '11px'
},
canvasOverlay: {
show: true,
objects: [
{
horizontalLine: {
y: 0.1,
color: 'rgb(100, 55, 124)',
show: true,
}}
]
},
pointLabels: {
show: true,
labels: [[5, 0.10]],
hideZeros: true
}
})
})​

There is no straight solution but assuming the parabola to be uniform. I just made some assumptions to calculate the vertex of a parabola. Its just an approximation .And prepared an array that could be feeded to Series label.
var k = Math.round(s1.length / 2); //Assuming your Parabola to be uniform
var l = [];
var i=0;
while(i<(k-1))
{
l.push("");
i++;
}
l.push('MSY');
Now we have the l array now I would feed it to the series option so as to get the required result.
series: [
{
pointLabels: {
show: true,
labels: l
}}],
I have made the necessary changes in fiddle and updated it http://jsfiddle.net/JWhmQ/292/ .
I would recommend you to find a small plugin or build a small script which would give you the tip or vertex of the parabola and use the above for that. It would solve your problem.