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
Related
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
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 want right fixed columns in the bootstrap-vue table
but, the Sticky function in the document is only fixed to the left.
Is there a way to fix the right side or last columns?
I want both the left and right columns being fixed in place.
documnet : https://bootstrap-vue.org/docs/components/table#sticky-columns
<template>
<div>
<div class="mb-2">
<b-form-checkbox v-model="stickyHeader" inline>Sticky header</b-form-checkbox>
<b-form-checkbox v-model="noCollapse" inline>No border collapse</b-form-checkbox>
</div>
<b-table
:sticky-header="stickyHeader"
:no-border-collapse="noCollapse"
responsive
:items="items"
:fields="fields"
>
<!-- We are using utility class `text-nowrap` to help illustrate horizontal scrolling -->
<template #head(id)="scope">
<div class="text-nowrap">Row ID</div>
</template>
<template #head()="scope">
<div class="text-nowrap">
Heading {{ scope.label }}
</div>
</template>
</b-table>
</div>
</template>
<script>
export default {
data() {
return {
stickyHeader: true,
noCollapse: false,
fields: [
{ key: 'id', stickyColumn: true, isRowHeader: true, variant: 'primary' },
'a',
'b',
{ key: 'c', stickyColumn: true, variant: 'info' },
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l'
],
items: [
{ id: 1, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 2, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 3, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 4, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 5, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 6, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 7, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 8, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 9, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 },
{ id: 10, a: 0, b: 1, c: 2, d: 3, e: 4, f: 5, g: 6, h: 7, i: 8, j: 9, k: 10, l: 11 }
]
}
}
}
</script>
It's possible by overriding bootstrap's CSS with some of our own. First make sure the last column has the stickyColumn: true option plus whatever other options you want to give it:
...
'i',
'j',
'k',
{ key: "l", stickyColumn: true, isRowHeader: true, variant: "primary" },
This will ensure it has a classname we can easily select on. Apply styling that gives the last sticky column in the table an attribute of right: 0:
<style>
.b-table-sticky-column:last-child {
right: 0;
}
</style>
codesandbox example
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.