I am using Flot in my application and it is working fine. I want to remove both vertical lines and horizontal lines from the the background of the chart. I tried this but I am not able to achieve the functionality.
grid: {
verticalLines:false,
horizontalLines:false
}
Can anyone help me in this regard?
You can remove the lines, use tickLength: 0
$.plot("#flot", dataset,
{
yaxis: {tickLength:0},
xaxis: {tickLength:0}
});
Fiddle here.
Running demo:
$(function () {
someData = [[1, 3],
[2, 16],
[3, 3],
[4, 3],
[5, 8],
[6, 12],
[7, 3]];
var dataset = [
{color: "#edc240", data: someData, lines: {show: true}, points: {show: true}}
];
$.plot("#flot", dataset,
{
yaxis: {tickLength:0},
xaxis: {tickLength:0}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="flot" style="width:500px;height:300px;margin:20px"></div>
You can paint them the same color as the background.
There is a option called tickColor that you have to use for both axis:
var options = {
yaxis: {
tickColor: "#f00" // or same color as background
},
xaxis: {
tickColor: "#0f0" // or same color as background
}
};
Fiddle
Related
I'm trying to draw a polygon from a list of points with labels on each of the sides (borders) with the length of the sides?
Is there a simple way to get this happening?
Here's a snippet with what I've got at present. Note that I want to be able to use an arbitrary number of points, not just three if at all possible.
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5],
axis: true
});
var points = [
[0, 0],
[0, 1],
[1, 0]
];
var pg = board.create('polygon', points, {
fixed: true,
hasInnerPoints: true,
vertices: {
visible: false
},
borders: {
names: ['a', 'b', 'c'],
withLabel: true
}
});
It is possible to set the label text of each border to be a function. This has to be done after the construction of the polygon. A possible solution would look like this:
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5], axis:true
});
var points = [
[0, 0],
[0, 2],
[2, 0]
];
var pg = board.create('polygon', points, {
fixed: true,
hasInnerPoints: true,
vertices: {
visible: false
},
borders: {
names: ['a', 'b', 'c'],
label: { offset: [-10, 10] },
withLabel: true
}
});
// Overwrite the labels of the borders:
for (let i = 0; i < pg.borders.length; i++) {
pg.borders[i].label.setText( () => pg.borders[i].L().toFixed(2) );
}
See https://jsfiddle.net/h6knmgjc/ for a working example.
My issue is the following. I have a collection (territories) that have a geometry of type Polygon inside. The thing is that the polygons in my applications must be validated against this collection. Meaning that for a polygon to be valid, it must be COMPLETELY contained in at least one territory.
As $geoWithin is intented to work only in one direction. I try to do the following.
db.territories.insertMany([
{
_id: 1,
geometry: {
type: "Polygon",
coordinates: [
[
[0, 0],
[5, 0],
[5, 5],
[0, 5],
[0, 0]
]
]
}
}
])
const aggregation = [
{
$addFields: {
polygonToValidate: {
type: "Polygon",
coordinates: [[[2, 2], [4, 2], [4, 4], [2, 4], [2, 2]]]
},
territoryPolygon: "$geometry",
},
},
{
$match: {
polygonToValidate: {
$geoWithin: {
$geometry: "$territoryPolygon"
}
}
}
}
]
db.territories.aggregate(aggregation);
The polygon is valid as it is completely contained inside the territory polygon. But is not posible to reference the document field, neither the field added in the $addFields (territoryPolygon).
Below is my script. Even after using ticks in option the x-axis doesn't change to the specified string. Also how to set from which number y-axis start? Currently it starts at 0.0 but I need it to start at 0.1
var data = [[1, 0.1], [2, 0.2], [3, 0.5], [4, 0.8], [5, 0.8], [6, 0.8], [7, 0.8], [8, 0.9], [9, 1.0], [10, 1.0], [11, 1.0], [12, 1.0]];
var dataset = [{label: "unit price",data: data}];
var options = {
series: {
lines: { show: true },
points: {
radius: 3,
show: true
},
xaxis:{ticks: [[1,"foo"], [2,"bar"], [4,"cat"], [5,"woo"], [7,"cookie"], [8,"yay"] ]}
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
});
The xaxis property belongs directly in the top level of the options not under the series property.
And for the minimum of an axis you can use the min property.
var options = {
series: {
lines: {
show: true
},
points: {
radius: 3,
show: true
}
},
xaxis: {
ticks: [
[1, "foo"],
[2, "bar"],
[4, "cat"],
[5, "woo"],
[7, "cookie"],
[8, "yay"]
]
},
yaxis:{
min: 0.1
}
};
See this fiddle for the full example and the documentation for more info.
I am using jqplot to draw pie-chart and donut-charts.
And I am using the 'seriesColors' to give customised colors to the slices http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.seriesColors
seriesColors : [ "0571B0", "#5E3C99", "#008837"]
If the data(array-values to be passed) has only three values, then it does display the colors properly.
But if there are more than 3 values, it just displays that slice in black color.
It doesn't repeat/reuse the colors from the beginning (as said in the documentation).
Here it is:
var s2 = [['a', 8], ['b', 12], ['c', 6]];
var plot1 = $.jqplot('div_1', [s2], {
title: 'Chart 1',
seriesDefaults:{
renderer:$.jqplot.DonutRenderer ,
rendererOptions:{
startAngle: -90,
innerDiameter: 100,
showDataLabels: true,
dataLabels:'percent'
}
},
seriesColors: ["#0571B0", "#5E3C99", "#008837"],
highlighter: {
show: true
},
legend: { show:true, rendererOptions: {numberRows: 1}, location: 's', placement: 'outsideGrid'}
});
But if I add a 4th value in the array, the colors are not reused.
i.e if I modify the above array to
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];
Then the 4th slice ('d') is displayed in black color.
How do I fix this?
Found a fix to this.
Hope this helps out others who are facing a similar issue.
Here's the code.
var dataValues = [['a', 8], ['b', 12], ['c', 6], ['d', 9], ['e', 14]];
//Define the seriesColors array..
var seriesColors = ["#0571B0", "#5E3C99", "#008837"];
var seriesColorsLength = seriesColors.length;
var donutChartSeriesColors = new Array();
//Prepare a new array which would be passe to the chart..
//This will handle even if there are more value than the seriesColors array..
for(var i = 0; i < dataValues.length; i++) {
donutChartSeriesColors[i] = seriesColors[(seriesColorsLength-1) % i];
}
var plot1 = $.jqplot('div_1', [dataValues ], {
title: 'Chart 1',
seriesDefaults:{
renderer:$.jqplot.DonutRenderer ,
rendererOptions:{
startAngle: -90,
innerDiameter: 100,
showDataLabels: true,
dataLabels:'percent'
}
},
seriesColors: donutChartSeries,
highlighter: {
show: true
}
});
Can you render a bar chart like this using flot?
Do I need to create the dataset manually to get this result, instead of using mode: 'time' ?
Actually pretty easy to produce using flot.
var options = {
series: {
bars: {
show: true,
barWidth: 15778463000, // 1/2 year in milliseconds
align: 'center'
},
},
yaxes: {
min: 0
},
xaxis: {
mode: 'time',
timeformat: "%y",
tickSize: [1, "year"],
autoscaleMargin: .10 // allow space left and right
}
};
$(function() {
$.plot($('#placeholder'), [[[1230768000*1000, 100], //[seconds * 1000 = milli, y value]
[1262304000*1000, 200],
[1293840000*1000, 300]]], options);
});
Produces: