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);
}
}
}
Related
In my application, I have to render Projects, Tasks and Milestones. Projects and Tasks are differently coloured bars, and the Milestone is a Diamond (I'm using BaseRectangle and BaseDiamond respectively).
Since some items in my hierarchy are Projects, Some Tasks and Some Milestones, how can I render differing shapes on each row?
My first thought was to use the common "visible" property, but shapes don't have that, conversely "opacity" makes things invisible, but they still respond to mouse position.
I then tried using an Aggregation factory function, but although my chart renders correctly on first display, it doesn't recalculate the shapes on expanding or collapsing branches.
It seems to me that the factory function should work, but something is breaking in the chart that doesn't throw errors to console.
At the moment in my XML template, I have the following:
rowSettingTemplate has shapes1={path: factory:} and no shapes1 element.
Each of my BaseShapes is in a different fragment which are attached to my TreeTable as dependents.
Example Shape Fragment - Project.fragment.xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:gnt2="sap.gantt.simple">
<gnt2:BaseRectangle id="shapeProject"
shapeId="{plandata>id}" countInBirdEye="true"
time="{plandata>start_date}" endTime="{plandata>end_date}"
resizable="true" selectable="true" draggable= "true" connectable="true"
title="{plandata>text}" showTitle="true"
tooltip=""
fill="#0c1" />
</core:FragmentDefinition>
Factory function:
shapeFactory: function(sId, oContext) {
var parentId = (/(.*)-\d+$/.exec(sId))[1];
var rowSettings = sap.ui.getCore().byId(parentId);
var node: Project.Node = oContext.getProperty();
if (String(node.id) == rowSettings.getProperty("rowId")) {
switch (node.type) {
case "project":
return this.byId('shapeProject').clone(sId);
case "task":
return this.byId('shapeTask').clone(sId);
case "milestone":
return this.byId('shapeMilestone').clone(sId);
default:
return this.byId('shapeErr').clone(sId);
}
} else {
return this.byId('shapeEmpty').clone(sId);
}
}
My empty shape is a BaseGroup - note that SAPUI5 crashes if I return a null from factory, so something has to be returned when I actually want nothing.
I also tried wrapping all my shapes in BaseGroup so that the chart always sees the same control type, but that doesn't work. Note also that if I return a clone of Empty each time without any special logic, then the chart works correctly.
I'm hoping that this is a settings or something to ensure that the aggregation works properly each time. My SAPUI5 version is 1.61.2 — I'll try 1.63.1 when I get some time, but I think that this issue is fairly deep down.
If anybody has any ideas or sample code, it would be greatly appreciated.
I have come up with a workaround for this, that may save somebody several hours. Basically instead of defining the shapes1 aggregation via a factory function, I have used the <shapes1> tag instead. My Shapes1 tag contains a reference to my own custom shape which derives from BaseRectangle. My custom shape can then render whatever SVG it requires based on the bound object context. Now my tree can expand and collapse whilst rendering whatever shapes are required.
My renderer now looks like this:
CustomChartShape.prototype.renderElementRectangle = BaseRectangle.prototype.renderElement;
CustomChartShape.prototype.renderElementDiamond = BaseDiamond.prototype.renderElement;
CustomChartShape.prototype.renderElement = function(oRm, oElement) {
// There is possibilities that x is invalid number.
// for instance wrong timestamp binded to time property
if (this.bHasInvalidPropValue) { return; }
var Node = this.getBindingInfo('endTime').binding.getContext().getProperty();
if (Node.type == "milestone") {
this.renderElementDiamond(oRm, oElement);
} else {
this.renderElementRectangle(oRm, oElement);
}
}
I had to provide a 'getD' function that has a fixed width, and I'll have o go through and rewrite several functions, but I think that this will work for me.
I need to record the list of rows that expanded in a Gantt chart in a SAPUI5 program.
I found this handleExpandChartChange event but there is no attach function for this. Does anyone have any idea that how do we have to use it or any other method to know about the extended rows?
I solved my problem. We have to use treeTableToggleEvent event to monitor the expanded or collapsed rows.
For this we can use the following function as a event handler for treeTableToggleEvent:
onTreeTableToggleEvent: function (oEvent) {
var oParameters = oEvent.getParameters();
if (oParameters.rowIndex >= 0 && oParameters.expanded) {
if (!this._aExpandedRows.includes(oParameters.rowIndex)) {
this._aExpandedRows.push(oParameters.rowIndex);
}
} else if (oParameters.rowIndex >= 0 && !oParameters.expanded) {
var iIndex = this._aExpandedRows.indexOf(oParameters.rowIndex);
if (iIndex > -1) {
this._aExpandedRows.splice(iIndex, 1);
}
}
},
For using this function we need the _aExpandedRows array to initiate to empty array when we initiate the Gantt chart.
this._aExpandedRows = [];
The expanded row indices are stored in _aExpandedRows array.
I solved the monitoring problem of the expansion of nodes. But still I am interested in how to use handleExpandChartChange event.
Using Angular 4 (typescript), I have some code like below using ag-grid 12.0.2. All I'm trying to do is load my grid and automatically (programmatically) select the first row.
:
this.gridOptions = ....
suppressCellSelection = true;
rowSelection = 'single'
:
loadRowData() {
this.rowData = [];
// build the row data array...
this.gridOptions.api.setRowData(this.rowData);
let node = this.gridOptions.api.getRowNode(...);
// console logging here shows node holds the intended row
node.setSelected(true);
// console logging here shows node.selected == true
// None of these succeeded in highlighting the first row
this.gridOptions.api.redrawRows({ rowNodes: [node] });
this.gridOptions.api.redrawRows();
this.gridOptions.api.refreshCells({ rowNodes: [node], force: true });
First node is selected but the row refuses to highlight in the grid. Otherwise, row selection by mouse works just fine. This code pattern is identical to the sample code here: https://www.ag-grid.com/javascript-grid-refresh/#gsc.tab=0 but it does not work.
Sorry I am not allowed to post the actual code.
The onGridReady means the grid is ready but the data is not.
Use the onFirstDataRendered method:
<ag-grid-angular (firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>
onFirstDataRendered(params) {
this.gridApi.getDisplayedRowAtIndex(0).setSelected(true);
}
This will automatically select the top row in the grid.
I had a similar issue, and came to the conclusion that onGridReady() was called before the rows were loaded. Just because the grid is ready doesn't mean your rows are ready.(I'm using ag-grid community version 19) The solution is to setup your api event handlers after your data has loaded. For demonstration purposes, I'll use a simple setTimeout(), to ensure some duration of time has passed before I interact with the grid. In real life you'll want to use some callback that gets fired when your data is loaded.
My requirement was that the handler resizes the grid on window resize (not relevant to you), and that clicking or navigating to a cell highlights the entire row (relevant to you), and I also noticed that the row associated with the selected cell was not being highlighted.
setUpGridHandlers({api}){
setTimeout(()=>{
api.sizeColumnsToFit();
window.addEventListener("resize", function() {
setTimeout(function() {
api.sizeColumnsToFit();
});
});
api.addEventListener('cellFocused',({rowIndex})=>api.getDisplayedRowAtIndex(rowIndex).setSelected(true));
},5000);
}
Since you want to select the first row on page load, you can do onething in constructor. But your gridApi, should be initialized in OnGridReady($event) method
this.gridApi.forEachNode((node) => {
if (node.rowIndex === 0) {
node.setSelected(true);
}
It's setSelected(true) that does this.
We were using MasterDetail feature, its a nested grid and on expanding a row we needed to change the selection to expanded one.
Expanding a row was handled in
detailCellRendererParams: {
getDetailRowData: loadNestedData,
detailGridOptions: #nestedDetailGridOptionsFor('child'),
}
and withing loadNesteddata, we get params using we can select expanded row as
params.node.parent.setSelected(true)
Hope this helps.
I'm trying to write a method in GWT to override the series.show function for all Highcharts series, on show I want to essentially copy the series, remove the series from the chart, and readd it so that showing the series will redraw the line (instead of the default behavior where the line appears and the chart redraws). I have this modeled in a Jsfiddle: http://jsfiddle.net/ax3o8uf3/16/
I used Moxie's highcharts wrapper for GWT and used the setSeriesPlotOptions() method to set the series show event handler and call this native method from inside the onShow().
public static native void showSeries(JavaScriptObject series, JavaScriptObject chart) /*-{
var options = series.options;
options.color = series.color;
options.index = series.index;
options.marker.symbol = series.symbol;
series.remove();
options.visible = true;
chart.addSeries(options);
}-*/;
and everything worked fine. Then we updated the project's highcharts and highstock.js files and it broke everything. Now hiding and showing a series in the legend will cause it to redraw fine for the first series you do it for, but as soon as you try and show another series it breaks and goes back to the default functionality for all series. Any ideas on what I'm doing wrong or what might be causing it to not work after showing a second series on the graph?
I'm not sure why but for some reason using the seriesShowEventHandler() caused it to break after trying to show more than one series, the solution I came up with was something like this:
setSeriesPlotOptions(new SeriesPlotOptions().setSeriesLegendItemClickEventHandler(new SeriesLegendItemClickEventHandler() {
#Override
public boolean onClick(SeriesLegendItemClickEvent seriesLegendItemClickEvent) {
Series series = getSeries(seriesLegendItemClickEvent.getSeriesId());
if(seriesLegendItemClickEvent.isVisible()) {
series.hide();
} else if((series.getOptions().get("type").toString()).equals("\"line\"")){
removeAndReAddSeries(getNativeChart(), series.getNativeSeries());
} else {
series.show();
}
return false;
}
}));
I have two line series and how do I make points on both series selected at the same time? Basically, my chart has 2 y values sharing the same x value and I'm representing them as two series. I want to display both points as selected for a given X Value.
Hi there,Thanks for the reply. I'm doing that in
- (void)sChart:(ShinobiChart *)chart toggledSelectionForPoint:(SChartDataPoint *)dataPoint inSeries:(SChartSeries *)series atPixelCoordinate:(CGPoint)pixelPoint
SChartDataPoint* point1Series1 = [chart.datasource sChart:chart dataPointAtIndex:dataPoint.index forSeriesAtIndex:0];
point1Series1.selected = YES;
SChartDataPoint* point1Series2 = [chart.datasource sChart:chart dataPointAtIndex:dataPoint.index forSeriesAtIndex:1];
point1Series2.selected = YES;
When I print the selected state of both points after this line of code, they return 1(selected) but they don't seem to appear as selected on the chart only the one I selected on the chart on device seem to appear as selected though I'm calling redrawChart after that. Any help would be appreciated
I think that it's likely (and I'm guessing because I can't see your code) that your chart data source isn't returning a reference to a datapoint which is part of the chart, but instead generating a new datapoint object each time you request one.
In order to cope with this you can request the data points from the chart itself, via the dataSeries property on SChartSeries objects.
The following delegate method should perform the selection you require.
- (void)sChart:(ShinobiChart *)chart toggledSelectionForPoint:(SChartDataPoint *)dataPoint inSeries:(SChartSeries *)series atPixelCoordinate:(CGPoint)pixelPoint
{
// Selection details
NSInteger dataPointIndex = dataPoint.index;
BOOL selected = dataPoint.selected;
for (SChartSeries *chartSeries in chart.series) {
// If only one data point in the series can be selected at once, then deselect the rest
if(!series.togglePointSelection && selected) {
for(SChartDataPoint *dp in chartSeries.dataSeries.dataPoints) {
dp.selected = NO;
}
}
// Find the data point and perform the selection
SChartDataPoint *dp = chartSeries.dataSeries.dataPoints[dataPointIndex];
dp.selected = selected;
}
}
Hope that helps.
You should be able to set .selected on the datapoints and customise the series.style.selectedPointStyle properties to display points how you wish :)