{"id":7734,"date":"2019-04-17T08:44:14","date_gmt":"2019-04-17T08:44:14","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=7734"},"modified":"2019-04-17T09:00:31","modified_gmt":"2019-04-17T09:00:31","slug":"code-js-column-chart-multi-level-x-axis","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2019\/04\/17\/code-js-column-chart-multi-level-x-axis\/","title":{"rendered":"How to Code JS Column Chart with Multi-Level X-Axis \u2014 Challenge AnyChart!"},"content":{"rendered":"

\"HowWe continue to update the\u00a0Challenge AnyChart!<\/a> section of our blog with new data visualization tutorials.\u00a0They nicely demonstrate how powerful our JavaScript charting library<\/a> is,\u00a0which our\u00a0Support Team<\/a>\u00a0is always eager to prove to everyone. In one of the first challenges, we already told\u00a0you how to create a JS chart with nested axes<\/a>. Since our customers keep showing interest in such forms of data presentation, now we’ll show you how to\u00a0build another interesting chart with a different appearance but quite similar code \u2014 an interactive JS column chart with a multi-level X-axis<\/strong>.<\/p>\n

<\/p>\n

Data Visualization Task<\/h2>\n

Here\u2019s the issue a customer asked us to solve:<\/p>\n

I want to display the data with subcategories in a column chart<\/a>, is it possible?<\/strong><\/em><\/p><\/blockquote>\n

To show how the nested axis should be placed, they attached the following picture:
\n\"Customer's<\/p>\n

Typically, here is what’s needed to make a chart like the one in the picture:<\/p>\n

    \n
  • work with data using view and iterator objects,<\/li>\n
  • use extra axis,<\/li>\n
  • use custom scales, and<\/li>\n
  • use weights<\/a> of scale ticks.<\/li>\n<\/ul>\n

    Solution Overview<\/h2>\n

    First of all, let\u2019s modify the source data and add empty values in it to visually separate data by category.<\/p>\n

    Then, once the chart has been drawn and calculations for the scales and bounds completed, add an extra axis and set the ticks and labels in a preferred way.<\/p>\n

    Preprocessing<\/h2>\n

    Before feeding the data to the chart, let\u2019s add empty values into the data, which will make visible where one category ends and another begins.<\/p>\n

    To achieve this, add one empty value to the beginning of the array, one more to the end, and two empty items every time the category name changes.<\/p>\n

    function preprocessData(data){\r\n  if (data.length > 0) {\r\n    data.unshift([data[0][0]]);\r\n    data.push([data[data.length - 1][0]]);\r\n    for (var i = 2; i < data.length - 1; i++) {\r\n      var previous = data[i-1][0];\r\n      var current = data[i][0];\r\n      if (current!=previous) {\r\n        data.splice(i, 0, [previous], [current]);\r\n        i = i+2;\r\n      }\r\n      else {\r\n        data.splice(i, 0, [previous]);\r\n        i += 1;\r\n      }\r\n    }\r\n  }\r\n  return anychart.data.set(data);\r\n}<\/code><\/pre>\n
    When it\u2019s done, add subcategory names to the meta using the\u00a0mapAs()<\/a> method to get a different view and use them as names of the X-axis ticks this way:<\/p>\n
    chart.column(data.mapAs({'year': 0, 'value': 2, 'sub-category': 1}));\r\nchart.xScale().names('sub-category');<\/code><\/pre>\n
    Now the JS column chart itself can be drawn.<\/p>\n
    Extra Axis and Additional Scale on JS Column Chart<\/h2>\n
    The time has come for adding an extra axis to the chart. To achieve this, create a function with the iterator object. It will be used for exploring the view and finding categories and subcategories.<\/p>\n
    After that, draw ticks between the categories and set up the weights.\u00a0This will give the chart a better\u00a0look:<\/p>\n
    var iter = data.mapAs({'category': 0, 'sub-category': 1}).getIterator();\r\nwhile(iter.advance()) {\r\n  var name = iter.get('category');\r\n  var value = iter.get('sub-category');\r\n  names.push(name);\r\n  if (name && names[names.length - 1] != names[names.length - 2])\r\n    ticks.push(iter.getIndex());\r\n  }\r\n  weights.push(value?0.5:0.2);\r\n}\r\n<\/code><\/pre>\n
    Axes work with scales. To be more precise, the former visualize the latter. So in order to implement the idea, a custom scale containing data of categories and subcategories is needed. Then\u00a0let’s pass the values, names, and ticks to this scale:<\/p>\n
    var customScale = anychart.scales.ordinal();\r\ncustomScale.values(chart.xScale().values());\r\ncustomScale.names(names);\r\ncustomScale.ticks(ticks);<\/code><\/pre>\n
    And build the new axis on it:<\/p>\n
    chart.xAxis(1)\r\n  .scale(customScale)\r\n  .orientation('top')\r\n  .ticks(true);<\/code><\/pre>\n
    Finally, we synchronize the weights with the chart scale:<\/p>\n
    chart.xScale().weights(weights);<\/code><\/pre>\n
    And disable the ticks on the main axis:<\/p>\n
    chart.xAxis(0).ticks(false);<\/code><\/pre>\n
    As was said, everything is possible with AnyChart! Now the entire JS column chart with a multi-level X-axis, which has been created along the tutorial, is ready to be presented. Check it out right here below, and if you want, you\u00a0are welcome to view and modify this sample\u00a0on\u00a0AnyChart Playground<\/a>.<\/p>\n