We Keep Coding

"javascript" bar graph that breaks down annual columns to monthly

I would like the make a bar or column graph using daily data, and by default user should get annual representation of the data, then if the user clicks on a column of a specific year, they get a monthly break down of that year.
Please help
Thanks

Also add the desire plugin to it
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "January" },
{ y: 7, label: "Febrary" },
{ y: 5, label: "March" },
{ y: 9, label: "April" },
{ y: 7, label: "May" },
{ y: 7, label: "June" },
{ y: 9, label: "Jult" },
{ y: 8, label: "August" },
{ y: 11, label: "September" },
{ y: 15, label: "October" },
{ y: 12, label: "November" },
{ y: 15, label: "December" },
]
}]
});
chart.render();
}
</script>

Making Highcharts look like progress bar with more than one series

I have been trying to modify the look of highcharts bars and I have managed to make the horizontal bar charts to look like progress bar charts. I followed this answer here in SO in order to do that. Right now, I am having two problems with this. The chart looks fine if I have one data series but here is how it looks if I have more than one series (there can be up to 3 series).
Therefore, I want to increase the margin between the labels (USA, Japan etc). Secondly, I would like to align the data labels (10, 40, 20 etc) towards the right of the chart, outside the bars. I think I need to write some javascript but I am not sure where to start or what to modify. Any help is appreciated.
Thanks.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -13,/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: true,
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
align: 'right'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
https://jsfiddle.net/fbsveysb/

Use groupPaddingfor increasing the space between column groups.
The default value of dataLabels.align is left (point on the left side of the label) - this value should be used to position data labels outside of the bars.
Live working demo: https://jsfiddle.net/kkulig/w782cud7/
API references:
https://api.highcharts.com/highcharts/series.bar.dataLabels.align
https://api.highcharts.com/highcharts/series.bar.groupPadding

This may be one of the possible solution as I made in comment. It uses Scrollbars for any axis which shows how to have scroll in axis. It uses highstock.js file, it can be applied to regular Highcharts axes.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140,
events: {
load: function() {
var maxVal = 0;
for (var i = 0; i < this.series.length; i++) {
if (Math.max.apply(Math, this.series[i].yData) > maxVal) {
maxVal = Math.max.apply(Math, this.series[i].yData)
}
}
this.yAxis[0].setExtremes(0, maxVal + 10)
}
}
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -20,
/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
grouping: true,
pointPadding: 0,
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
dataLabels: {
enabled: true,
//format: '{point.y:.1f}',
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
overflow: 'none'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>

add a bar Highcharts series

I want to add another bar to a category. for example I want to put another bar in Category 1 keeping my structure. but I'm adding data without an array. I do not want to use this structure for example.
series: [{
name: 'bar1',
data: [1000, 950, 920, 0, 850],
color: "#FF0000"
}, {
name: 'bar2',
data: [800, 770, 750, 0, 730],
color: "#000000"
}, {
name: 'bar3',
data: [600, 540, 535, 500, 30],
color: "#00FF00"
}]
I must use this:
series: [{
"data": [{
"name": "number1",
"y": 10,
"color": "#FF0000"
}, {
"name": "number2",
"y": 42,
"color": "#FFFF00"
}, {
"name": "number3",
"y": 60
}]
}]
I do it because I want to customize the name of each bar. but I do not know
   how to put another bar in the same category as show in the picture
this is my file...
http://jsfiddle.net/v51dxpLn/
I want every bar is assigned a different name and can put it in the same category. so far as I have my exampe I can only have one bar by category. I need to put n bars in a bar every category but still retains its different name.

Solution is to use multiple series, like here: http://jsfiddle.net/awe4abwk/1/
$('#container').highcharts({
chart: {
type: 'bar',
},
xAxis: {
categories: ['Cat 1', 'Cat 2', 'Cat 3']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
y: 10,
x: 0,
name: 'Bar 1'
}, {
y: 10,
x: 1,
name: 'Bar 2'
}, {
y: 10,
x: 2,
name: 'Bar 3'
}]
}, {
data: [{
y: 20,
x: 0,
name: 'Bar X'
}, {
y: 20,
x: 1,
name: 'Bar Y'
}, {
y: 20,
x: 2,
name: 'Bar Z'
}]
}]
});

Best way for debugging Hover state with CSS and JS changes

I would like to know what is the best/essayist way to debug an HTML element in an Hover state when using a JS library (in my example: Highcharts).
This library is using CSS but also real-time manipulation of the DOM with JS.
For example, in the attached JS fiddle there is an Highcharts Scatter map and I would like to know what are ALL to properties that the tool-tip (that appears when you hover one of the dots) has.
I saw in similar questions here that in firebug I can simulate the CSS rules of an Hover state for an element, but I did not see any answer about how to debug when CSS and JS are been used together.
Is there any option of "stacking" the page in the hover state, so I could examine the entire state?
example jsFiddle
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [
{ x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
]
}]
});
});
.highcharts-tooltip h3 {
margin: 0.3em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

What you can do is open your site in Chrome, hit F12 which is the Web developer toolbar, then hover over the element you want to test.
Then select from the top right the plus sign next to the Thumbtack , select the thumbtack
Once that is done you can select what state you want
At that point you would write a css :hover to see the state occur. (copy and save frequently though).

HighCharts - Show categories in x axis intead of the value of x in Bubble Chart

I've got this bubble chart very simple, what I want it's to show in the xaxis a custom string instead of the x value. For the fist object in the serie in the x axis show proyect 1 and so on.
$(function () {
var names = ["DAVE","JOHN"];
var projects = ["Project 1","Project 2"];
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts for staff project time'
},
xAxis: {
categories:['Project 1', 'Project 2', 'Project 3']
},
series: [{
data: [
{ x: 3.5, y: 4, z: 5, color: 'blue' },
{ x: 7, y: 7, z: 3, color: 'blue' },
{ x: 4, y: 8, z: 6, color: 'blue' }
],
}]
});
});
we want to show project 1, proyect 2.... instead of the corresponding x value. Maybe in the x axis like it shows there
xAxis: {
categories:['Project 1', 'Project 2', 'Project 3']
},
or in the object for example
data: [
{ name: Proyect 1, x: 3.5, y: 4, z: 5, color: 'blue' },
{ name: Proyect 2, x: 7, y: 7, z: 3, color: 'blue' },
{ name: Proyect 3, x: 4, y: 8, z: 6, color: 'blue' }
],
and then show in the x axis name instead the x value.
Here's the jsfiddle that I been using for test replacing the data for my data.
http://jsfiddle.net/jlbriggs/36zn2/1/

We've got this bubble chart very simple, what we want it's to show in the xaxis a custom string instead of the x value
$(function () {
var names = ["DAVE","JOHN"];
var projects = ["Project 1","Project 2"];
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts for staff project time'
},
xAxis: {
categories:['Project 1', 'Project 2', 'Project 3']
},
series: [{
data: [
{ x: 3.5, y: 4, z: 5, color: 'blue' },
{ x: 7, y: 7, z: 3, color: 'blue' },
{ x: 4, y: 8, z: 6, color: 'blue' }
],
}]
});
});
we want to show project 1, proyect 2.... instead of the corresponding x value. Maybe in the x axis like it shows there
xAxis: {
categories:['Project 1', 'Project 2', 'Project 3']
},
or in the object for example
data: [
{ name: Proyect 1, x: 3.5, y: 4, z: 5, color: 'blue' },
{ name: Proyect 2, x: 7, y: 7, z: 3, color: 'blue' },
{ name: Proyect 3, x: 4, y: 8, z: 6, color: 'blue' }
],
and then show in the x axis name instead the x value.
I get the answer from Highcharts helpdesk and I want to share it:
In first scenario, labels from categories are not printed, because categories are indexed from 0, so you have labels "until 2" index. But in data you refer to 3,5 / 4 / 7 index, so only numbers are printed. (Labels with these index don't exist in categories).
You can use solutions for that:
- fix index in your data, like here: http://jsfiddle.net/ee5ffq9w/1/
- increase amount of categories
- use points with category name: http://jsfiddle.net/ee5ffq9w/2/