I try to use the plugin zoom from chartjs with the version 7 of the api.
I would like to be able to zoom when the selection of a zone of drag is finished.
Once zoomed, I would like to be able to move the chart to reach the other values.
I have try the v4,v5,v6 whith the zoom plugin but the result is always the same : When I try to select the drag zone all the chart move, it moves incredibly fast and its begin difficult to use it.
May be I don't use correctly the plugin but I've tried some other configuration the result is still the same..
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
responsive: false,
type: 'line',
data: {
labels: [0, 1, 3, 4, 5, 6],
datasets: [{
label: 'Test1',
data: [12, 19, 3, 5, 2, 3]
},{
label: 'Test2',
data: [14, 16, 4, 3, 1, 2]
}
]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
drag: true,
enabled: true,
mode: 'xy'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.5.0/chartjs-plugin-zoom.min.js"></script>
<canvas id="myChart" height=200/>
I solved this problem in my project:
first changed :zoom: {
sensitivity:0.5,
drag: true,
enabled: true,
mode: 'xy'
}
second changed plugin as in this post:
pan on chart.js also zoom on line charts
my plugin version is 5.
Related
After adding zoom to my line chart no matter what I do it instantly zooms in to the first point without the option to zoom back out (outside of the reset zoom function). The zoom out function also doesnt work, zoom in function results in the same problem.
Normal
After any attempt to zoom
const pdmdata = JSON.parse(document.getElementById('div_pdmdata').dataset.chart);
const ctx = document.getElementById('canvasChart_1').getContext("2d");
const radars = {'hidden': 'hidden'};
let linechartData = {
datasets: [{
label: 'Constant',
data: pdmdata[0],
borderWidth: 1
}]
};
for (let i = 0; i < Object.keys(pdmdata[1]).length; i++) {
linechartData.datasets.push({
label: radars[Object.keys(pdmdata[1])[i]],
data: pdmdata[1][Object.keys(pdmdata[1])[i]],
borderWidth: 1,
tension: 0.1
});
}
const config = {
type: 'line',
data: linechartData,
options: {
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: 'Mode S'
},
zoom: {
zoom: {
drag: {
enabled: true,
// mode: 'x',
threshold: 24
},
mode: 'x'
}
}
},
scales: {
x: {
reverse: true
}
},
elements: {
point: {
radius: 0
}
}
},
};
myChart = new Chart(ctx, config);
function resetZoom(){
myChart.resetZoom();
}
I've tried all the zoom types; zoom, drag and pan. Even using drag in the middle of the chart makes it end up like the zoomed image above. No errors in console whatsoever. I've also tried setting the speed to 0.001 but to no avail. Weirdest thing is when I make a duplicate of this chart below it that one does zoom as intended. I have no idea why it would though.
Okay so I found my issue, chartjs-zoom does not like objects as data without also setting labels yourself. Here's an example: (Only used 1 dataset while testing to make it easier to test)
This works:
let linechartData = {
label: ['one', 'two', 'three', 'four', 'five'],
datasets: [{
label: 'Constant',
data: [1, 2, 3, 4, 5],
borderWidth: 1
}]
};
This does not work:
let linechartData = {
datasets: [{
label: 'Constant',
data: {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5},
borderWidth: 1
}]
};
But this does:
let linechartData = {
label: ['one', 'two', 'three', 'four', 'five'],
datasets: [{
label: 'Constant',
data: {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5},
borderWidth: 1
}]
};
So conclusion, when using chartjs-zoom always assign the labels beforehand instead of letting a dataset data object assign them automatically, which works just fine for normal charts without zoom. Never figured out why if I made a 2nd chart with the exact same config that chart did work though.
I'm trying to get the labels of the x-axis in the bar chart to NOT be positioned directly under each bar (which is default setting) but instead stand in the left / right side of the bars. As it is preferred when drawing a histogram. The left and right label of each bar would then be the interval for that bar.
I found out from the documentation it has something to do with the property grid:{offset:true} that I should apply to the x-axis, but the code isn't working for me. The labels are still directly underneath each bar.
Documentation
What am I doing wrong? Any help is much appreciated!
const ctx = document.getElementById('canvas').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 4, 5, 6, 7],
datasets: [{
label: 'Number of Arrivals',
data: [19, 28, 20, 16, 50, 65, 58],
backgroundColor: 'green',
}]},
options: {
scales: {
xAxes: [{
display: false,
ticks: {max: 10,},
grid: {offset: true}},
{
display: true,
ticks: {autoSkip: false, max: 10,},
grid: {offset: true}
}],
yAxes: [{
ticks: {beginAtZero: false}
}]
}
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
</head>
<body>
<h1>The select element</h1>
<canvas id="canvas" aria-label="Canvas with graph" role="img"></canvas>
</body>
</html>
The main reason you can't get it to work is because you use the code from this question, which is written for version 2.7, and you are using version 3.2. There are many breaking changes with version 3, including many different names in the options.
I couldn't get it working either, but it should be easily possible with a 3.x version.
Here's a link to a GitHub post including a jsfiddle link.
How do I render superscript or subscript in a 3D chart?
Right now I'm doing like this:
xAxis3D: { scale: true, gridIndex: 0, name: "f0" },
yAxis3D: { scale: true, gridIndex: 1, name: "f1" },
zAxis3D: { scale: true, girdIndex: 2, name: "f2" },
and the y-axis label in the plot looks like this:
Instead of f2, is there any way I can label it like f₂ (similar to f<sub>2</sub> in html)?
Also, is there any way to use latex or mathjax within echarts?
As I know Echarts doesn't have this or similar features. But even if it did, it’s not enough. Need improve the zRender (visualization engine) to support this feature.
I would to recommend for you to capture the values and replace to Unicode symbol in formatter, see example:
var myChart = echarts.init(document.getElementById('main'));
var chars = ['\u00BC', '\u00BD', '\u00BE', '\u2150', '\u2151', '\u2152'];
var option = {
xAxis: [{
data: [0, 1, 2, 3, 4, 5],
axisLabel: {
formatter: (val, idx) => chars[parseInt(val)],
}
}],
yAxis: [{}],
series: [{
name: 'Series',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Addition:
Online Converter LaTeX expression to Unicode
Ready to use library on npm
P.S. Just for my: have you ever seen JS-charts with embedded Latex?
Edit: The answer below was answered partially, but it helped me get to the final solution. The Fiddle has been updated with what I wanted.
Here's a radar chart I'm working on: https://jsfiddle.net/bigtrouble77/02p81jhr/4/
Chart.defaults.global.defaultFontColor = "#eee";
var radarData = {
labels: [ "Passing", "Positioning", "Stickhandling", "Wristship",
"Determination", "Acceleration", "Speed" ],
datasets: [
{
label: false,
data: [4, 6, 2, 3, 7, 9, 8],
backgroundColor: "rgba(220,220,220,0.2)",
borderColor: "#eee",
borderWidth: 1
}
]
};
var radarOptions = {
responsive: true,
maintainAspectRatio: true,
title: {
display: false
},
legend: {
display: false,
}
};
var ctx5 = document.getElementById("radarChart").getContext("2d");
new Chart(ctx5, { type: 'radar', data: radarData, options: radarOptions });
I have had a very difficult time finding any info on how to configure this chart to do the following:
increase the font size of the text
change the color of the "web" lines
remove the unsightly vertical boxes
change the scale to 1-20, so that 20 is always the highest level in the chart, not the highest number in the data set.
I've not been able to find any info in the docs on how to do any of this. I've had some success using older versions of Chart.js, but the api seems to have changed significantly so none of that works with the latest version of Chart.js. Any help would be greatly appreciated.
Simply replace with :
var radarOptions = {
scale:{
pointLabels: {
fontSize: 20
},
},
responsive: true,
maintainAspectRatio: true,
title: {
display: false
},
legend: {
display: false,
}
};
I am attempting to use a different symbol for one of my data series on my flot graph as it is at a much larger scale then the rest of the data. I am using this example as reference: http://www.flotcharts.org/flot/examples/symbols/index.html
Here is what I have so far:
My includes:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
I then configure my flot options like so:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
series: { points : { show: true } }
};
I then actually plot the data:
$.plot('#placeholder', [{
data: my_data,
lines: { show : true},
points: { symbol: "square"},
color: '#CB4B4B',
label: 'My Data'
}], options);
}
However, flot is still graphing the points as the default circle. I get no error messages in firebug and I have even tried adding a logging message in the jquery.flot.symbol.js library itself to see if the "square" handler is even being called like so:
var handlers = {
square: function (ctx, x, y, radius, shadow) {
console.log("Square handler was called");
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.rect(x - size, y - size, size + size, size + size);
},
I am getting no console messages so I am assuming the handler is not getting called correctly. Am I missing something here?
EDIT:
Example of data I am trying to plot:
var d1 = [
[1364342400000, 208],
[1364346000000, 107],
[1364353200000, 42],
[1364371200000, 1680],
[1364360400000, 52],
[1364349600000, 67],
[1364385600000, 1118],
[1364367600000, 163],
[1364382000000, 1359],
[1364378400000, 1468],
[1364389200000, 1023],
[1364356800000, 63],
[1364374800000, 1601],
[1364392800000, 556],
[1364364000000, 84],
],
d2 = [
[1364342400000, 86],
[1364346000000, 42],
[1364353200000, 13],
[1364371200000, 458],
[1364360400000, 10],
[1364349600000, 22],
[1364385600000, 453],
[1364367600000, 45],
[1364382000000, 369],
[1364378400000, 379],
[1364389200000, 358],
[1364356800000, 17],
[1364374800000, 471],
[1364392800000, 147],
[1364364000000, 16],
],
d3 = [
[1364342400000, 7],
[1364346000000, 5],
[1364382000000, 11709],
[1364371200000, 58336],
[1364360400000, 1],
[1364349600000, 1],
[1364367600000, 2],
[1364389200000, 1191],
[1364378400000, 9085],
[1364385600000, 4688],
[1364374800000, 9386],
[1364392800000, 1140],
[1364364000000, 1],
];
I have also edited my options parameter and how the plot function is called:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1}
};
$.plot("#placeholder", [{
data: d1,
lines: { show : true },
points: { show: true},
color: '#EDC240',
label: "d1"
}, {
data: d2,
lines: { show : true },
points: { show : true},
color: '#AFD8F8',
label: "d2"
}, {
data: d3,
yaxis: 2,
lines: { show : true},
points: { show: true, symbol: "square"},
color: '#CB4B4B',
label: "d3"
}], options);
I am also sure that the symbol library is being included because I have added some logging itself to the library and that is showing up fine.
I see no issue with what you've done. I made a quick working example here: http://jsfiddle.net/ryleyb/shLtU/1/
I would guess that you haven't included the symbol library (even though you say you have).
Or show your data, might somehow be an issue there (doubtful?).
This is the full flot code I ran to make a working example (plus including flot and the symbol library):
$.plot('#placeholder', [{
data: [
[1, 1],
[2, 3],
[4, 4],
[5, 9]
],
lines: {
show: true
},
points: {
show: true,
symbol: "square"
},
color: '#CB4B4B',
label: 'My Data'
}]);