Dynamic Form, Grid and Charts

[gerardocrisci]

You can create a demo where a grid interacts with a chart?

click bars <=> select row.

 

Does anyone know how to do?

 

How you can use the events of the grid and the graph?

Thank you

 

look at this example extjs 4:

 

http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/charts/FormDashboard.html

Dynamic Form, Grid and Charts

Showing companies information in a grid. Selecting a row will highlight the bar corresponding to that company and fill in the form with the company data. A radar chart will show the company information. You can update the information in the form to see it change live in the grid, bar chart and radar charts

 

[Sherzod]

Hi,

 

Can you try to analyze this fast solution for now?!:

 

For example,

We have the following components on the form:

 

1. UniDBGrid1 (with dataset) ...

2. UniChart1 (with UniBarSeries1) ...

3. UniButton1...

 

UniButton1Click:

procedure TMainForm.UniButton1Click(Sender: TObject);
var
  i: Byte;
begin
  UniDBGrid1.DataSource.DataSet.First;
  for I := 0 to 9 do begin
    UniBarSeries1.Add(UniDBGrid1.DataSource.DataSet.Fields[5].Value, 
                      UniDBGrid1.DataSource.DataSet.Fields[2].Value // <- interaction with this value (Index = 2)
    );
    UniDBGrid1.DataSource.DataSet.Next;
  end;
  UniDBGrid1.DataSource.DataSet.First;
end;

UniDBGrid1 -> ClientEvents -> ExtEvents -> fn select:

function select(sender, record, index, eOpts)
{
    var sitem;
    MainForm.UniChart1.chart.series.items[0].items.forEach(function(item) {
        if (item.storeItem.data.LL === record.data[2]) {
            sitem = item
        }
    });
    if (sitem) {
        var series = MainForm.UniChart1.chart.series.get(0);
        series.highlight = true;
        series.unHighlightItem();
        series.cleanHighlights();
        series.highlightItem(sitem);
        series.highlight = false;
    }
}

UniChart1 -> ClientEvents -> ExtEvents -> [Ext.chart.Chart [chart]] -> fn chart.boxready:

function chart.boxready(sender, width, height, eOpts)
{
    this.series.items[0].addListener('itemmousedown', function(el) {
        var series = this.chart.series.get(0);
        series.highlight = true;
        series.unHighlightItem();
        series.cleanHighlights();
        series.highlightItem(el);
        series.highlight = false;

        var rec = MainForm.UniDBGrid1.getStore().findRecord('2', el.storeItem.data.LL);
        if (rec) {
            MainForm.UniDBGrid1.getSelectionModel().select(rec);
        };
    })
}

 

Best regards.

[gerardocrisci]

OK,

later ...

I'll try,

thanks