I am using Chart.js 2.0 version to draw graphs, i want to define minimum step size in bar graph
var myNewChart = new Chart(grapharea, {
type: 'bar',
data: barData,
options: {
responsive: true,
scales: {
yAxes: [
{
ticks: {
min: 0, // it is for ignoring negative step.
beginAtZero: true,
stepSize: 1 // if i use this it always set it '1', which look very awkward if it have high value e.g. '100'.
}
}
]
}
}
});
this time i am using
stepSize: 1
i am using this step size to ignore the point value e.g. '0.5', it shows when the max graph values id less e.g '2'.
if i use this it always set the step it '1', which look very awkward if it have high value e.g. '100'.
I am looking for such thing:
suggestedMin = 1
Is there any thing to define thie minimum step size which should not be fixed in higher value cases.
If you don't want to show point value (e.g. 0.5) labels you could write a callback function to filter the point value labels instead of using stepSize.
Like this:
ticks: {
min: 0, // it is for ignoring negative step.
beginAtZero: true,
callback: function(value, index, values) {
if (Math.floor(value) === value) {
return value;
}
}
}
Working fiddle here: https://jsfiddle.net/ma7h611L/
Update:
As noted by Atta H. and Lekoaf below, Chart.js added the precision property to ticks. It is available since version 2.7.3. See Lekoaf's answer how to use this.
ticks: {
precision: 0
}
This worked equally well as the callback function above and is much cleaner.
precision, if defined and stepSize is not specified, the step size will be rounded to this many decimal places.
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
Related
I have a path that draw a circle whose origin is in the "west" side, then I split by removing the top and bottom. Then I get three sub-paths:
Top-left 1/4 circle
Right half circle
Bottom-left 1/4 circle
But even visually 1 and 3 looks like a flipped 2, 1 and 3 are actually two sub-paths. How do I optimize this? I've tried smooth(), flatten() and simplify() and all not work.
Here is the sketch.
Based on your simplified case, you just have to build a new path composed of all your sub paths segments.
In order to optimize the resulting path a bit, you can skip the first segment of path B and only keep its handle out, since it's the same than path A last segment.
Depending on your use case, you could also, with the same logic, skip the last segment of path B since it's the same than path A first segment and make sure that the resulting path is set to closed.
Here is a sketch demonstrating a possible implementation.
const compoundPath = project.importJSON(
['CompoundPath', { 'applyMatrix': true, 'children': [['Path', { 'applyMatrix': true, 'segments': [[50, 700], [0, 700], [0, 600], [50, 600]] }], ['Path', { 'applyMatrix': true, 'segments': [[50, 600], [100, 600], [100, 700], [50, 700]] }]] }]
);
compoundPath.strokeColor = 'black';
project.activeLayer.addChild(compoundPath);
const subPaths = [];
compoundPath.children.forEach((child, i) => {
subPaths.push(
child
.clone()
.translate(0, 150)
.addTo(project.activeLayer)
);
});
const assembledPath = assembleSubPaths(subPaths);
assembledPath.strokeColor = 'black';
function assembleSubPaths(subPaths) {
const path = new Path();
subPaths.forEach((subPath) => {
subPath.segments.forEach((segment, segmentIndex) => {
const isFirstSegment = segmentIndex === 0;
if (path.segments.length === 0 || !isFirstSegment) {
path.add(segment);
} else {
path.lastSegment.handleOut = segment.handleOut;
}
});
subPath.remove();
});
return path;
}
I am trying to invert the data I receive from my elastic search query.
The data I have is from a neural network driven car on a track.
I have track locations in X and Z, and the performance.. :
data: {
url: {
%context%: true
// %timefield%: #timestamp
index: performance.capture.August.*
body: {
size: 10000,
_source: ["var_Track_X", "var_Track_Z", "var_Performance"]
}
}
}
I've also tried to use calculate instead of tyle and expr, but no luck,
I tried to add _source. infront of my property name, but no luck either..
kibana would allow me to create scripted fields, but since vega can't
use these I need to make my own.
so I am trying:
transform: [
{type: "formula", expr: "-1 * datum.var_Track_X", as: "var_Playercar_X_Flipped"}
]
and plugging it in the axis like:
encoding: {
x: {
// Draw the time field on the x-axis in temporal mode (i.e. as a time axis)
field: var_Playercar_X_Flipped
type: quantitative
// Hide the axis label for the x-axis
axis: { title: false }
}
anyone know why it's not finding my property?
I am trying to update with $push and $inc at the same time , every thing is working fine but the problem is when I $inc my field with negative values its minimum value shouldn't be less that 0 as I have set the rule min in my schema but it does not give an error set the field value in negative.
schema.js
mySchema=new SimpleSchema({
"totalImages":{
type:Number,
min:0,
optional:true,
},
})
server.js
jobOrders.update(
{
orderNo:jobNo
},
{
$push:{
//pushing an object in an array this is working as expected
},
$inc:{
totalImages:-2 //lets say the value of totalImages is 0 before, this should give an error since it will set negative value. But doesnot give any error.
}
}
I am trying to achieve a gauge graph that will have a gradient based on the percentage it is full, similar to the image below. The closest I could manage is showing all the gradient colors regardless of the value - Like here.
var x = 80; // Change x to see effects.
Did anyone managed to get a gradient based on value?
You can use yAxis stops and make small trick adding gradient to your chart. You can for example add points to your gauge (inside your load event callback function) with values decreasing from your normal y value to 0. It will give you a chance to have something similar to gradient with multiple points.
function(chart) {
var y = this.series[0].data[0].y;
for (var i = y; i >= 0; i = i - 1) {
chart.addSeries({
data: [i],
stickyTracking: false,
enableMouseTracking: false
}, false)
}
chart.redraw();
}
Here you can see an example how it can work: http://jsfiddle.net/64mfcg3v/6/
Kind regards,
I'm using aldeed:simple-schema with Mongo collections in Meteor.
I have a collection that consists of a grid (x/y coordinates). It has fields describing the dimensions, and an array of points, which must not be out of bounds of those dimensions.
I'd like to be able to define a constraint on the coordinates that prevents them from being out of bounds for the grid. Here's what the thing I'm trying to do might look like:
MyGrid.attachSchema({
gridWidth: {
type: Number,
min: 1,
max: 100
},
gridHeight: {
type: Number,
min: 1,
max: 100
},
gridPoints: {
type: [Object],
minCount: 0
},
// HERE is what I want to do
'gridPoints.$.x': {
type: Number,
min: 0,
max: gridWidth - 1 // <--- THIS
},
'gridPoints.$.x': {
type: Number,
min: 0,
max: gridHeight - 1 // <--- THIS
}
});
Is such a thing possible? I am not finding it in the simple-schema docs, so probably not, but it doesn't sound too far-fetched for these kinds of 'references' to be supported...
There is custom validation in SimpleSchema.
Also, you might be "gilding the lily" here.
https://github.com/aldeed/meteor-simple-schema#custom-validation