Mapping data from data wells

Question & Answer
, ,
1

I’m trying to produce a bubble chart with values encoding x, y, size and colour. I managed to do it to some extent with hard-coded values (although the colour is not correct, it’s using z instead of my colourValue).

{
“chart”: { “type”: “bubble” },
“title”: { “text”: “Personas Bubble Chart” },
“legend”: {
“enabled”: true,
“title”: {
“text”: “Percent male”
}
},
“colorAxis”: {
“stops”: [
[0, “rgb(199, 113, 243)”], // Low value = less intense (purple)
[0.9, “rgb(76, 175, 254)”] // High value = more intense (blue)
]
},
“xAxis”: {
//w don’t want a line with ticks at the bottom
“gridLineWidth”: 1,
“lineWidth”: 0,
“tickLength”: 0,
“labels”: { “enabled”: false },
“title”: { “text”: null },
“plotLines”: [
{
“color”: “#A9A9A9”,
“width”: 1,
“value”: 0,
“zIndex”: 5
}
]
},
“yAxis”: {
“labels”: { “enabled”: false },
“title”: { “text”: null },
“plotLines”: [
{
“color”: “#A9A9A9”,
“width”: 1,
“value”: 0,
“zIndex”: 5
}
]
},

“tooltip”: {
“pointFormat”: “{point.name}
X: {point.x}
Y: {point.y}
Size: {point.z}”
},
“plotOptions”: {
“bubble”: {
“minSize”: 40,
“maxSize”: 120,
“dataLabels”: {
“enabled”: true,
“format”: “{point.name}”
}
}
},
“series”: [
{
“name”: “Bubbles”,
“data”: [
{
“x”: -0.3384,
“y”: 0.3639,
“z”: 11,
“name”: “Bubble 1”,
“colorValue”: 0.25
},
{
“x”: -0.1026,
“y”: -0.1117,
“z”: 7,
“name”: “Bubble 2”,
“colorValue”: 0.44
},
{
“x”: -0.2843,
“y”: -0.4786,
“z”: 11,
“name”: “Bubble 3”,
“colorValue”: 0.48
},
{
“x”: -0.8098,
“y”: -0.1399,
“z”: 8,
“name”: "Bubble 4,
“colorValue”: 0.86
}

  ]
}

]
}

I’m now trying to do it more dynamically from a dataset I uploaded. In my data well (in the Group by) I have 5 columns for x, y, size, color and name. I’m struggling to use map to correctly assign these to the dimensions I need - do I even need map?

“series”: [
{
“data”: [“getColumn”,0,1,2,3]
}
]

This seems to be positioning my bubbles correctly and the size looks right, but how do I show name from column 4, and apply colour based on column 3? Why doesn’t this work?:

“data”: [“getColumn”,0,1,2,3,4],
“name”: [“get”, [“item”], 4]

Thanks in advance, I’ve just started using highcharts and finding the structuring of the data in my series quite difficult.

2

Hi @rapisarda,
Have you checked out the Highcharts walkthrough in the Demo Central section of the community?

There is a step by step guide on creating a bubble chart that could assist you in setting up correctly. Please note the sheets at the top as it begins on ‘Getting Started’ and continues on ‘Linking Data’.

Let us know if this helps solve your coloring issue or if you have any additional questions.

3

Hi, I have and my code is better now but the colouring still doesn’t work as expected. I’ve set my x and y for positions, which works fine, and my z for bubble size, which also works, but if I set colour to

“color”: [“get”, [“item”], 2]

I get no images. I read that if I defined the color in colorAxis, which I did

“colorAxis”: {
“stops”: [
[0, “rgb(199, 113, 243)”], // Low value = less intense (purple)
[0.9, “rgb(76, 175, 254)”] // High value = more intense (blue)
]
}

I should be using the value name, but when I do that my value is using what I defined as size for some reason:

“series”: [
{
“name”: “”,
“data”: [
“map”, //Iterate through each row of below dataset
[“getColumn”, 0, 1, 2, 3, 4], //State code, State, Tilemap X, Tilemap Y, Sales
//Create the following object for each row
{
“name”: [“get”, [“item”], 4], //persona
“x”: [“get”, [“item”], 0],
“y”: [“get”, [“item”], 1],
“z”: [“get”, [“item”], 2],//size
“value”: [“get”, [“item”], 3] //color
}
]

The output of this is my bubbles are coloured according to [“get”, [“item”], 2] not [“get”, [“item”], 3]. Looks like the “value” takes whatever “z” if set to. I will be grateful for help.

4

Also tried with

“colorValue”: [“get”, [“item”], 3]

and no success.

5

Figured it out, solution here:

{
“chart”: { “type”: “bubble” },
“title”: { “text”: “Financial Personas Bubble Chart” },
“legend”: {
“enabled”: true,
“title”: {
“text”: “Percent male”
}
},
“colorAxis”: {
“min”: 0.2,
“max”: 0.9,
“stops”: [
[0.2, “rgb(199, 113, 243)”], // Low value = less intense (purple)
[0.9, “rgb(76, 175, 254)”] // High value = more intense (blue)
]
},
“xAxis”: {
//w don’t want a line with ticks at the bottom
“gridLineWidth”: 1,
“lineWidth”: 0,
“tickLength”: 0,
“labels”: { “enabled”: false },
“title”: { “text”: “xxx” },

"plotLines": [
  {
    "color": "#A9A9A9",
    "width": 1,
    "value": 0,
    "zIndex": 5
  }
]

},
“yAxis”: {
“labels”: { “enabled”: false },
“title”: {
“text”: “xxx” },
“plotLines”: [
{
“color”: “#A9A9A9”,
“width”: 1,
“value”: 0,
“zIndex”: 5
}
]
},

“tooltip”: {
“pointFormat”: “{point.name}
X: {point.x}
Y: {point.y}
Size: {point.z}”
},
“plotOptions”: {
“bubble”: {
// “colorKey”: “value”,
“minSize”: 40,
“maxSize”: 120,
“dataLabels”: {
“enabled”: true,
“format”: “{point.name}”
}
}
},
“series”: [
{
“name”: “”,
“colorKey”: “colorValue”,
“data”: [
“map”, //Iterate through each row of below dataset
[“getColumn”, 0, 1, 2, 3, 4], //State code, State, Tilemap X, Tilemap Y, Sales
//Create the following object for each row
{
“name”: [“get”, [“item”], 3], //persona
“x”: [“get”, [“item”], 0],
“y”: [“get”, [“item”], 1],
“z”: [“get”, [“item”], 2],//size
“colorValue”: [“get”, [“item”], 4] //color
}
]
}
]
}