I have a line chart with multiple y axes and two x axes, i.e. time and distance. I would like to display the chart allowing the user to toggle between the two x axes. I'm struggling with how to define the chart so that it will show the xAxis as distance and have tried setting ordinal to false on the xAxis, using categories, specifying multiple xAxes and can't seem to crack the code. The working solution should produce two graphs as in the linked picture https://drive.google.com/file/d/0B5768Z0sc7d7TFBPVDExU1NXWHc/edit?usp=sharing (as this is my first post, I don't have the reputation to post the image here...)
Here are some simplified code snippets and the related jsFiddle's for your perusal.
$('#container').highcharts({
xAxis: {
categories: [2,4,6,8,12,16,22,24,32,36,44,56], // representing distance
ordinal: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}] });
This produces an equally spaced xAxis where each category element takes up one position, i.e. no "stretching" of the data series is introduced. http://jsfiddle.net/robertvizza/LLExL/2141/
$('#container').highcharts({
xAxis: {
ordinal: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},{
data: [2,4,6,8,12,16,22,24,32,36,44,56], // representing distance
xAxis: 0
}] });
This displays two series over equally spaced xAxis values.(jsFiddle is 2142 - again, first post and therefore can only post 2 links...)
I am hopeful that Highcharts can manage this as I would hate the need to recalculate all the data points to fake out the display across two different xAxes...Thanks in advance for your help.
Since your base xAxis is changing between charts you can try to actually change the chart completely. I created two chartOptions sets and a button to toggle between the two.
$('#btn').click(function () {
if (set == true) {
chartMainLoc = new Highcharts.Chart($.extend(true, {}, window.optionsChartDistance));
set = false;
} else {
chartMainLoc = new Highcharts.Chart($.extend(true, {}, window.optionsChartSpeed));
set = true;
}
});
I am pretty sure there is some one-liner jquery toggle but it is late in the day.
Here is an example fiddle.
Related
I made an area chart as in the example below:
Highcharts.chart('container', {
title: {
text: ''
},
plotOptions: {
series: {
allowPointSelect: true,
}
},
series: [{
data: [29.9, null, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, null, 194.1, null, 54.4],
type: 'area',
}]
});
Since my second value in a series is null, I see the first value as a dot. The same happens with the values in the end of the series. Is it possible to connect it to X axis with a line which will be colored as an area of the rest of the chart?
You need to set the series.connectNulls as a true to achieve it.
Demo: https://jsfiddle.net/BlackLabel/7qrtos3m/
API: https://api.highcharts.com/highcharts/series.area.connectNulls
try to change the colour dynamically for particular part in line chart but can't get any idea ,
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6],
zoneAxis: 'x',
zones: [ {
value:3,
dashStyle: 'solid',
color:'#7cb5ec',
fillColor:'#7cb5ec'
},{
value: 8,
dashStyle: 'dot',
color:'#FFA262'
}, {
value:11,
dashStyle: 'solid',
color:'#7cb5ec',
fillColor:'#7cb5ec'
}]
}]
here my fiddle
here i want to change the points(that have orange) colour in dynamic way in set of time interval i.e(5 sec)
please help me out to find the solution geeks
You need to dynamically update the series' zones. You can do it with Series#update().
chart.series[0].update({
zones: [{ ... }]
})
If you want to do it periodically use setInterval().
live example: http://jsfiddle.net/8gwh9yL6/
Hi Highcharts community,
I'm curious to know if there is a way to disable a single legend item by default. For example, if there were 3 legend items- "Accepted" "Ideal" "Prediction", is it possible to have ONLY the "Prediction" legend item disabled after the chart loads without having to click on the legend item first? (Note: I don't want to eliminate the legend item altogether, I just want it to be greyed out initially, and still retain the functionality to enable the legend item again after clicking it).
Any help would be greatly appreciated.
Thanks!
Yes, you can do this. In the series options for the data element you do not want to show set the visible property to false.
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
visible: false
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
Updated to set visibility after load.
To handle the case you talk about where you cannot inject the visible series property you can do this in the chart.events.load using series.update():
chart: {
events: {
load: function () {
this.series[0].update({
visible: false
});
}
}
},
Demo.
In this example I have used the index 0 for Tokyo series. You can do check for other series properties with if statements.
Below code works for me,(i am binding dynamic series)
$(Chart.series).each(function (i, val) {
if (val.name == "All Entity") {
val.setVisible(true);
}
});
I would like to have two pie charts to show up on my page, next to each other. They are both the same style but different data.
Is that possible and how?
Thank you
You can have multiple series of pie chart data on the same chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Group Name'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['20%'],
name: 'foo'
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['80%'],
name: 'bar'
}],
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
}
});
jsfiddle: http://jsfiddle.net/4NtBw/
Another solution is to set the same size for both charts. That would disable option to smart resize for pie with dataLabels and you will get two the same size charts both with enabled dataLabels.
Search center at : http://docs.highcharts.com/#polar-chart
It might help
I have a chart with several points and I want the dataLabels to appear only on those points which have been selected by the user.
I have tried several versions but it seems that the dataLabels are either on or off (There is an option to declare the datalabel in the series itself but this won't respond to select events.)
Many thanks
Here is how to toggle the display of a dataLabels. You need to explicitly set the dataLabels option on each point (as far as I can tell) to false. You then add an events option and do this:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
this.options.dataLabels.enabled = !this.options.dataLabels.enabled;
this.update();
}
}
}
}
},
Here is an updated jsFiddle. Note that if you pick anything other than the first 2 points it fails and gives error.
Old answer which is not "dynamic":
You just enable the dataLabels for the points you want to have it on.
Example:
series: [{
data: [29.9, 71.5, {
y: 106.4,
dataLabels: {
enabled: true
}
},
129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]