[CLOSED] Chart: Creating in behind code and listeners

[cwolcott]

Let me see if I can explain this one.

I am creating my chart in behind code, removing any previous chart from the existing panel and adding the newly created chart. After adding certain features I add to the AfterRender handler to configure certain preferences that the user has previously selected via a ContextMenu.

Chart byMonthChart = new Chart();
...
// Create: Vertical Marker
VerticalMarker vm = new VerticalMarker();
vm.Enabled = false;
vm.Snap = true;
vm.ShowXLable = false;
byMonthChart.Plugins.Add(vm);

// Configure: Enable/Disable VerticalMarker based on Context Menu Option
if (ShowVerticalMarkers.Checked == true)
   byMonthChart.Listeners.AfterRender.Handler += 'this.plugins[0].enable();";
else
   byMonthChart.Listeners.AfterRender.Handler += 'this.plugins[0].disable();";
...
ChartPanel.RemoveAll();
byMonthChart.AddTo(ChartPanel);

My problem occurs when I append an AfterRender handler for the CategoryAxis to hide/show the gridLines. During the AfterRender the axes.items[0] is not a fully created Axis object and thus gridLines have not been created yet. It is just an Object with {grid: true, position: "bottom", title: "Month", fields: Array[1], type: "Category" }.

// Create: Category Axis
CategoryAxis cAxis = new CategoryAxis();
cAxis.Position = Position.Bottom;
cAxis.Title = "Month";
cAxis.Fields = new string[] { "Name" };
cAxis.Grid = true;  // Assign to true, so the user can show/hide
byMonthChart.Axes.Add(cAxis);

// Configure: Show/Hide Category Grid Lines based on Context Menu Option
if (CategoryAxisGrid.Checked == true)
   byMonthChart.Listeners.AfterRender.Handler += "this.axes.items[0].gridLines.show(true)";
else
   byMonthChart.Listeners.AfterRender.Handler += "this.axes.items[0].gridLines.hide(true)";

I have tried other listeners (beforeShow), but they are not fired. I assume because the chart is added to an existing panel? Any thought on how I can apply the Context Menu setting to the CategoryAxis before it is shown.

[Baidaly]

Hello!

It's difficult to say how to solve this problem. At first I'd try to add a small delay to the handler. Another way I would create a loop task that checks if axes.items[0] are initialized.

[Daniil]

I have tried other listeners (beforeShow), but they are not fired. I assume because the chart is added to an existing panel

Yes, the BeforeShow and Show events fire when calling the show method.
http://docs.sencha.com/extjs/4.2.1/#...ent-event-show

It is not called for initial appearing.

As for the main issue. Yes, a small Delay for the AfterRender listener might work.

[cwolcott]

The delay solved the problem.

byMonthChart.Listeners.AfterRender.Handler += 
     "var cGrid = App.CategoryAxisGridBtn; 
                  Ext.defer(toggleCategoryAxisGrid, 1, this, [cGrid, cGrid.checked]);";

There is a blink where you can see the grids for a second before they are hidden, but I can live with that.

I also had to add a listener on the charts resize so I could apply the show/hide to the gridLines (Category) and gridOdd (Numeric) whenever the window is resized.

To solve the blink and having to add the resize listener I could just clearout the category and numeric grid objects altogether and recreate on any show, but for now it is good enough.

Still one more thing I just noticed, if I select a series in the legend the chart redraws and the grids show up again. I need to determine if there is an event that I can capture or just implement my own suggestion above off clearing out the objects and recreate when needed (if possible).

[Daniil]

To avoid re-appearing, you, probably, have to set up respective config options like ".grid = false;" along with calling the hide method.

If you can provide a simple test case to reproduce both the issues - blink and re-appearing on legend click - I could play with that a bit trying to find the best solution.