I could successfully load location data (lat,lon) at my Dashboard UI in tabular form using Odata API. Now I need to display them in a Map. I'm referring this as sample. Here is images of my dashboard table . Now from my table, I only need to display the location of the first row data in my map. please help on how do i do that?
According to One-Step GeoMap Example
it should be possible, to use any image for a spot.
In section “Resource Handling for Visual Objects” it says:
In addition to the semantically-typed Spot with a built-in visualization, you can use any image for a Spot.
The image needs to be loaded as a resource and can be referenced by Spots.
Since the Spot was built for images like pins, the image is, by default, aligned in a way that the bottom center of the image is at the given geo position.
For other images, a center alignment might be more appropriate.
Here is the code for JavaScript Views in UI5:
var oVBI = new sap.ui.vbm.GeoMap({
resources : [
new sap.ui.vbm.Resource({ "name" : "SAP_logo",
"src" : "images/SAP_logo.png"})
],
vos : [ new sap.ui.vbm.Spots({
items : [ new sap.ui.vbm.Spot({ position : "20;0;0",
tooltip : 'SAP',
image : "SAP_logo",
scale : "0.2;0.2;0.2",
alignment: "0"})
]
})]
});
Related
I'm attempting to change edgeColor property for a series in a 3d column chart after the chart is drawn, based on some user input (like selecting a certain series). I was able to do this was a 2d column chart using the borderColor property. My data loading snippet looks like this:
$.each(seriesDataArray,function(i,val){
console.log (val);
chartDetails.series.push({ "size" : val.datasetSizeVerified , "data" : val.data});
};
And I'm trying to modify the edgeColor in a function later on in code:
function highlightChartSeries(currentTableDisplayIndex){
if (myChart){
$.each(myChart.series,function(i,val){
val.edgeColor = "green" ;
val.redraw();
});
myChart.series[currentTableDisplayIndex].edgeColor = "red";
myChart.series[currentTableDisplayIndex].redraw();
}
}
Again, this works great in 2D with a column chart using the borderColor property. I can set the edgeColor in the original series object during chart construction, and that edgeColor is reflected in my original graph. However, I can't change it later. Any help is appreciated!
To add (or change) some value to existing series, you should use Chart.Series function called update(), and pass to it new configuration options object, because it is a function specially created to executing actions like that. Please take a look at code below:
chart.series.forEach(series => {
series.update({
edgeColor: 'black'
})
})
I prepared for you live example how to use that function.
Best regards!
enter image description hereFor Example In high charts take bar chart.In Bar chart if i clicked on one data point the other data points should disable.Please find the image
You can call Point.select() function on point from another chart in select event. If you want to get rid of that point, use Point.remove() function instead.
API Reference:
http://api.highcharts.com/highcharts/Point.select
http://api.highcharts.com/highcharts/Point.remove
http://api.highcharts.com/highcharts/plotOptions.column.point.events.select
Example:
http://jsfiddle.net/ha7jxztv/
I have designed a treemap using highcharts with custom algorithm.It has a drilldown to 1 level. There is a drop down for my chart and it has two options for selection. treemap is displayed on the basis of dropdown selection which has a group by feature implemented using underscore.js library. The feature is working fine. But the problem is, all the tiles which are grouped together, are placed next to each other. My requirement is : i want all those tiles to be packed in one big tile with one label. something like header title in D3(exactly the same). Please let me know how to go about it. Is it something like treemap within a treemap? Also i wanted to know if its feasible to have different labels and tooltips for parent and children in the same treemap. any leads would be helpful.
actual image
Is there a way to get Mapbox.js tooltips to show when you're hovering over a marker without following the mouse around? I just want it to stay put when I hover.
I am using the following code on my map:
var map = L.map("impact-map")
.setView([20, 80], 3)
.addLayer(L.mapbox.tileLayer("hotchkissmade.in_impact", {
detectRetina: true
}));
var myGridLayer = L.mapbox.gridLayer('hotchkissmade.in_impact').addTo( map );
var myGridControl = L.mapbox.gridControl(myGridLayer, {
follow: true
}).addTo( map );
I am using the follow:true from the example here.
Disclaimer: I know there may be more flexibility outside of gridControl but I like having my tooltips from Tilemill as I don't want to load the data in the browser twice, since I'm basing the tooltip data off the layer making the markers on my map in Tilemill
This isn't possible with a gridControl - you can have tooltips either follow the mouse or stay in a specific location, but unlike L.mapbox.featureLayer, there is no actual marker, polygon, or feature you're hovering over - the geometry is not pushed to the client - so, there would be no 'anchor' for the tooltip to stay on.
I have a HighStock chart that is pulling in some OHLC data and creating a chart with 3 series - 1 candlestick, 1 volume, and 1 set of flags. This all works fine.
I want to add some custom trend lines to the chart. I will determine the points and do the paths based on custom logic.
The problem is that when I use the Renderer from the Chart to draw my path, the path is not connected to the underlying chart. As the chart date range is modified and/or new points are added to the primary series, the placement and size of my custom path remains unchanged. It is constant.
I need the location/endpoints of the custom path to be tied to the datapoints of the chart, not the coordinates of the svg drawing. Is there a way to accomplish this?
Here is the portion of the code that is adding a simple path from pointa to pointb. The path renders as expected but is then static:
buildPath: function(pointa, pointb){
this.myChart.renderer.path(this.buildPathArray(pointa,pointb))
.attr({
'stroke-width': 2,
stroke: 'red'
}).add();
},
buildPathArray: function(pointa, pointb){
var pathArray = [];
pathArray.push('M');
pathArray.push(pointa.plotX);
pathArray.push(pointa.plotClose);
pathArray.push('L');
pathArray.push(pointb.plotX);
pathArray.push(pointb.plotClose);
pathArray.push('Z');
return pathArray;
}
Per request, I created a JS Fiddle that demonstrates the general issue.
Any help is much appreciated.
SOLVED
This doesn't seem to come for free with Highcharts. Or if it does I did not find out the technique.
I had to use both the load and redraw events of the chart object contained in my StockChart.
On load, I draw the initial paths, aligned with the Point objects involved in my trending lines. As I build these path objects (SVGElement objects containing the genuine SVG path elements) I keep track of them in an array.
On redraw, I have to both destroy the old trend lines and create new ones. So I loop over my array of old elements and remove each from their own parentNode. Then I draw a fresh version of my trend lines based on the newly plotted location of each of my relevant Point objects.
The end result is that on each redraw event, the lines appear to move with the chart, when they're really being destroyed and recreated.