javascriptphpjqueryeditablegrid

editablegrid set columns for rendering a bar chart graph

I'm using editableGrid for my project and I want to create a graph, with values from only 1 column.

When using renderBarChart() function, the table renders a graph, but with all numeric columns (set in metadata as integer or double) as data. So I have graph with data which are not related at all. Is there a way, how to force the graph to load data from 1 column (eg. only price)?

Solution

  • Ok, I figured it out. Only thing you have to do is set columns in metadata part with attribute bar: false in order to remove those columns from rendering in graphs.

    editableGrid.load({ metadata: [
    { name: "price",      label:"Price",      datatype: "double(CZK,2)",   editable: true, },
    { name: "discount",   label:"Dis.",       datatype: "double(CZK,2)",   editable: true,    bar: false },
    { name: "count",      label:"Pieces",     datatype: "integer",         editable: true,    bar: false }
]});

    This is not IMHO the best way to do this. This way if you want to have 2 separate graphs (eg. price of product and number on stock), you can't do it, because you have stock count set not to show in graphs.

    Much nicer would be to modify the function, and pass into arguments array of columns, which you want to display, like so:

    editableGrid.renderCharts = function() {
    this.renderBarChart("chart-graph", 'Prices', 'product_name', ['price_amount', 'discount'], {alpha: 0.75, bar3d: false});
};

    Just saying, if any developer is looking