I am drawing a column chart (see image below) using Highcharts.
So far, I am successfully able to draw the chart, but I'm facing issues with pagination (next-previous buttons).
One idea would be to use a separate <div> element just below my chart and write a logic to show buttons, but in my requirements, I need to show the next and previous buttons in the chart area itself.
<div id="chart-2" class="graph"></div>
<div id="buttons"></div>
The following is the code to draw a chart - I have 12 categories (Jan - Dec), I want to display (Jan - Jun) on one page and (Aug - Dec) on another page.
$('#chart-2').highcharts({
chart :{
backgroundColor: '#3f3b53',
type:'column'
},
legend : {
symbolHeight : 8,
symbolWidth : 8,
symbolRadius : 4,
margin: 15,
backgroundColor: '#FFFFFF',
layout:'horizontal',
itemDistance:25,
symbolMargin:10,
itemStyle: {
color: 'black',
fontWeight: 'normal'
}
},
title: {
text: ''
},
xAxis: {
categories: [
'JAN',
'FEB',
'MAR',
'APR',
'MAY',
'JUN',
'JUL',
'AUG',
'SEP',
'OCT',
'NOV',
'DEC'
],
labels: {
style: {
color: '#FFFFFF'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
backgroundColor: '#FFFFFF',
borderColor: '#FFFFFF',
borderRadius: 0,
borderWidth: 5,
formatter: function() {
return ' <b>' + this.y + '</b><br><b>'+this.series.name+'</b>';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Physical Medicine',
color: '#0099ff',
data: [90, 80, 85, 70, 80, 50, 88, 85, 20, 30, 40, 50]
},{
name: 'Phychiatry',
color: '#ff3399',
data: [80, 70, 85, 60, 50, 70, 38, 89, 70, 40, 20, 50]
},{
name: 'Otrhopedic Surgery',
color: '#cc0000',
data: [88, 79, 81, 50, 40, 76, 31, 81, 65, 30, 29, 59]
},{
name: 'Nephrology',
color: '#ff5c33',
data: [88, 89, 61, 60, 70, 36, 21, 51, 69, 39, 21, 51]
},{
name: 'Cardiology',
color: '#ffa64d',
data: [18, 29, 31, 50, 40, 46, 81, 31, 89, 39, 81, 31]
},{
name: 'General Surgery',
color: '#ffe066',
data: [28, 59, 61, 59, 49, 41, 31, 41, 81, 31, 87, 38]
},{
name: 'General Practise',
color: '#a64dff',
data: [78, 69, 41, 89, 29, 81, 21, 11, 41, 35, 92, 89]
},{
name: 'Pulmanory Diesease',
color: '#0066ff',
data: [58, 39, 49, 89, 39, 61, 25, 45, 23, 76, 42, 89]
}]
}, function(chart) { // on complete
//chart.renderer.button("abc", 100, 100, function() {}, {}, {}, {}).add();
chart.renderer.button('Reset zoom', null, null, chart.resetZoom, {
zIndex: 20
}).attr({
align: 'right',
title: 'Reset zoom level 1:1'
}).add(chart.zoomGroupButton).align({
align: 'right',
x: -10,
y: 10
}, false, null);
});
If I understand you correctly, you can use chart.renderer.button for adding new buttons to your chart, that will change the extremes of your xAxis.
function(chart) { // on complete
chart.renderer.button('<', chart.plotLeft - 60, chart.plotHeight + chart.plotTop).addClass('left').add();
chart.renderer.button('>', chart.plotLeft + chart.plotWidth + 30, chart.plotHeight + chart.plotTop).addClass('right').add();
$('.left').click(function() {
chart.xAxis[0].setExtremes(0, 5);
});
$('.right').click(function() {
chart.xAxis[0].setExtremes(6, 11);
})
}
When you will change you xAxis extremes you will be able to show the half of your points on left button click, and the second half on right button click.
You can find options I have used in Highcharts API:
http://api.highcharts.com/highcharts
And here you can find an example how it can work:
http://jsfiddle.net/1dtt1Lph/2/
However, The Accepted Answer is true for Jan to Dec. If there are some different cases then above code will get only two screen. I have made a some customization to the accepted answer hope it will surely help others for different scenerio.
function (chart) {
var x=6;
var max_plot=12;
chart.renderer.button('<', chart.plotLeft - 60, chart.plotHeight + chart.plotTop).addClass('left').add();
chart.renderer.button('>', chart.plotLeft + chart.plotWidth + 30, chart.plotHeight + chart.plotTop).addClass('right').add();
$('.left').click(function() {
if (x < 0) {
x = 0;
} else {
console.log('fsafg');
chart.xAxis[0].setExtremes(x-6, x-1);
x=x-6;
}
});
$('.right').click(function() {
if (x > max_plot) {
x = max_plot;
} else {
chart.xAxis[0].setExtremes(x+1, x+6);
x=x+6;
}
});
}
Related
I have a line chart that displays fine on larger screen, but doesn't adjust accordingly on a smaller screen size. How can I make my chart responsive, can someone please help?
http://jsfiddle.net/samwhite/h5ysnxj4/4/
$("#sohChart").highcharts(
{
chart: {
type: "line",
zoomType: "x",
width: 1500,
height: 650
},
...
series: [
{
name: 'Series 1',
data: [100, 95, 90, 83, 80, 75, 70, 69, 65, 60, 55, 30]
},
{
name: 'Series 2',
data: [100, 77, 70, 69, 60, 55, 52, 44, 40, 35, 32, 25]
}
]
}
);
is there anyone having some experience with Google Charts, who was facing a similar problem before? I basically need to display the same y axis labels on the both sides of the graph, as shown on the image:
image of the graph
Here is my dataset:
['Date', 'Drilling', 'Stacked', 'Cold stacked', 'Construction', 'Repair']
['2020-09-16', 406, 171, 135, 67, 3]
['2020-09-17', 407, 170, 135, 67, 3]
['2020-09-18', 408, 169, 135, 67, 3]
['2020-09-19', 408, 169, 135, 67, 3]
['2020-09-20', 409, 168, 135, 67, 3]
['2020-09-21', 408, 169, 135, 67, 3]
['2020-09-22', 406, 171, 135, 67, 3]
['2020-09-23', 407, 170, 135, 67, 3]
...and so on...
And graph settings:
{
isStacked: true,
colors: ['#ff4852', '#005BFF', '#FFAB2E', '#af5ddf', '#00A580'],
vAxis: {
format: '######',
},
chartArea: {
top: '30',
height: '75%',
width: '80%',
},
series: {
0: {
textPosition: 'none',
},
},
vAxes: {
1: {
textPosition: 'none',
},
},
hAxes: {
0: {
gridlines: { color: 'transparent' },
},
},
}
Need to test it out but let's try as below. Otherwise you have to duplicate the series data and set it to 'targetAxisIndex: 1'.
series: {
0: {
targetAxisIndex: 0,
targetAxisIndex: 1,
},
},
I have a bar chart that has a label over each bar.
The problem is that when I hover on the chart, all of the labels disappear.
Before hovering:
After hovering:
and here's my code:
let barChartData = {
labels:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
datasets: [{
label: 'Sessions',
backgroundColor: 'rgba(0,163,224, 0.7)',
borderColor: 'rgba(0,163,224, 1)',
borderWidth: 1,
data:[81, 69, 60, 51, 37, 35, 45, 65, 86, 58, 64, 39, 48, 29, 69, 80, 52, 61, 56, 40, 51, 31, 70, 51, 32, 51, 27, 30, 44, 59, 46]
}]
};
let ctx = document.getElementById(id).getContext("2d");
let chart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
"animation": {
"duration": 1,
"onComplete": function () {
let chartInstance = this.chart, ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fontColor = 'black'
this.data.datasets.forEach(function (dataset, i) {
let meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
let data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
plugins: {
datalabels: {
color: '#000000'
}
},
legend: {
display: false
},
tooltips: {
enabled: true,
mode: 'label'
},
}
});
I removed the animation field but didn't work.
the chartjs version I'm using is 2.7.3
You can fix the problem with an update to Chart.js 2.9.3 and passing an empty hover function:
<html>
<head>
</head>
<body>
<canvas id="container"></canvas>
<script src="https://pagecdn.io/lib/chart/2.9.3/Chart.bundle.min.js"></script>
</body>
</html>
let barChartData = {
labels:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
datasets: [{
label: 'Sessions',
backgroundColor: 'rgba(0,163,224, 0.7)',
borderColor: 'rgba(0,163,224, 1)',
borderWidth: 1,
data:[81, 69, 60, 51, 37, 35, 45, 65, 86, 58, 64, 39, 48, 29, 69, 80, 52, 61, 56, 40, 51, 31, 70, 51, 32, 51, 27, 30, 44, 59, 46]
}]
};
const id = 'container';
let ctx = document.getElementById(id).getContext("2d");
let chart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
"animation": {
"duration": 1,
"onComplete": function () {
let chartInstance = this.chart, ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fontColor = 'black'
this.data.datasets.forEach(function (dataset, i) {
let meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
let data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
hover: () => {},
plugins: {
datalabels: {
color: '#000000'
}
},
legend: {
display: false
},
tooltips: {
enabled: true,
mode: 'label'
},
}
});
This fix doesn't work with Chart.js 2.7.3. I don't know if it's a bug or a different behavior on purpose.
Live example
I'm working on making a line chart like this, which is generated with Excel.
Is it possible to render a chart like above with highcharts?
Here is my progress for now:
Highcharts.chart('container', {
chart: {
marginBottom: 150,
marginLeft: 150,
width: 600,
},
title: {
text: 'Chart Title'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
max: 100
},
legend: {
width: '100',
height: 'auto',
floating: true,
align: 'left',
y: 10,
itemWidth: 100,
borderWidth: 1
},
series: [{
data: [31, 86, 8, 22, 35, 78, 63, 19, 7, 42, 41, 40],
name: 'First'
}, {
data: [74, 77, 100, 25, 70, 72, 16, 61, 55, 88, 52, 88],
name: 'Second'
}, {
data: [52, 93, 68, 5, 66, 79, 66, 41, 5, 55, 41, 49],
name: 'Third'
}, {
data: [23, 23, 75, 28, 42, 10, 48, 96, 98, 8, 32, 72],
name: 'Fourth'
}, {
data: [34, 68, 89, 98, 69, 46, 31, 47, 29, 24, 87, 59],
name: 'Fifth'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
The problem is that I have no idea about how to embed raw data in chart and align the data with lines.
Is it possible to create a chart like the one below using google charts?
I have no idea how to go about this, so I decided to try using candlesticks chart.
with this basic starter code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(candleChart);
/*CANDEL CHART*/
function candleChart() {
var data = google.visualization.arrayToDataTable([
['Jan', 20, 28, 38, 45],
['Feb', 31, 38, 55, 66],
['Mar', 50, 55, 77, 80],
['Apr', 77, 77, 66, 50],
['May', 68, 66, 22, 15],
['jun', 68, 66, 22, 15],
['Jul', 68, 66, 22, 15],
['Aug', 68, 66, 22, 15],
['Sep', 68, 66, 22, 15],
['Oct', 68, 66, 22, 15],
['Nov', 68, 66, 22, 15],
['Dec', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var options = {
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('candle_chart'));
chart.draw(data, options);
}
But this is not what I want, I don't know where to start and I couldn't find any documentation on how to make it like the chart in the image.
The vertical line needs 0 as the center like in the image with positive numbers increasing below it and positive numbers increasing above it.
The bottom blue bar would be total number of competitors that did not get accepted. The green bar being total of competitors that did get accepted.
the line will represent where the user placed in that number.
Please help I have no clue where to begin. Thank you in advance!
use a ComboChart with 3 series / y-axis columns.
for the first two series use stacked columns. the first being the negative values, the second positive.
isStacked: true,
seriesType: 'bars',
for the third, change the series type to line.
series: {
2: {
type: 'line'
}
},
data should look similar to following.
['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],
['Apr', -375, 180, -190],
['May', -180, 240, 100],
['Jun', -160, 100, -205],
['Jul', -125, 80, -12],
['Aug', -175, 110, -25],
['Sep', -100, 220, 150],
['Oct', -110, 390, 240],
['05 Nov', -10, 25, 30],
])
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#cddc39', '#616161'],
hAxis: {
title: 'FY 18'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -400, f: '400'},
{v: -200, f: '200'},
0,
200,
400
],
title: 'Amount'
},
width: '100%'
}
var chart = new google.visualization.ComboChart(document.getElementById('chart'))
chart.draw(data, options)
});
#chart {
height: 320px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
It's this:
var options = {vAxis: { ticks: [-80,-40,0,40,80] }}
Read through the documentation! Every page on the google charts site lists all the configuration options for that chart type: super useful stuff.
Working JS fiddle cribbed from a gcharts example here.