Seeking some clarification regarding DataGrid

[salman-siddiqui]

Hello Highcharts team,

I am thoroughly enjoying the ease of use, variety and flexibility your product along with the possibility to use the product for prototyping. Currently I am trying to build a pie chart with the help of DataGrid.

I have a DataGrid that has two columns, the pie charts would be generated from 2nd column. Its working as expected but if I try to add two additional columns, table/Grid is generated correctly but the respective pie charts is drawn overlapping twice. Once its taking values from 2nd column which is the desired outcome, but somehow I am getting second pie chart overlapping the first one & the values for it is taken from 4th column. Which is strange & I would like to avoid this unexpected behavior.

I tried searching the documentation but unable to find any reference where I could explicitly tell Highcharts which column it should use when drawing the chart. Am I overlooking something? For prototyping & trial, currently we are using the free version of Highcharts

Thanks in advance

[dawid.d]

Hi,

Welcome to the forum, and thanks for your question!

I’m glad you’re enjoying our library! It seems that the option you’re looking for is `columnAssignment`. Check this out: https://www.highcharts.com/docs/dashboa ... eries-data

By default, all columns are included in the chart as separate series. You can easily set this up using the `columnAssignment` option. Here’s a demo with a pie chart: https://jsfiddle.net/BlackLabel/jnr5hy4f/

In the documentation link I shared at the beginning of the message, you’ll find many other ways of assigning columns to series using `columnAssignment`. However, if you have any additional questions, feel free to reach out—I'm more than happy to help. The Dashboards library is under active development, and any comments or feedback are especially welcome!

Best regards,

[salman-siddiqui]

Hello Dawid,

Thanks for getting back to me with an example along with documentation.

I will have a look at it in detail but by the looks of it I think this might be something I am overlooking at the moment.

Thanks & regards
Salman

[salman-siddiqui]

Hi,

Sorry it took longer than expected to give my feedback. I am not sure but somehow Highcharts is ignoring the mentioned columnAssignment. JSON excerpt is as follows. Kindly ignore it being valid/invalid there may be copy paste errors but the chart config is valid & its showing the chart & table.

"GridCharts":[
{"type":"DataGrid","cell":"cell-id-Marktpreise2","elements":{"connector":{"id":"conn-id-Marktpreise","columnAssignment":[{"seriesId":"myseries","data":"SCR"}]},
"dataGridOptions":{"editable":false,"resizableColumns":false}}}],
"Connectors":[{"id":"conn-id-Marktpreise","type":"JSON","options":{"firstRowAsNames":false,"columnNames":["Marktpreisrisiken","SCR","RT","RT in%"],
"data":[["Cash", 10, 20 ,1.38]] }}]

[dawid.d]

Hi,

Thanks for the options JSON!

Look at this, correct one:

Code: Select all

Dashboards.board('container', {
    dataPool: {
        connectors: [{
            id: 'data',
            type: 'JSON',
            options: {
                data: [
                    ['col1', 'col2', 'col3', 'name'],
                    [1, 5, 5, 'A'],
                    [4, 2, 4, 'B'],
                    [3, 3, 2, 'C'],
                    [2, 4, 6, 'D'],
                    [5, 1, 1, 'E']
                ]
            }
        }]
    },
    gui: {
        layouts: [{
            rows: [{
                cells: [{
                    id: 'dashboard-col-0'
                }, {
                    id: 'dashboard-col-1'
                }]
            }]
        }]
    },
    components: [{
        renderTo: 'dashboard-col-0',
        type: 'Highcharts',
        connector: {
            id: 'data',
            columnAssignment: [{
                seriesId: 'sample-series',
                data: ['name', 'col2']
            }]
        },
        chartOptions: {
            chart: {
                type: 'pie'
            }
        }
    }, {
        renderTo: 'dashboard-col-1',
        type: 'DataGrid',
        connector: {
            id: 'data'
        },
        dataGridOptions: {
            columnDefaults: {
                cells: {
                    editable: true
                }
            }
        }
    }]
});

first of all, columnAssignment should be on the component it applies to (must be Highcharts Component), not on DataGrid.

If you want to display selected columns from the connector on the datagrid, use the `header` option, or use `enabled: false` on the columns you want to hide, in the `columns` option. See: https://www.highcharts.com/docs/datagrid/columns

Let me know if you need some more information

Best regards