I'm trying to chart a time scatter plot using vue-chartjs but am having trouble getting the line tension to work. If I set the tension option for the data set to anything but 0 the line disappears.
The chart data and options (just some dummy data for now):
const chartOptions = {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: false
}
};
const chartData = ref({
datasets: [
{
data: [
{ x: 0, y: 5 },
{ x: 3, y: 4 },
{ x: 5, y: 7 },
{ x: 8, y: 13 },
{ x: 13, y: 6 },
{ x: 18, y: 2 },
{ x: 25, y: 11 },
],
backgroundColor: "#ED1369",
borderColor: "#ED1369",
showLine: true,
tension: 0,
pointRadius: 3.5,
pointHoverRadius: 3.5,
borderWidth: 2
}
]
});
Result with no tension (tension: 0):
Chart showing lines with no tension
Result with tension (tension > 0):
Chart breaking and no longer showing lines
I've tried using both "tension" and "lineTension" options, as well as the "cubicInterpolationMode" option. I have also tried various combinations of those options. I have tested and found that Chart.js does support curved lines on scatter plots.
Turns out you have to register the Filler component.
https://github.com/apertureless/vue-chartjs/issues/988
Related
Im new to Chart.js and im trying make a line chart where it is possible to click somewhere in the line graph and retrieve the full data object.
This is what my chart looks like right now which is working fine but now I would like to use this my own data
const myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['9:00', '12:00', '15:00', '9:00', '12:00', '15:00', '9:00', '12:00', '15:00', '9:00', '12:00', '15:00',],
datasets: [{
label: 'Cardscans',
data: [
214,
200,
195,
214,
200,
320,
214,
200,
299,
214,
200,
210],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.2,
pointStyle: 'circle',
pointRadius: 5,
pointHoverRadius: 15
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}});
So now I want to fill the line chart with the total scans and the pie chart with 'successful' and 'failed'.
I would like to use for example this array of objects:
[
{
id: 1,
date: '01-10-2022',
Scans: {
total: 206151,
times: [
{
time: '12:00 - 13:00',
successful: 12283,
failed: 24,
0: 12184,
1: 55,
2: 22,
3: 12,
4: 8,
5: 2,
}
]
}
},
{
....
}]
What I want to achieve is to fill a pie chart with the 'successful' and 'Failed' data. But I want to do this based on the previous clicked data in the Line chart.
So my question is not about how to click something in the line chart but more about how i fill my line chart with the data above and pull the specific object to fill the other pie chart with.
Thanks in advance
I am try to display a billboardjs bubble chart using javascript and html.
I included the lib in my index.html file as:
src="/lib/billboard.pkgd.js"
The codes are very simple but when ran, I got the "NaN" error.
this.d3Chart = bb.generate({
bindto: "#d3bubbleChart",
data: {
type: "bubble",
label: false,
xs: {
data1: "x1",
data2: "x2"
},
columns: [,
["x1", 10, 20, 50, 100, 50],
["x2", 30, 40, 90, 100, 170],
["data1", [20, 50], [30, 10], [50, 28], [60, 70], [100, 80]],
["data2", [350, 50, 30], [230, 90], [200, 100],[250, 150],[200, 200]]
]
},
bubble: {
maxR: 50
},
grid: { y: { show: true } },
axis: {
x: {
label: { text: "AOV", position: "outer-left"},
height: 50,
tick: { format: function(x) { return ("$"+x);}}
},
y: {
fit: false,
min: {fit: true, value: 0},
max: 450,
labels: "yes",
label: { text: "Conversion Rate", position: "outer-bottom"},
tick: { format: function(x) { return (x+"%");}}
}
}
});
Checkout the allowed data for bubble type from API doc:
For 'bubble' type, data can contain dimension value:
- an array of [y, z] data following the order
- or an object with 'y' and 'z' key value
'y' is for y axis coordination and 'z' is the bubble radius value
I'm seeing from your example, that the first data of data2 contains additional value. Removing that will work fine.
this.d3Chart = bb.generate({
data: {
...
columns: [,
// the length for each bubble should be 2
["data2", [350, 50, 30], ...]
]
Am a newbie in CreateJS and i have use this example code but don't understand it that much coz there is no code by code exaplaination.
The code is the one below:
createjs.Tween.get(circle, { loop: true })
.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
.to({ alpha: 0, y: 225 }, 100)
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
Can someone explain it for me please.Step by step.
Best Regards.
Create a tween for the circle object. It will loop through instructions:
createjs.Tween.get(circle, { loop: true })
Tween calls are "chained", so by appending methods, it will run them in order. Technically, each method just returns a reference to the tween so you can call a bunch in order. The line breaks in the code make it more readable, but it is basically:
tween.to(values).to(values).to(values);
The first tween sets the x position of the circle to 400px in a 1000 millisecond animation. It has an ease on it that has a custom value. Check out the TweenJS Ease class for more.
.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
After the first animation, it will then set the alpha and y values over 500ms, with a slightly different ease.
.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
The rest should make sense.
.to({ alpha: 0, y: 225 }, 100)
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
You can also chain other methods on Tween, such as call() to call a function, or set to change other properties on the tween target that are not being tweened.
Just for reference, this is the same as something more traditional like this:
var tween = createjs.Tween.get(circle, { loop: true });
tween.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4));
tween.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2));
tween.to({ alpha: 0, y: 225 }, 100);
tween.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2));
tween.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
Cheers.
Is it possible to set y axis values in reverse order(0-100)?
Max value on top must start from zero to 100 at bottom.
Morris.Line({
element: 'line-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
I got it working by setting ymin to 100 and ymax to 0. It then plotted my line graph with values closest to 0 at the top, and closest too 100 at the bottom. Here's my code snippet.
config =
{
data: data,
xkey: 'y',
ymin: 100,
ymax: 0,
fillOpacity: 0.6,
....
}
You can see instructions here: https://morrisjs.github.io/morris.js/lines.html
I just upgraded from Dojo 1.4.3 to 1.5.0 and noticed that my legend is now missing.
Anyone else have this problem??
I keep receiving the following error:
o is undefined in dojo.js line 73
This error occurs when
chart1.render(); //Graph shows but error causes the rest of the code in that javascript function to not execute (So, not legend because it's created after chart1.render(); line.
executes. Works perfect in release 1.4.3.
Does charting tests work for you? Go to Dojo Nightly Charting Tests and select a test, which uses Tooltips, e.g., test_event2d.html. If it works for you, see what is different in your setup. If you found the difference, and it is related to Dojo, please file a bug. Don't forget to mention a browser you use, and attach a minimalistic test case as a file.
Found the problem..It seems like a bug but not 100% sure...Here is how to recreate it using
the Dojo Nightly Charting Tests code and dojo version 1.5.0 (Any web browser):
NOTE: This error occurs when adding a series to plot "other" and calling chart1.render(); more than once. If chart1.render(); is only called once, no error and everything works as it should. See addSeries for "Series B"...Remove plot: "other" from "Series B" and everything works OK even if chart1.render() is called twice. This problem can also be recreated by just removing "markers: true" from the "default" addPlot and calling char1.render(); twice.
Warning: The HTML below in the code section isn't displaying 100% correctly but all the javascript code is present to recreate this problem easily.
Eugene: Thanks for the link to the testing page, that helped out. Also, should I file a bug report on this??
Event 2D
#import "dojo-release-1.5.0/dojo/resources/dojo.css";
#import "dojo-release-1.5.0/dijit/tests/css/dijitTests.css";
.dojoxLegendNode {border: 1px solid #ccc; margin: 5px 10px 5px 10px; padding: 3px}
.dojoxLegendText {vertical-align: text-top; padding-right: 10px}
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PlotKit.green");
dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.Magnify");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Shake");
dojo.require("dojox.charting.action2d.Tooltip");
dojo.require("dojox.charting.widget.Legend");
dojo.require("dojo.colors");
dojo.require("dojo.fx.easing");
var dc = dojox.charting;
var dur = 450;
var chart1;
makeObjects = function(){
chart1 = new dc.Chart2D("test1");
//chart1.setTheme(dc.themes.PlotKit.green);
chart1.addPlot("default", {type: "Default", lines: true, markers: true, tension:2});
chart1.addPlot("other", {type: "Lines",
hAxis: "other x",
vAxis: "other y"
});
chart1.addPlot("grid", {type: "Grid",
hMajorLines: true,
hMinorLines: false,
vMajorLines: true,
vMinorLines: false
});
chart1.addAxis("x", {min: 0, max: 6, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}});
chart1.addAxis("y", {vertical: true, min: 0, max: 10, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}});
chart1.addAxis("other x", {leftBottom: false, min: 0, max: 6, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}});
chart1.addAxis("other y", {leftBottom: false, vertical: true, min: 0, max: 10, majorTick: {stroke: "black", length: 3}, minorTick: {stroke: "gray", length: 3}});
chart1.addSeries("Series A", [{x: 0.5, y: 5}, {x: 1.5, y: 1.5}, {x: 2, y: 9}, {x: 5, y: 0.3}]);
chart1.addSeries("Series B", [{x: 0.3, y: 8}, {x: 4, y: 6, tooltip: "Custom tooltip"}, {x: 5.5, y: 2}], {plot: "other"});
var anim1a = new dc.action2d.Magnify(chart1, "default");
var anim1b = new dc.action2d.Tooltip(chart1, "default");
chart1.render();
chart1.render();
var legend1 = new dojox.charting.widget.Legend({chart: chart1, horizontal: false}, "legend1");
};
dojo.addOnLoad(makeObjects);
Event 2D
Go-->
Hover over markers, bars, columns, slices, and so on.
1: Markers, lines, 2D data, custom axis. Actions: Magnify, Tooltip.
That's all Folks!