Is there any way we can enable highcharts to display marker value at all the times ?
I got it working. Posting for reference of others
plotOptions : {
line : {
dataLabels : {
enabled : true,
formatter : function() {
return this.y + '%';
}
}
},
series : {
name : 'Team Briefing',
shadow : false,
marker : {
lineWidth : 2,
radius : 6,
symbol : 'circle'
}
}
},
Check the Point Marker reference guide. What I remember about Highcharts is that still it does not provide anything such as.
when you initiate the chart with an object (as your first argument) : ' ...new Highcharts.Chart( { ... } )'
one of this object properties you can use is the plotOptions.series.marker
this marker is an object itself:
marker:{
enabled:true,
lineWith:0.0,
radius:0.0,
// more attributes...
}
those are the default setting. meaning: It is enabled by default, but the radius is also zero by default, and that is the reson you don't see the points .
make a long story short: you need to set the raduis (to be bigger than zero)
read more at http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
Related
I'm having some troubles trying to display 2 different markers placed at exactly the same coordinates.
The case is: we are displaying stores, and some of them are placed at the same building (ie. a mall), so, they are different stores but shares the same ubication/coordinates.
Our json source content looks like this:
{
"properties" : {
"id" : "1",
"name" : "Store 1"
},
"geometry" : {
"coordinates" : [-70.66667, -33.45],
"type" : "Point"
}
},
{
"properties" : {
"id" : "2",
"name" : "Store 2"
},
"geometry" : {
"coordinates" : [-70.66667, -33.45],
"type" : "Point"
}
}
The thing is, just one of them gets displayed.
My question is, is there an out of the box solution for this use-case? Or should we implement our own solution ?
Thanks in advance!
If you are using the Marker class from mapbox-gl, you can just apply standard CSS transform to offset the marker.
Another solution would be something refered to as "spider marker":
https://bewithjonam.github.io/mapboxgl-spiderifier/docs/index.html
https://github.com/bewithjonam/mapboxgl-spiderifier
One solution is setting an offset to the markers with same coordinates. This will put markers with same coordinates at the same height next to each other:
for (const marker of markers) {
// get all markers with the same coordinates
const sameMarkers = markers.filter(m => m.lat === marker.lat && m.lon === marker.lon);
// if there is more than one marker with the same coordinates
if (sameMarkers.length > 1) {
// get the index of the current marker
const index = sameMarkers.indexOf(marker);
// calculate the offset for the current marker
const offset = 32 * (index - (sameMarkers.length - 1) / 2);
// set the offset
marker.setOffset([offset, 0]);
}
}
I am referring to this https://ecomfe.github.io/echarts/doc/example/pie1.html#-en example. I am not able to hide the adjacent labels in the pie graph. I have encircled one of the labels I wish to hide in the attached image. Kindly help. Thanks!
Found the solution to my problem. I had to include the following code into the options and it worked:
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
}
}
For debug purposes, I wanted my marker to have a pop-up that had the json in it.
The value is something like:
var CarState= {
"height" : 6.2,
"width" : 7.3,
"length" : 9.1,
"color" : {
"r" : 255,
"g" : 200,
"b" : 10
}
}
But this is not working, all I get is a truncated pop-up. The content of CarState is constantly changing, but the same property bag is there.
Notes: self refers to the AMD module that this code is in. I don't use this, since you can get in trouble. self.pop is a variable that holds the L.PopUp
this.update = function () {
var text = "<p>" + JSON.stringify(CarState) + "</p>";
self.pop.setContent(text);
self.pop.update();
}
here is what it looks like:
and here is what Chrome says is the pop-up div size:
OK, this is working for me now. Not completely sure what the problem was.
this.update = function () {
var text = "<pre><code>" + JSON.stringify(CarState, null, '\t') + "</code></pre>";
theCar.setPopupContent(text);
theCar.update();
theCar.setLatLng(L.latLng(CarState.lat, CarState.lon));
theMap.panTo(L.latLng(CarState.lat, CarState.lon));
}
I have used viz chart library. I have given some drill down functionality on the column graph. For that I have to select any column of the graph to see the detail for the selected part (in the same page).
Now I want to select my first column/bar of the column graph automatically. It means when I go to the graph page, the first bar should be selected as default and the detail of the selected bar should be there.
Please help me guys.
Code:
View:
<viz:ui5.Column id="chart" selectData="goToDaily" width="auto">
<viz:plotArea>
<viz:ui5.types.VerticalBar colorPalette="#FFCC00"/>
</viz:plotArea>
<viz:title>
<viz:ui5.types.Title text="Monthly">
</viz:ui5.types.Title>
</viz:title>
<viz:dataset>
<viz:ui5.data.FlattenedDataset id="fds1" >
<viz:dimensions>
<viz:ui5.data.DimensionDefinition id="dim" axis="1" name="Month" value="{name}">
</viz:ui5.data.DimensionDefinition>
</viz:dimensions>
<viz:measures>
<viz:ui5.data.MeasureDefinition id="mea" name="Values" value="{value}">
</viz:ui5.data.MeasureDefinition >
</viz:measures>
</viz:ui5.data.FlattenedDataset>
</viz:dataset>
</viz:ui5.Column>
Controller:
Oninit:
JSONmodel = new sap.ui.model.json.JSONModel();
data1 = [ {
name : "Jan",
value : 100,
},
{
name : "Feb",
value : 150,
},
{
name : "March",
value :120,
},
{
name : "April",
value : 200,
}
];
JSONmodel.setData(data1);
sap.ui.getCore().byId("idPage3--chart").setModel(JSONmodel);
Select Data for Chart:
goToDaily:function(evt){
sap.ui.getCore().byId("idPage3--chart").selection({ctx:[{dii_a1:1}]});
}
I have tried to select month Feb as default selection, but not able to select it.
Regards,
Niket Talati
There are quite a few things incorrect in your code
You have specified an event handler for selectData but this is obviously only triggered when you first "select data". You never fire an event for data selection in your code, so the event handler will only be triggered if you click on a column manually
It seems you tried to fire the event from the event handler (which is the other way around, see previous point), but you have never implemented the fireSelectData method.
In addition, the signature of the map you tried to select is incorrect. According to the API (which is ill-formatted, I know) you need to send a whole lot more, something like this:
// ...snip...
var oSelection = {
data : [
{
target : oRect,
data : [
{
ctx : {
path : {
dii_a1 : 0,
dii_a2 : 0,
mg : 0,
mi : 0
},
type : "Measure"
},
val : 100
}
]
}
],
name : "selectData"
};
oYourChart.fireSelectData(oSelection);
// ...snip...
If you need to get an element by it's Id when using XMLViews, you should use this.getView().byId("chart") instead
Hope the above helps!
I'm trying to create an interactive and real-time graph using flot library. It's very similar to the real-time example in Flot site but with some additional options.
This is a part of my code:
var bars = false;
var lines = true;
var steps = false;
var xAxisInterval = 5;
var xAxisUnit = "minute";
var plot = 0;
var dataChart = [
{
label : "Consumo",
data : input1_data, //history
threshold : {below : threshold},
color : input1_color, //'#00B800',
lines : {show : input1_show, fill : input1_fill}
},
{
label : "Consumo Previsto",
data : input2_data, //forecast data
threshold : {below : threshold},
//stack : null,
color : input2_color,//'#66E066',
lines : {show : input2_show, fill : input2_fill}
}
];
var plotOptions = {
lines:{
show: lines,
steps: steps
},
bars: {
show: bars,
barWidth: 0.6
},
yaxis:{ min:0, max: 65000 },
xaxis: { mode : "time", tickSize : [ xAxisInterval, xAxisUnit ] },
zoom: { interactive : gridZoom },
pan: { interactive : gridPan },
points: { show: showPoints },
grid: { hoverable: gridHoverable, color: gridColor },
legend: { backgroundColor:legendBackgroundColor, backgroundOpacity:legendBackgroundOpacity, position: legendPosition }
};
if (plot == 0) {
plot = $.plot("#" + divId, dataChart, plotOptions);
}
else {
jQuery.each(dataChart , function(index, value) {
plot.setData([value.data]);
});
plot.setupGrid();
plot.draw();
}
If i only use the code line $.plot("#"+divId, dataChart, plotOptions), it works well.
But to improve performance, instead of construt an entire new plot in every time increment, i tryed to use the code in if/else statement. But the ploted chart loss some options, like series colors and legend, and is painted with color defined in grid options (gridColor) ..., as shown in figure below.
Is this a bug or am I doing something wrong?
You are replacing the all the series options with just the data piece. Also, setData replaces all the data in the chart, so I don't think calling it multiple times in a loop is correct (you'll only end up with the last series).
I usually follow this pattern to replace just the data:
var series = plot.getData();
for (var i = 0 i < dataChart.length; i++){
series[i].data = dataChart[i].data;
}
plot.setData(series);
plot.setupGrid();
plot.draw();