I'm working on a site where I use Highcharts quite heavily for presenting data in charts. I want to user to be able to "zoom" each chart into a modal window for better readability.
I know how to manipulate the chart with its API, but I'm not quite sure how I can clone the chart and refer to the new chart with an variable?
I've done alot of searching, and all I've found is how to open in modal window with Highcharts own modal library, but I'm using a modal library called Lightview.
I have got this working using jQuery modal panel.
On click of original chart I am calling a javascript function popupGraph which will create a new highchart by merging the options of the existing highchart. On close event of modalPanel I am destroying the highchart that we have created for popup.
Hope this helps..
Code for actual chart that I show in small size.
trackingChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: loadChart,
click: function() {
popUpGraph(this);
}
}
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
align: 'center',
verticalAlign: 'bottom',
x: 10,
y: 0,
floating: false,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' points';
}
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
}
},
exporting: {
enabled: false
},
series: [{
data: []
}, {
data: []
}]
});
Code for function opening modal panel
function dummy() {}
function popUpGraph(existingChart) {
var options = existingChart.options;
var popupChart = new Highcharts.Chart(Highcharts.merge(options, {
chart: {
renderTo: 'popup_chart',
height:300,
width:700,
zoomType: 'x',
events: {
load: dummy,
click: dummy
}
}
}));
$( "#dialog").dialog({
autoOpen: false,
height: 350,
width: 750,
modal: true,
show:'blind',
close: function(event, ui) { popupChart.destroy(); }
});
$("#dialog").dialog("open");
}
You can get the new range by the selection event and then get the respective position from the chart serie.
See my example.
http://jsfiddle.net/ricardolohmann/sZMFh/
So, if you want to show it inside the lightbox you have to change the following code:
chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'container2'
},
series: newSeries
});
To this one, and set the container2 display to none
Lightview.show({ url: 'container2', type: 'inline' });
Further to Santhosh's answer, I added this at the end of popupGraph function to get data loaded up:
$.each(existingChart.series, function (prop, val) {
popupChart.series[prop].setData(val.options.data);
popupChart.series[prop].update(val.options);
});
Related
I need to add SolidGauge - HighCharts with drilldown.
I couldn't add drilldown for gauge. So I ve tried to load the div by calling script function
<div id="YTDSolidGauge" onload="drawGaugeChart();" onclick="drawBarChart(this);" ></div>
<div id="YTDBar" onclick="drawGaugeChart();"></div>
And trigger function in the barchart's function,
events:{
click: function(){
alert('test');
drawGaugeChart();
}
}
When I wrote the onload function in the gauge, the chart has disappeared.
I want the gauge to be loaded first and when we click on it, bar should be loaded.
When we click on the bar chart, it should be back to the gauge.
or we can reload the particular div to load another div.
I have a lot of charts, so it's better to call by function instead of writing 'onload' function in the body.
You need to catch click event in the series.point.events, destroy chart and create new one (bar). Then add also click event and call destroy/init.
var barOptions,
solidOptions;
barOptions = {
chart:{
type: 'bar'
},
series:[{
data:[1,2,3]
}],
plotOptions: {
series: {
point: {
events: {
click: function() {
var chart = this.series.chart;
chart.destroy();
Highcharts.chart('container', solidOptions);
}
}
}
}
},
}
solidOptions = {
chart: {
type: 'solidgauge'
},
legend: {
enabled: false
},
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
plotOptions: {
series: {
point: {
events: {
click: function() {
var chart = this.series.chart;
chart.destroy();
Highcharts.chart('container', barOptions);
}
}
}
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
}]
}]
};
Highcharts.chart('container', solidOptions);
Demo:
http://jsfiddle.net/nxaLpnLz/
Below is the entire document I am using to try to generate a highcharts sparkline:
<script>
var sparkOptions = {
title: {
text: ''
},
credits: false,
chart: {
renderTo: 'container',
width: 120,
height: 20,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
skipClone: true
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
legend: {
enabled: false
},
tooltip: {
enabled: false
}
};
$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();
t.addSeries({
data: [1, 2, 3, 4, 5]
});
</script>
<div id="container" style="height: 40px; width: 200px;">
<div id="the_chart"></div>
</div>
I've been searching for hours to try to get this to work. Can anyone point out what I am doing incorrectly? I have been using this link: http://jsfiddle.net/cainmodyo/VhxDA/ along with the highcharts website: http://www.highcharts.com/demo/sparkline/. Thanks in advance for any help you can give me!
In Highcharts you have 2 ways of defining WHERE to put the chart:
Using the renderTo property of chart
calling the highcharts() function on the JQuery object of the container (ex: $('#container').highcharts({options})
In your code you are using both methods since you defined renderTo: 'container' in the sparkOptions and then called the highcharts method over another JQuery object $('#the_chart').highcharts(sparkOptions);
To make it work you should change your last lines:
$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();
to:
var t = new Highcharts.Chart(sparkOptions);
and the remove the extra container you have in the html, the one with id the_chart.
Also you should wrap your code into '$(function () { << HERE YOUR SCRIPT >>});' to make sure it gets executed after Highcharts is loaded.
Fiddle
New to highcharts and as the title said I am trying to pull json from a webservice and place it into the chart (bar chart) but I am getting some weird behavior. after I pull the data down through $http.get() I try and set the series to that string of json like series: '$scope.jsondata'. It will fill some legends (more than expected) so it is getting the data. but the bars on the chart wont show.
On the other hand when I go to the url where I am getting the json and just copy and paste all of the json into the series field, it works perfectly.
I have a plunker here I have been working on that shows what I am talking about. You can just paste:
[
{
"name":"Kaia",
"data":[19]
},
{
"name":"Deborah",
"data":[86]
},
{
"name":"Phoebe",
"data":[77]
},
{
"name":"Rory",
"data":[17]
},
{
"name":"Savannah",
"data":[15]
}
]
...into the series field and everything works.
EDIT I havent yet, but I am planning to use $interval to update the data every x seconds. Something like :
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
mainInterval = $interval(function() {
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
}, 5000);
So like one of the answers suggested I put the chart creation in the callback of the $http.get() but I think that'd hinder the $interval
You can move the creation of the Chart into the callback of the get call to simplify things. http://plnkr.co/edit/utQG34xOQmtbOukTK71e?p=preview
Note I also updated series: '$scope.jsondata' to series: $scope.jsondata.
$http.get('https://api.myjson.com/bins/38qm9').success(function(ret) {
$scope.jsondata = ret;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Active Users'
},
xAxis: {
categories: ['user']
},
yAxis: {
min: 0,
title: {
text: 'Total Score',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
x: -40,
y: 100,
floating: false,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: false
},
credits: {
enabled: false
},
series: $scope.jsondata
});
console.debug($scope.jsondata);
});
I am trying to retrieve the text of a label on the char x-axis by clicking on it. I am using bar chart and the code is the following:
var chart = new Highcharts.Chart({
chart: {
type: 'column',
backgroundColor: '#eaedf1',
zoomType: 'x',
renderTo: 'container'
},
plotOptions: {
series: {
cursor: 'pointer',
pointWidth: 10,
point: {
events: {
click: function (event) {
console.log(event.point.name + " " + this.y);
}
}
}
}
},
title: {
text: 'Total Flow Types'
},
xAxis: {
type: 'category',
labels: {
rotation: -90
}
},
yAxis: {
min: 0,
title: {
text: 'millions'
}
},
legend: {
enabled: false
},
series: [{
name: 'Flow Types'
}]
});
Then by clicking on a button the chart gets populated using ajax which works fine. By checking the dom of the chart I saw that each of the labels is text /text. They are part of g/ element with a class highcharts-axis-labels highcharts-xaxis-labels. So I've tried retrieving the values using jquery like:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
or just
$('body').on('click', 'text', function () {
console.log($(this).text());
});
This all is part of the document.ready function. Unfortunately none of these retrieves the text of a x-axis label?
Instead of:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
Use this:
$('.highcharts-xaxis-labels text').on('click', function () {
console.log($(this).text());
});
You should not connect classes highcharts-axis-labels and highcharts-xaxis-labels with a dot. And also the class highcharts-xaxis-labels is enough to add the event on. Here's the fiddle: http://jsfiddle.net/8sxLr5j8/
You can use extension which allows do it.
I am interested to change legend layout on click event as below
1st click horizontal - bottom
2nd click horizontal top
3rd click virtical left
4th click virtical right
Here is Link to FIDDLE
I don't know how this can be done, this is what I have tried so far.
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<input id='legend' type='button' value='toggle legend'>
JAVASCRIPT
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
//min: 0,
//max: 50
},
plotOptions: {
series: {
stacking: 'normal'
}
},
xAxis: {
opposite: true
},
series: [{
name: '01-Jan-2014',
data: [
[28, 10],
[30, 0]
]
}]
});
var last = 0;
$('#legend').click(function(){
var arr = ['vertical','horizontal'];
if(last>arr.length){last=0;}
setTimeout(function() { alert(arr[last++]);},10);
chart.series[0].update({ legend: { layout: arr[last] }});
});
});
Here's a way to do it here. I hate resorting to setting the internal dirty flags but it seems to work well:
var somePositions = [['center','bottom'],
['center','top'],
['left','middle'],
['right','middle']];
$('#btn').click(function(){
posIdx++;
if (posIdx == 4) posIdx = 0;
chart.legend.options.align = somePositions[posIdx][0];
chart.legend.options.verticalAlign = somePositions[posIdx][1];
chart.isDirtyLegend = true;
chart.isDirtyBox = true;
chart.redraw();
});
You need to use tranlsate() function which allows to move SVG elements like legend.
var legend = chart.legend.group;
$('#btn').click(function(){
legend.translate(0,0)
});
http://jsfiddle.net/F3cSa/1/