HighCharts Stock Chart fire event on chart redraw? - javascript

I'm using the HighStock stock charting library to generate a basic OHLC stock chart. I want to perform some action when the chart is generated (and after it's regenerated by changing the displayed time frame). I'm trying to do this using the plotOptions.ohlc.events.show event (documentation).
The problem I'm having is the even isn't firing at all. If I follow the example for the click event, the alert fires correctly when I click the series.
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'divChart',
height: 450
},
rangeSelector: {
selected: 2
},
xAxis: {
maxZoom: 14 * 24 * 3600000
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 250,
height: 100,
offset: 0,
lineWidth: 2
}],
title: {
text: 'Stock Chart'
},
series: [{
type: 'ohlc',
name: 'Prices',
id: 'prices',
data: ohlc
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1
}],
// The event I am trying to bind to
plotOptions: {
series: {
events: {
show: function () {
alert("show");
}
}
}
}
});
Is this the correct way to fire an event when the chart is redrawn?
If so, why isn't the event firing, and how do I fix it?

Change the chart part to something similar
chart: {
renderTo: 'container',
events: {
redraw: function(){ // or load - refer to API documentation
alert('Chart Loaded');
}
}
},
They've got a nice API browser - might come in handy
http://www.highcharts.com/ref/#chart-events--load

Related

3D column chart in .net core purely in c# code

I don't know if what I'm trying to achieve is even possible, but I thought someone has to have some knowledge.
I'm building a Telerik Report and I need to create a simple 3D bar chart. No visible axis. Just two vertical 3D bars.
I've tried the following:
<div id="container"></div>
JS:
// Set up the chart
const chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
height: 250,
width: 150,
options3d: {
enabled: true,
alpha: 35,
beta: 35,
depth: 50,
viewDistance: 50
}
},
xAxis: {
categories: ['Toyota', 'BMW'],
visible: false
},
yAxis: {
title: {
enabled: false
},
visible: false
},
tooltip: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
plotOptions: {
column: {
depth: 50,
groupPadding: 0,
pointPadding: 0
}
},
series: [{
data: [1318, 1073],
colorByPoint: true,
}]
});
function showValues() {
document.getElementById('alpha-value').innerHTML = chart.options.chart.options3d.alpha;
document.getElementById('beta-value').innerHTML = chart.options.chart.options3d.beta;
document.getElementById('depth-value').innerHTML = chart.options.chart.options3d.depth;
}
// Activate the sliders
document.querySelectorAll('#sliders input').forEach(input => input.addEventListener('input', e =>
{
chart.options.chart.options3d[e.target.id] = parseFloat(e.target.value);
showValues();
chart.redraw(false);
}));
showValues();
but my problem is, how do I save that image and assign it to my telerik picturebox? And where do I put the html code because I know telerik has an HTMLTextBox, but not a cshtml page that I can add
a div to.
Is there a way to create a 3D chart, purely in c# code (something similar to using System.Web.UI.DataVisualisation - but can't use that in .net core)? I know I can create a chart, as an image, and assign the image to the picturebox, but it's the creating of the image that I can't figure out.
This is what I'm trying to achieve in my telerik pdf:

highstock dual axis tooltip placement

I have a single highstock chart with 2 y-axis - one displaying an area chart and below it a column chart.
I am trying to achieve 2 things (both of which I know are possible, just not sure how to do it).
have a single tooltip, not the 3 that are currently showing up
have that tooltip follow the cursor - either tracking the cursor as
it move across the screen, or appear only over the chart which is
being hovered over (in reality the charts will be larger than the
codepen and require the page to be scrolled).
Appreciate any help!
$cumulative_chart = Highcharts.stockChart('container', {
chart: {
type: 'area',
height: 500
},
plotOptions: {
series: {
//stacking: 'normal',
dataGrouping: {
units: [[
'day',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
}
}
},
yAxis: [{
height: '50%'
}, {
top: '65%',
height: '50%',
offset: 0
}],
xAxis: {
offset: 100
},
credits: {
enabled: false
},
tooltip: {
enabled: true,
shared: true
},
series: [{
type: 'area',
data: [[1512086400000, 10626],[1512172800000, 21634],[1512259200000, 34994],[1512345600000, 51400],[1512432000000, 68430]],
stack: 0,
name: 'chart A',
id: 'area'
},
{
type: 'column',
data: [[1512086400000, 10626],[1512172800000, 11008],[1512259200000, 13360],[1512345600000, 16406],[1512432000000, 17030]],
stack: 1,
name: 'chart B',
yAxis: 1,
id: 'column',
showInLegend: false
}]
});
codepen: https://codepen.io/anon/pen/ZozBZM
The option you are looking for is to add split:false to your tooltip. This causes for the tooltip to center itsself around one of your graphs, instead of hovering over all the graphs in your highstock chart.
A working fiddle is found here
You can find more information in the highcharts API

Retrieving JSON data in highcharts

I have been trying to customize an excellent jsfiddle that I was fortunate enough to be directed to in an earlier question here: Switching between many Highcharts using buttons or link text
I am very new to javascript programming (and highcharts also) and I am having some difficulties in retrieving my own data from a database. Currently I have set up my charts like the following:
$('chart1').ready(function() {
var options = {
chart: {
renderTo: 'chart1',
type: 'column',
marginTop: 40,
marginBottom: 75
},
legend: {
enabled: false
},
title: {
text: 'Revenues',
x: 25 //center
},
xAxis: {
title: {
text: ''
},
categories: []
},
yAxis: {
showInLegend: false,
tickAmount: 11,
endOnTick: false,
startOnTick: true,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '.', ',');
}
},
title: {
text: '<?php echo $unitCurr; ?>'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',');
}
},
series: []
}
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
At the bottom you will notice that I am using JSON to retrieve information from my database and everything works just fine. In my earlier question I was asking about how to switch charts using buttons instead and was directed to the following jsfiddle: http://jsfiddle.net/jlbriggs/7ntyzo6u/
This example consists of 3 charts but I have just been trying to manipulate the first chart in order to find out if I could make my own data display instead of the random data that is being generated:
var chart,
chartOptions = {},
chartData = {};
chartData.chart1 = randomData(25);
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
But no matter how much I tried, I just can't seem to change the "data: chartData.chart1" in such a way that it retrieve the arrays I get from my $.getJSON function. Can any of you help me explain why, for instance, the below code doesn't work?. Here I try to exchange the ChartData.chart1 array for my database data. I'm not experienced enough to tell whether its the whole random number generation part of the code that prevents it from working or if it's my understanding thats severely lacking. (I have made sure that the data from data.php is indeed available, since I can display it in a normal array when I try).
var chart,
chartOptions = {},
chartData = {};
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
chartData.chart1 = json[6]['data'];
});
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
Any assistance you can provide will be greatly appreciated!
You're actually very close to something that will work. Your problem is related to the timing of async calls relative to inline code, and also the way assignments work in javascript.
As a quick example, here's some code:
x = {foo:5};
y = x.foo;
x.foo = 9;
At the end of this, x.foo is 9, but y is still 5.
Your line of code
chartData.chart1 = json[6]['data'];
doesn't execute until after the call to the server completes; it's contained within a call back function. However, this section of code
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
executes immediately. See the problem? You've cooked the current value of chartData.chart into chartOptions.chart1 BEFORE the server call has completed. That's why you're not seeing your data.
Instead, try something like this:
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: []
}]
};
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.series[0].data = json[6]['data'];
});
Now when your data comes back, you're putting it into the object that is actually being used to render the chart (once you click on the right button). Keep in mind that it's going to be empty until the server call completes.

Highcharts : Single point in x-axis of datetime type shows 00:00:00:0000

I render a chart using highcharts the x-axis is of 'datetime' type . When I have single point in the chart the x-axis label is shown as 00:00:00:0000 instead of ('18 Nov') the given date value.
This seems to happen in highcharts version 3.0.1 where as not in 3.0.7
I did found an issue here https://github.com/highslide-software/highcharts.com/issues/1572
But in case of datetime type for x-axis how can I fix this?
Is there any workaround without upgrading to latest version because that would involve verifying all other charts, which is not possible for now in my case.
Code:
var data1 = Date.UTC(2013, 10, 18);
var a = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
width: 600,
height: 400
},
plotOptions: {
series: {
marker: {
symbol: 'circle'
}
}
},
series: [{
name: 'Total Points Estimated',
data: [[data1,0]]
}],
title: {
text: 'Release Burn-Up report'
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
gridLineDashStyle: 'shortdot',
title: {
text: 'Date'
},
},
yAxis: {
gridLineDashStyle: 'shortdot',
min: 0,
title: {
text: 'Backlog Effort'
}
}
});
Fiddle link : http://jsfiddle.net/WdDqc/1/
Try to set minRange, for example to one day, otherwise Highcharts won't know what kind of label should be displayed. See docs.

highcharts grid lines are dissappearing on zoom

I am using highcharts to display charts in my project. Everything is great but when I use zoom buttons the grid lines are dissapearing.
Does anyone know what could be the reason for this?
Below is my code. I did not change much from the examples provided in highcharts.com.
I get the chart with grid lines first without any problem. Only when I use zoom buttons grid lines dissapear. This is not happening with highcharts examples.
var chart = new Highcharts.StockChart({
chart: {
renderTo: <id of my div>
},
rangeSelector: {
buttons: [
{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}
],
selected:3,
inputPosition:{
x:25,
y:25,
align:"left"
},
align:"left"
},
title: {
margin:40,
text: title,
style:{
color:"#000",
fontFamily: "AvenirNextLTW01-MediumC 721311 !important",
fontWeight:"bold",
fontSize:"12px"
}
},
scrollbar : {
enabled : false
},
yAxis: [{
title: {
text: ytitle
},
lineWidth: 2,
}],
credits: {
enabled: false
},
exporting: {
enabled: false
},
loading:{
style: {
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}
},
tooltip:
{
valueDecimals: 2,
style:{
fontSize:'9px'
}
},
series: [
{
type: 'line',
color: '#4572A7',
name: title,
data: <data array>
}]
});
Edit: I have used the following plug in my website for grouping categories in x-axis. The above problem occurs wherever I used this plugin. Can anybody suggest what I can change to get rid of this problem? Or can anyone suggest an other plugin which gives this functionality?
http://blacklabel.github.io/grouped_categories/
I have used this plugin code in following jsfiddle and could reproduce the issue.
Click on zoom(1y,6m) buttons in this fiddle and observe that grid lines are disappearing
http://jsfiddle.net/92NDX/

Categories