CODEWITHSUNDEEP
javascriptjqueryjsonhighchartslabel
riyan193
riyan193

Reputation: 63

how to show data json to 2 different highchart bar

im trying to show data in bar highcharts.. the bar highcart should be only 2 bar and both of the bar had data ..

so here the explanation...

i have 2 categories bar chart, and both of categories have a sub categories.

to be clear here is the data of categories :

the first category :

scategori 1-1, scategori 2-1,scategori3-1

and here is the second category :

scategori 1-2,scategori 2-2,scategori 3-2,scategori 4-2,scategori 5-2,scategori 6-2

and here is the example that i want to achieve :

enter image description here

and both of data comes from this json data :

[{
"name": "scategories 1-1",
"color": "#1E4585",
"data": [
  {
    "y": 40,
    "total": 40,
    "data": "1",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 2-1",
"color": "#600AB5",
"data": [
  {
    "y": 40,
    "total": 40,
    "data": "2",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 3-1",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 1-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 2-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 3-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 4-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 5-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},
{
"name": "scategories 6-2",
"color": "#0DB9D0",
"data": [
  {
    "y": 20,
    "total": 20,
    "data": "3",
    "name": "National",
    "drilldown": "3",
    "next": "level2"
  }
]
},]

and when I tried the data json above to the script of highchart . the result is not like what I want..

here is the result of my try:

enter image description here

can someone help me to achieve what I want to achieve or to make the result is same like what Ico want

Upvotes: 1

Views: 64

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You need to use the stack property and create two stacks. Example:

var series = [{
        stack: 'A',
        ...
    },
    {
        stack: 'B',
        ...
    }
];

Live demo: http://jsfiddle.net/BlackLabel/0fbrac5g/

API Reference: https://api.highcharts.com/highcharts/series.column.stack

Upvotes: 1

Related Questions