I want to use HighCharts because of the zoom function! Everything works great. There is one thing which I would like differently, but I can't seem to get it to work... My code:
http://jsfiddle.net/ma50685a/16/
$(function() {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
series: {
type: 'column'
}
},
title: {
text: 'Overview of veggies'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Sarah',
data: [2,2,3,0,8]
}, {
name: 'Ben',
data: [6,0,0,13,2]
}, {
name: 'Kiki',
data: [3,5,1,16,3]
}, {
name: 'Anna',
data: [0,5,1,3,2]
}],
credits: {
enabled: false
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}
});
});
On the x-axis I would like to display the categories! Is this possible because now it shows date?
As was mentioned, a stockchart works with datetime axis, but you can use a normal chart with a navigator enabled.
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: true,
series: {
type: 'column'
}
},
example: http://jsfiddle.net/ma50685a/26/
Navigator axis is still datetime, though. But I think mocking the datetime axis to look as the category is achievable.
Optionally, you can implement a master-detail chart.
http://www.highcharts.com/demo/dynamic-master-detail
Not very elegant but i think this is what you want :
http://jsfiddle.net/ma50685a/23/
$(function() {
// Create the chart
var categoriesCptChart = 0;
var categoriesCptStock = 0;
var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
series: {
type: 'column'
},
xAxis: {
labels: {
formatter: function() { return categories[categoriesCptStock++ % categories.length]}
}
}
},
title: {
text: 'Overview of veggies'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Sarah',
data: [2,2,3,0,8]
}, {
name: 'Ben',
data: [6,0,0,13,2]
}, {
name: 'Kiki',
data: [3,5,1,16,3]
}, {
name: 'Anna',
data: [0,5,1,3,2]
}],
credits: {
enabled: false
},
xAxis: {
labels: {
formatter: function() { return categories[categoriesCptChart++ % categories.length]}
}
}
});
});
Related
Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click
i have 2 graph in 2 different div(container1,container2) and have two set of buttons. both set of buttons triggering to the graph 2 only.when 1 click buttons of graph 1 it should change the graph 1 and when i click graph 2 buttons it should change the graph 2. but graph 1 and graph 2 buttons both are triggering to the graph 2 only.
JS fiddle code http://jsfiddle.net/h5t4c8hj/7/
code
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
},
subtitle: {
text: 'plain'
},
xAxis: {
categories: ['Bin1s', 'Bin2', 'Bin3', 'Bin4', 'Bin5', 'Bin6', 'Bin7', 'Bin8', 'Bin9', 'Bin10']
},
series: [{
type: 'column',
colorByPoint: false,
data: [22.3, 42.3, 96.4, 29.2, 44.0, 76.0, 35.6, 48.5, 16.4, 92.3],
showInLegend: false
}],
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
}, function(chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
$('#plain').click(function() {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Plain'
}
});
});
$('#inverted').click(function() {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'inverted'
}
});
});
$('#polar').click(function() {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change
$('#plain1').click(function () {
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
Yuu have named the two char with the same name
You must use a chart1 for second char and refer to this in update
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
},
subtitle: {
text: 'Filled %'
},
xAxis: {
categories: ['id-1', 'id-2', 'id-3', 'id-4', 'id-5']
},
series: [{
type: 'column',
colorByPoint: false,
data: [42.4, 71.5, 19.4, 29.2, 44.0],
showInLegend: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
},
function (chart) {
$.each(chart.series[0].data, function (i, data) {
if (data.y >= 70)
data.update({
color: 'yellow'
});
if (data.y >= 90)
data.update({
color: 'red'
});
})
});
//code for color change
$('#plain1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Sewage'
}
});
});
$('#inverted1').click(function () {
chart1.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar1').click(function () {
chart1.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
});
});
http://jsfiddle.net/6h9o5m2w/
It's because they have the same variable name. Consider naming them properly
// first chart
var chart1 = Highcharts.chart('container'
// second chart
var chart2 = Highcharts.chart('container1'
then trigger the events you wanted using their respective variables
hope that helps
You declared both charts over the same variable chart. So the latest declared chart overrides the first one. So:
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});
Becomes:
var chart = Highcharts.chart('container', {
title: {
text: 'Graph 1'
}
...
});
var chart1 = Highcharts.chart('container1', {
title: {
text: 'Graph 2'
}
...
});
You also targeted the same variable on each clickevent:
$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart.update({
...
});
});
Becomes:
$('#polar').click(function() {
chart.update({
...
});
});
$('#polar1').click(function() {
chart1.update({
...
});
});
Here is your working fiddle
Here is the code in concern: http://jsfiddle.net/e0qxfLtt/14/
$(function() {
var chartData = [50, 30, 4, 70, -10, -20, 20, 30];
var index = 1;
var chart1, chart2;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
chart1.series[0].remove();
chart1.addSeries({data: [chartData[index - 1]]});
setTimeout(function(){chart1.series[0].setData([]);}, 1000);
setTimeout(function(){
chart2.series[0].addPoint([index, chartData[index - 1]]);;
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 80,
categories: [''],
min:0,
max:0
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: [],
pointWidth: 28
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: []
}]
});
});
The bar charts are not animating at all. (I will do something about the color.)
I tried addSeries. However, I could only use it for the chart on the left, as for the chart on the right, only the last drawn bar should be newly drawn/animated.
i will be thankful to you all if you can tell me how to call java script function clicking by xAxis label on Highchart.
belowe here there's my code.
thanks in advance.
var options = {
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'rgba(100, 100, 100, 0.2)',
width: 1500,
height: 800,
...
},
title: {
....
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
....
},
yAxis:{
...
},
labels: {
style: {
color: 'black',
fontWeight: 'bold'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
....
},
series: []
};
Here how i call my
$(document).ready(function() {
var chart = new Highcharts.Chart(options);
});
PS: I found this way to call function by clicking on labels but it doesn't work in my case
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'bar',
},
legend: {
enabled: false
},
xAxis: {
categories: ['chr1','chr2','chr3','chr4'],
labels: {
formatter: function() {
return '<a href="http://www.w3schools.com">'+
this.value +'</a>';
}
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5]
}]
},function(chart){
$.each(chart.xAxis[0].ticks,function(i,tick){
tick.label.on('click',function(){
alert(tick.pos);
});
});
});
});
Jsfiddle
This is line where you create labels:
return '<a href="http://www.w3schools.com">'+
this.value +'</a>';
So you can simply change to this:
return '<a href="#" onclick="myFun()">'+
this.value +'</a>';
And should work.
I made highcharts for petrol tank(credit prepayment)
I want to make that each line should start from the beginning of the bar instead of grouping(adding) at the end.(I don't need to have sum of all data)
Thanks.
![var options = {
chart: {
type: 'bar',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: \['Credit'\],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: \[{
color:'#89C35C',
name: 'Current Credit',
data: \[10\] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: \[5\] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: \[1\] }\],
};
$('#container').highcharts(options);][1]
Example:
http://jsfiddle.net/2se5q/
you will find all the explanations on this link http://api.highcharts.com/highcharts
To answer your question if you delete only "plotOptions:" You will not find more than the sum of the graphics on a line but starting from 0.
Here : http://jsfiddle.net/2se5q/3/
plotOptions: {
series: {
stacking: 'normal'
}
I made it like this,where type = area
http://jsfiddle.net/2se5q/4/
var options = {
chart: {
type: 'area',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: ['Credit'],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: [{
color:'#89C35C',
name: 'Current Credit',
data: [10,10] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: [5,5] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: [1,1] }],
};
$('#container').highcharts(options);