Easier way to draw a bar chart using highcharts?

Question

I started to try to use Highcharts.

It seems that in order to draw a bar chart, I need to fill up these two properties like this:

       xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            crosshair: true
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }

---

Now I have the following table:

╔════╦════════╦════════╗
║ ID ║ State  ║ Number ║
╠════╬════════╬════════╣
║ A  ║ S1     ║      7 ║
║ B  ║ S1     ║      6 ║
║ B  ║ S2     ║      5 ║
║ C  ║ S3     ║      4 ║
║ C  ║ S1     ║      3 ║
╚════╩════════╩════════╝

The bar chart I want is

1. X is for the ID
2. For each ID , I want to plot the number for Each possible State .

So it seems I need the following properties for Highcharts:

       xAxis: {
            categories: [
                'A',
                'B',
                'C'
            ],
            crosshair: true
        },
        series: [{
            name: 'S1',
            data: [7, 6, 3]
        }, {
            name: 'S2',
            data: [0, 5, 0]    
        }, {
            name: 'S3',
            data: [0, 0, 4]
        }
        }

Is it correct?

---

So it seems I need to carefully convert my original table (in real life it can be bigger and more IDs and States) to the properties, and fill 0 to the ID s who do not have the Number for certain State s. For example, I may have to use dictionary of dictionary to store the converted table.

Is there an easy way to achieve that?

Answer 1

Yes, there is one thing which is redundant in your case - it's about filling up zeros. Instead provide index category and change data format a bit.

For example:

name: 'S2',
data: [0, 5, 0] 

Can be changed into:

name: 'S2',
data: [ [1, 5] ] 

And number 5 will be connected to the category with index 1 , which links to category name B .

So I would format your data in these steps:

• create categories array without duplicates
• split data into separate series
• for each point (or row/number - whatever you prefer to call it) set index of the corresponding category

Note that's just a suggestion probably with some built-in method it can be done a bit easier, though.