I would like to ask how can I position bottom labels using ChartJS library to display them like on the image below:
I tried to find it in official docs, but without the luck.
Many thanks for any advice.
In the xAxe ticks attribute, you can edit the userCallback property to change what is displayed on your labels. Furthermore, if you return an array of strings, every string will be displayed with line breaks.
So if you combine these two informations, you'll get the following :
options: {
scales: {
xAxes: [{
ticks: {
userCallback: function(tick, value, ticks) {
// `ticks` is the default display
// `.split("")` makes it an array of every character
return tick.split("");
}
}
}]
}
}
You can see a working example on this jsFiddle and here is its result :
Related
How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?
I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]
I currently have a map loaded, and I have some bars on the map. I would like to include my variable text_toltip[i] in the tooltip so that the coordinates and text of the variable text_toltip[i] are displayed in each bar. how can I do it? I'm new in this library.
I know that there is an attribute called minHeight, which allows to establish a minimum height for the bars, but I would like to establish a maximum predetermined size for the bars and so the other sizes and colors of the bars are calculated. how can I do it?
series: [{
type: 'bar3D',
coordinateSystem: 'geo3D',
barSize:0.05,
minHeight:0.05,
data: data.map(function (item) {
return {
value: [item[0], item[1], item[2]],
label: {
show: false
}
}
}),
shading: 'lambert'
}]
https://plnkr.co/edit/Tdwwk8yKCi0fiY7I3AqK?p=preview
Thank you.
For this question,I read the Echarts's documentation and found a property belonging to "geo3D called "boxHeight" ,which can play the same role as you say "maxheight".I've tested it,no problem.
boxHeight
I am trying to move from using Mapbox.js with Leaflet to Mapbox GL.
I have the following geojson that should be rendered as per the image attached. Unfortunately, after reading many articles and through the documentation related to data driven visualisation I've hit a wall. Wondered if anyone could help with an example?!
Here's the geojson:
{ "type":"Feature",geometry: { "type":"Point","coordinates":[1.1147,51.7829] },properties: { "title":"Paul","marker-color":"#0094F7","marker-size":"large","marker-symbol":"star" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.34851,52.6123] },properties: { "title":"Will","marker-color":"#F9883E","marker-size":"large","marker-symbol":"1" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.76389,53.0232] },properties: { "title":"Mark","marker-color":"#F1574E","marker-size":"large","marker-symbol":"13" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-.127211,51.6014] },properties: { "title":"David","marker-color":"#83C736","marker-size":"large","marker-symbol":"20" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.06682,53.4986] },properties: { "title":"Adam","marker-color":"#FC5C53","marker-size":"large","marker-symbol":"rocket" } }
The colour values are set by the end user and could be anything so I can't just create a lot of images to suit, and the numbers refer to dates so will be 1-31.
Here's what it currently looks like in Mapbox.js:
Thanks all!
Using Markers, you have full control to display any HTML element you like - so you could use CSS to construct a circle or teardrop of the right color, or an SVG icon.
See this example: https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/
Essentially, instead of adding the GeoJSON directly as a source into the map, you will want to iterate over each point, and add markers onto the map.
I have generated a graph inside highstock (see example - http://jsfiddle.net/szFQa/),
however, by default, it groups data that is chronologically close together, and stops the timeline from showing time in a linear form.
I've tried using the following options, there seems to be no change though.
plotOptions : {
series : {
dataGrouping : {
enabled : false
},
}
},
What options need to be set to stop the grouping and show the timeline as linear?
In case when you disable dataGrouping like this http://jsfiddle.net/szFQa/1/ then points are not grouped, because in your data you have 16 points and on the chart is also 16 points.
plotOptions: {
series: {
dataGrouping:{
enabled:false
},
marker: {
enabled: true
}
}
},
I'm using the following piece of code to display a set of bar charts in jqPlot. However, I am getting 2 problems:
There is no padding on either side of the range values for the xaxis. The pad attribute seems to have no effect.
When the number of bars is large, the bars overlap on top of each other. The barPadding attribute seems to have no effect.
I looked at this link Having problems with jqPlot bar chart . The answer suggested there was to use a CategoryAxisRenderer. But since I'm using time-series data, I require the DateAxisRenderer.
Please help.
function plotBarGraph(data,myticks,series)
{
$("#placeholder").empty();
$.jqplot('placeholder',data,
{
//stackSeries:true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
barMargin:1,
barPadding:0.5
},
axes:
{
xaxis:
{
ticks:myticks,
tickInterval:10,
renderer:$.jqplot.DateAxisRenderer,
pad:2.5,
tickOptions:
{
formatString:'%d-%m-%y'
}
}
},
legend:
{
show:true,
labels:series
}
});
}
In this case if you do not want to use the approach mentioned in the link, you might want to play with min/max values for your date axis.
I think you might also find useful the approach to a similar sort of problem with padding where I chose to set ticks on creation and hide the unwanted ones after the plot is drawn.
Before I can be of any further assistance please provide a sample presenting your problem.
For your second problem, I ran into a similar issue. I set up a selection statement that widened the size of my chart depending on how many bars would be in it. I then made the parent div scrollable (called "dataHolder"), and that solved the problem.
// set div properties depending on how many sets of data are in the
//array so the view is sized properly
$("#chartDiv").html("").css("width", "750px"); // chartDiv's default settings
$("#tabs-6").removeClass("dataHolder").css("width", "900px"); // parent Div's default settings
if (dataArray.length > 10) {
$("#chartDiv").css("width", "1600px");
$("#tabs-6").addClass("dataHolder").css("width", "900px");
} else if (dataArray.length > 6) {
$("#chartDiv").css("width", "1200px");
$("#tabs-6").addClass("dataHolder").css("width", "900px");
}
I found a solution to use Date data with CategoryAxisRenderer. You have to configure de xaxis like follows:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.DateTickRenderer,
tickOptions: {
formatter: $.jqplot.DateTickFormatter,
formatString:'%d/%m'
}
}
}
}
I hope it helps! ;)