I'm trying to use radio buttons to toggle the display between two Highchart charts (different data series) using divs. I essentially need the accepted solution here: Mootools Highcharts radio button toggle between charts, working jQuery version
...but I can't work out how to specify the variables for each chart from my existing code. The above solution uses this format:
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'divID-1',
height: 400,
...
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'divID-2',
height: 400,
...
whereas each of my charts are specified in the following format, e.g. Chart 1:
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$.get('data_stackedarea_value.csv', function(csv) {
$('#divID-1').highcharts({
chart: {type: 'area'},
data: {csv: csv},
...
How can I translate these into variables that can be called by the initial toggle function?
window.addEvent('domready', function() {
document.getElements("[name=toggler]").addEvent('click', function(){
$$('.toHide').setStyle('top', '-9999em');
$$('.toHide').setStyle('opacity', '0');
$("divID-"+this.get('value')).setStyle('top', '0').fade(0,1);
});
Many thanks
Here's an example where I adopted the solution from 23817700 to use the way you are passing variables to the charts.
I couldn't resist also adapting the toggle code to use jQuery, since it was required already. You can try this is action in this fiddle provided by #RachelGallen: https://jsfiddle.net/ezc7oghm/1/
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div id="graphwrap" style="height: 410px;">
<div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
<div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>
</div>
<div id="viewSelectWrap">
<h4>View Select</h4>
<label><input id="rdb1" type="radio" name="toggler" value="divID-1" style="cursor:pointer;" checked/>1</label>
<label><input id="rdb2" type="radio" name="toggler" value="divID-2" style="cursor:pointer;" />2</label>
</div>
<script>
$(function() {
$('[name=toggler]').click(function () {
$('.toHide').css({
top: '-9999em',
opacity: 0
});
var chartToShow = $(this).val();
$('#' + chartToShow).css({
top: 0,
opacity: 1
});
});
$('#divID-1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
$('#divID-2').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Time spent on hobbies'
},
xAxis: {
categories: ['Skiing', 'Bicycling', 'Swimming']
},
yAxis: {
title: {
text: 'Time spent on hobbies'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>
Related
I try to show temperature on a webapge (using Echarts.js) within 24 hours based on whole hours.
I have added a sample html.doc which i try.
Somehow it does not show the data.
Here is my example code:
The staqck-overflow editor keeps complaining that i had to add more details, please view the code.
That is full code.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- including ECharts file -->
<script src="http://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 80%;height:400px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
var now = new Date(2019,10,7);
var nowPlusOneday = +now + 24*3600*1000-1;
var data =[];
data.push([new Date(2019,10,7,1,5),19]); data.push([new Date(2019,10,7,2,10),34]);
data.push([new Date(2019,10,7,3,9),12]); data.push([new Date(2019,10,7,4,11),16]);
data.push([new Date(2019,10,7,5,13),29]); data.push([new Date(2019,10,7,6,16),14]);
data.push([new Date(2019,10,7,7,45),18]);
// specify chart configuration item and data
var option = {
title: {
text: 'Temperatuur'
},
legend: {
orient: 'horizontal',
top: 'bottom',
left: 'right'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'time',
min: now,
max: nowPlusOneday,
splitNumber: 12,
data: data.map(function (item) {
return item[0];
})
},
yAxis: {
min: 'dataMin',
max: 'dataMax',
type: 'value',
splitLine: {
show: true,
},
axisLabel: {
formatter: '{value} °C'
}
},
dataZoom: [{
startValue: '2001-06-06'
}, {
type: 'inside'
}],
series: {
name: 'Temperatuur',
type: 'line',
data: data.map(function (item)
{
return item[1];
}),
markLine: {
silent: false
}
}
// use configuration item and data specified to show chart
myChart.setOption(option);
</script></body></html>
This is my output:
output of html file
All help is welcome.
Thanks in advance.
Anand
I am trying to update a pie chart but the problem is its overlapping with legends which is causing an issue.
I am remove default series and add new series then old legend is not hide and new legend overlap.
following is my code :
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<button id="update">Update chart</button>
$(function () {
$('#container').highcharts({
chart: {
animation: {
duration: 1000
},
type:'pie'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: true
}
},
series: [{
name: 'Brands',colorByPoint: true,
data: [
{ name: 'Data1', y: 60.40,},
{name: 'Data2', y: 39.60,},
]
}]
});
var i = 1;
$('#update').click(function () {
var chart = $('#container').highcharts();
var newData =[{ name: 'ABC', y: 80 },{ name: 'XYZ',
y: 20,}];
while (chart.series.length > 0)
chart.series[0].remove(true);
let series={
name:'new Load',
data:newData
}
chart.addSeries(
series, false
);
chart.redraw()
});
});
That is a regression bug in Highcharts, which is reproted here: https://github.com/highcharts/highcharts/issues/12627 It is already fixed on the master branch.
To workaround use code from master branch or add this plugin:
(function(H) {
H.wrap(H.Point.prototype, 'destroy', function(proceed) {
if (this.legendItem) { // pies have legend items
this.series.chart.legend.destroyItem(this);
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
I have a mobile app developed using jquery mobile. One one page i have a chart. When the user clicks on <a href="chart.html" data-ajax=“true”>Chart</a> the page loads but the chart doesnt load. When i refresh the page the chart works.
When data-ajax=“false” the page works but its not smooth and doest have the transition effects
Below is my chart code
<script type="text/javascript">
$(function () {
var limit = 10000; //increase number of dataPoints by increasing the limit
var y = 0;
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
y += (Math.random() * 10 - 5);
dataPoints.push({
x: i,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
//Better to construct options first and then pass it as a parameter
var options = {
zoomEnabled: true,
animationEnabled: true,
title: {
text: "Try Zooming - Panning"
},
axisX: {
labelAngle: 30
},
axisY: {
includeZero: false
},
data: data // random data
};
$("#chartContainer").CanvasJSChart(options);
});
</script>
HTML
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
Is there away to execute the chart function without setting data-ajax=“false” ?
To work with complicated charts, i usually use Highcharts, it is very responsive and very customizable, and it also have very smooth transition effect when it shows.
Here is a Example on JSFiddle.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
I hope it help.
I am trying to toggle stacking for a multi-axis chart, but it seems I can only toggle one series at a time.
Does anyone know how to solve this? Here is a link to the jsfiddle:
http://fiddle.jshell.net/kz7wbykx/
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
defaultSeriesType:'column',
borderWidth:1,
borderColor:'#ccc',
marginLeft:110,
marginRight:50,
backgroundColor:'#eee',
plotBackgroundColor:'#fff',
},
title:{
text:'Chart Title'
},
legend:{
},
tooltip:{
},
plotOptions: {
series: {
stacking:'normal',
fillColor:'rgba(255,255,255,0)',
},
},
xAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'X Axis Title'
}
},
yAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Y Axis Title',
rotation:0,
margin:50,
}
},
series: [{
stack: 1,
name:'Series 1 Name',
data: [5,8,7,4,6]
},{
stack: 1,
name:'Series 2 Name',
data: [2,3,6,5,7]
},{
stack: 1,
name:'Series 3 Name',
data: [1,4,6,8,9]
}]
},function(chart){
$('button').click(function(){
chart.series[0].options.stack = +!chart.series[0].options.stack;
chart.series[1].options.stack = +!chart.series[1].options.stack;
//chart.series[2].options.stack = +!chart.series[2].options.stack;
chart.series[0].hide();
chart.series[1].hide();
chart.series[2].hide();
chart.series[0].show();
chart.series[1].show();
chart.series[2].show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button>toggle stacking</button>
I think that you can use Series.update() method in case of changing stack of your series. Here you can find information about this method:
http://api.highcharts.com/highcharts#Series.update
$('button').click(function() {
chart.series[0].update({
stack: chart.series[0].options.stack == '1' ? '0' : '1'
}, false);
chart.series[1].update({
stack: chart.series[1].options.stack == '1' ? '2' : '1'
}, false);
chart.redraw();
})
Here you can see an example how your chart may work using Series.update():
http://fiddle.jshell.net/kz7wbykx/1/
Regards,
I have spent many hours learning JavaScript and HighCharts today. I am trying to get this chart to display. I managed to get the JSON to work but I would prefer to get the CSV to work as all of my files are in CSV. I have gone through the JavaScript debugger a lot and see that my data is saving correctly but yet the data does not draw. The axis and title do display. Attached is my code. Thanks in advance for help. For whatever reason, the JSFiddle doesn't work so feel free to look at what I mean at: www.teratuple.com/data/dataVolume.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div id = "container" style = "width:100%; height:400px;"></div>
<script>
var seriesData = [];
var chart;
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 1 // all
},
xAxis: {
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Volume (mm3)'
}
},
title: {
text: 'Volume Differential'
},
series: [{
data: [],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 2
}
}]
};
$.get('www.teratuple.com/data/volumeData.csv', function (data) {
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if (lineNo > 0) {
seriesData.push([parseInt(items[0]), parseFloat(items[1])]);
}
});
options.series.data = seriesData;
chart = new Highcharts.StockChart(options);
});
});
</script>
</body>
</html>
The series property is meant to be an array so set your series data via
options.series[0].data = seriesData;