How can I configure my legendItemRollover event in Javascript implementation of fusion charts to display a linked chart like newchart-xml-chart2?
As of now there is no support for drill down feature using legendItemRollOver event callback.
As a workaround, you can implement drill down feature by rendering the charts on legendItemRollOver.
Please refer to this fiddle for the implementation: http://jsfiddle.net/k27mw4f1/
"legendItemRollOver": function(evtObj) {
if (evtObj.data.datasetIndex === 0) {
new FusionCharts(
child1Chart
).render();
}
if (evtObj.data.datasetIndex === 1) {
new FusionCharts(
child2Chart
).render();
}
}
Please implement it at your end and let me know if you have any questions.
Related
I have a tableau dashboard that I am trying to embed into a react website using the tableau-api npm package. Although it looks fine on tableau public, the layout changes when I embed it. How do I ensure that the layout stays the same when I embed it in react?
Edit: here is my code. I used this answer as reference
import React, { Component } from 'react';
import tableau from 'tableau-api';
class Visualization extends Component {
componentDidMount() {
this.initTableau()
}
initTableau() {
const vizUrl = 'url';
const vizContainer = this.vizContainer;
let viz = new window.tableau.Viz(vizContainer, vizUrl)
}
render() {
return (
<div ref={(div) => { this.vizContainer = div }}>
</div>
)
}
}
export default Visualization;
There are a couple of options you should take a look at
Change the size of your dashboard from automatic to fixed (reference here). This will help if you have floating elements in your dashboard
Add your preferred device to the dashboard panel
Change the fit option to entire view
If none of these options work, I would recommend you share a photo of your dashboard and your code to be able to debug
I would like to use Leaflet.VectorGrid plugin and I have a question. Is there an example how to create custom component in react-leaflet?
React-Leaflet aims to provide all the controls and layers provided by Leaflet, but it does not support any Leaflet plugin.
To create a custom components requires the following steps,
1.) Extend an Abstract class provided by React-Leaflet
2.) Implement createLeafletElement (props: Object): Object method to create Leaflet-element. For example,
createLeafletElement(opts) {
const MapInfo = L.Control.extend({
onAdd: (map) => {
this.panelDiv = L.DomUtil.create('div', 'info');
return this.panelDiv;
}
});
return new MapInfo({ position: 'bottomleft' });
}
3.) Using withLeaflet - Wrap your component. For example,
export default withLeaflet(MapInfo);
This Example will help you - https://codesandbox.io/s/p5zzmnlk8j
Also Please refer to this documentation https://react-leaflet.js.org/docs/en/custom-components.html
I am looking at changing the ShellAppTitle in a Fiori app. Refer the highlighted part in the snapshot below:
I already know a way to to this which I am not proud of:
sap.ui.getCore().byId("shellAppTitle").getText() /.setText()
Is there any better approach to achieve this?
The only improvement I could think of is to implement this via the FLP ShellUIService rather than the getCore() method. The reason being that if SAP changes the id of the header text, your code will break since it is not designed to work this way.
To implement the service, first declare it in your manifest.json:
{
...
"sap.ui5": {
"services" : {
"ShellUIService": {
"factoryName": "sap.ushell.ui5service.ShellUIService"
}
}
}
...
}
Then, you can access it in your Component.js via the following code:
// Component.js (the app root component)
...
this.getService("ShellUIService").then( // promise is returned
function (oService) {
oService.setTitle("Application Title"); // also could use .getTitle() first
},
function (oError) {
jQuery.sap.log.error("Cannot get ShellUIService", oError, "my.app.Component");
}
);
...
The full documentation can be found in the SAPUI5 SDK
I want my application to do something when the base layer has changed.
Is it possible to handle/catch that event in OpenLayers 2?
Yes, it is possible:
map.events.register("changebaselayer", this, function (obj) {
if (obj.layer.name == 'layer_name') {
//do something if new base layer is equal to layer_name
....
}
});
You can see all the possible events you can hook into in the source for OpenLayers/Map.js although the actual event will be triggered by the LayerSwitcher.
I just started using AmCharts and have setup two line plots, one on top of the other, with their respective scrollbars.
Now, I want to "link" the scrollbars of both plots, so that if I move the scrollbar on the chart1, I'll get the same date range on the chart2. I imagine this shouldn't be too difficult with a listener, a get value function and a set value function, but I'm unable to find how to get the start/end values of the scrollbar so that I can play with them.
Any help would be appreciated.
thanks
There is a demo for this in the AmCharts Knowledge Base
https://www.amcharts.com/kbase/share-scrollbar-across-several-charts/
This is the code that is syncing the scrollbars, (I have added the annotations):
Create an array to populate with your charts
var charts = [];
Create how ever many charts you need
charts.push(AmCharts.makeChart("chartdiv", chartConfig));
charts.push(AmCharts.makeChart("chartdiv2", chartConfig2));
charts.push(AmCharts.makeChart("chartdiv3", chartConfig3));
Iterate over the charts, adding an event listener for "zoomed" which will share the event handler
for (var x in charts) {
charts[x].addListener("zoomed", syncZoom);
}
The event handler
function syncZoom(event) {
for (x in charts) {
if (charts[x].ignoreZoom) {
charts[x].ignoreZoom = false;
}
if (event.chart != charts[x]) {
charts[x].ignoreZoom = true;
charts[x].zoomToDates(event.startDate, event.endDate);
}
}
}