Destroying & Re-creating a Chart Fails

[ahammad]

Hi,


I am trying to allow users to customize charts at runtime, however some of the features of the charts (like barMargin) cannot be set after the chart is created.

To get around this, I store the chart settings in a variable. Then when it comes time to customize, I adjust the field, destroy the chart, then recreate it using the variable.

Here is some code to simulate what I am talking about. This code simply changes the fill status of an Area chart when a button is clicked. I typed it into the Simple Chart example. When this example is run, the second chart invocation is drawn in a different place. In a different example, it doesn't even show up.

I have tested this under FireFox.

var settings = null;

f();

isc.Button.create({
    title: 'Toggle',
    click: function() { 
        simpleChart.destroy(); 
        settings.filled = false;
        isc.FacetChart.create(settings);
    }
});


function f() {

// Suppose you have an array of plain Javascript hashes,
// representing sales of certain products in certain regions

var chartData = [
    {region: "West",  product: "Cars", sales: 37},
    {region: "North", product: "Cars", sales: 29},
    {region: "East",  product: "Cars", sales: 80},
    {region: "South", product: "Cars", sales: 87},

    {region: "West",  product: "Trucks", sales: 23},
    {region: "North", product: "Trucks", sales: 45},
    {region: "East",  product: "Trucks", sales: 32},
    {region: "South", product: "Trucks", sales: 67},

    {region: "West",  product: "Motorcycles", sales: 12},
    {region: "North", product: "Motorcycles", sales: 4},
    {region: "East",  product: "Motorcycles", sales: 23},
    {region: "South", product: "Motorcycles", sales: 45}
]

// You could construct a simple chart of that data like this ...

settings = {
    ID: "simpleChart",
    // You use facets to define the ways in which you would like the chart to
    // break down the data. In this case, our data has two dimensions: region and product.
    facets: [{
        id: "region",    // the key used for this facet in the data above
        title: "Region"  // the user-visible title you want in the chart
    },{
        id: "product",
        title: "Product"
    }],
    data: chartData,        // a reference to our data above
    valueProperty: "sales", // the property in our data that is the numerical value to chart
    chartType: "Area",
    title: "Sales by Product and Region"  // a title for the chart as a whole
};

isc.FacetChart.create(settings);


// This is a form which you can use to change the chart type

isc.DynamicForm.create({
    ID: "chartSelector",
    items: [{
        name: "chartType",
        title: "Chart Type",
        type: "select",
        valueMap: isc.FacetChart.allChartTypes,
        defaultValue: "Area",
        changed : function (form, item, value) {
            simpleChart.setChartType(value)
        }
    }]
});

// Have the chartSelector update itself if the context menu is used to change chartType

chartSelector.observe(simpleChart, "setChartType", "chartSelector.getItem('chartType').setValue(simpleChart.chartType)");

// Overall layout

isc.VLayout.create({
    ID: "simpleChartLayout",
    width: "100%",
    height: "100%",
    membersMargin: 20,
    members: [chartSelector, simpleChart]
});

}

[ahammad]

Forgot to mention that the Developer Console reports nothing.

[Isomorphic]

Don't re-use the same settings object when passing it to FacetChart.create(). Create it each time. This just means putting it into a method you can repeatedly call.

[ahammad]

I did that, and it is still doing the same thing.

The graph gets recreated, but it either gets drawn out of the context of the confining window (in the Samples section) or if it's already at the upper left hand extent of the browser window, it prevents me from interacting from my page once its redrawn.

Here is the modified code. I went ahead and simplified it so you have less to sort through. As you can see, I am now re-creating the graph as per your suggestion. The only toggle is being passed in, so nothing is saved. However, the behavior is identical:

f(true);

isc.Button.create({
    title: 'Toggle',
    click: function() {
        simpleChart.destroy();
        f(false);
    }
});


function f(isFilled) {
    isc.FacetChart.create({
        ID: "simpleChart",
        top: 0,
        left: 0,
        facets: [
            { id: "region",  title: "Region" },
            { id: "product", title: "Product" }
        ],
        filled: isFilled,
        data: [
            {region: "West",  product: "Cars", sales: 37},
            {region: "North", product: "Cars", sales: 29},
            {region: "East",  product: "Cars", sales: 80},
            {region: "South", product: "Cars", sales: 87},

            {region: "West",  product: "Trucks", sales: 23},
            {region: "North", product: "Trucks", sales: 45},
            {region: "East",  product: "Trucks", sales: 32},
            {region: "South", product: "Trucks", sales: 67},

            {region: "West",  product: "Motorcycles", sales: 12},
            {region: "North", product: "Motorcycles", sales: 4},
            {region: "East",  product: "Motorcycles", sales: 23},
            {region: "South", product: "Motorcycles", sales: 45}
        ],
        valueProperty: "sales",
        chartType: "Area",
        title: "Sales by Product and Region"
    });
}

[Isomorphic]

When you create a chart and draw it, if you haven't placed it in a Window, it's going to be at the top left. Put it in the Window via addItem() to fix this.

[levi]

Hi,

v8.3p_2013-04-08/Pro Deployment (built 2013-04-08)

Looks like the context menu from a FacetChart (created using grid.chartData and set in a Window) is not destroyed when the FacetChart itself is destroyed.

Evaluator: result of 'isc_Menu_159.data' (0ms):
[Obj{title:Chart Type}, Obj{title:Fill}, Obj{title:Stack}, Obj{title:Swap Facets}
]

In the dev console Watch tab, I see some isc_Menu_xxx with target isc_Menu_159.target.ID == "isc_FacetChart_0".
+ When I eval isc_FacetChart_0 it returns null, rather than is "isc_FacetChart_0 not defined".