Highcharts: Dynamically (programmatically) assign the axis name - javascript

I am trying to add programmaticallya string to the x axis, instead than declaring it in the chart creation.
So for example, I have my chart:
$.(document).ready(function{) {
chart=new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'line'
}
yAxis: {
title: { text: 'theYaxis'}
}
series: [1,2,3,4]
});
});
Now I want to change the yAxis title, so I create a small function; so it will look like this:
var titleY;
function loadme(){
$.get('names.csv', function(data){
var lines= data.split('\n');
titleY=lines[0].split(','[0];
});
}
$.(document).ready(function{) {
chart=new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'line'
}
yAxis: {
title: { text: titleY}
}
series: [1,2,3,4]
});
loadme();
});
This will result in the title being empty.
I am checking to be sure that the value is correctly retrieved, using console.log, and the value is collected and printed. What is wrong here? I get the same issue if I populate the $.get function with data that I want to add to the series in the chart: the data is never add to the chart, even if it is correctly retrieved.

I have created a demo fiddle to dynamically change y-axis title. Refer this JSFIDDLE
HTML:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<input type="button" value="Change Y-axis Title to 'My text'" id="my_btn">
JS (part of thec code to update the y-axis title on a button click):
var chart = $('#container').highcharts();
$('#my_btn').click(function(){
//alert('hey');
chart.yAxis[0].update({
title:{
text:"My text"
}
});
alert('Y-axis title changed to "My text" !');
});
Refer Highcharts 'update' function documentation for further details.

You have two options:
use axis.setTitle() - good performance, I advice use that solution for setting title
use axis.update() - lower performance, because it recreates whole axis, while first method only changes title

Related

Is it possible to load csv data to Highstock chart?

I have a Highcharts line chart and I would like to add a range selector to it. To do this, I read that you have to use Highstock, so I am trying to re-make the chart but it won't load the csv data. There is no error message or anything in the console, the lines just don't show up. Is there a different format/syntax I have to use? Here is the relevant code:
$(function() {
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
title: {
text: 'My chart'
},
data: {
csv: document.getElementById('csv').innerHTML
},
});
});
Thanks in advance!
Loading data in Highchart and Highstock works the same. Notice, that data requires the data module to be loaded additionally. Your options seem good, so it can be the issue.
Highcharts data documentation:
It requires the modules/data.js file to be loaded.
Check the demo:
https://jsfiddle.net/wchmiel/afy6m3tb/
HTML:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container"></div>
<h3>Raw data</h3>
<pre id="data">Date,series A, series B, series C, series D, series E, series F
3/01/2001,100,100,100,100,100,100
4/01/2001,100.0723,100.0766,100.1225,100.1446,100.1687,100.1325
5/01/2001,100.0399,99.9775,100.0809,100.3502,100.1117,100.5127
6/01/2001,100.3103,100.3867,100.2974,100.5214,100.4256,100.6885
7/01/2001,101.3379,102.0689,100.686,100.6031,100.9522,100.7648
</pre>
JS:
window.chart = Highcharts.stockChart('container', {
data: {
csv: document.getElementById('data').innerHTML
}
});

jqplot set data series from table

I am using jqplot to create a pie chart from an HTML table.
However, when attempting to set a var the chart doesn't plot.
If i simply set a number for the var, such as:
var DataTest = 22;
then the chart works fine.
However, when I get the value from the table it doesn't, as below:
var DataTest = $(dataID + ' td:nth-child(46)').text();
The pie chart wont display.
The pie chart series is being set through a var also:
var PieChartS1 = [ ['Label', DataTest] ];
Then included in the chart code as follows:
var PieChartPlot = $.jqplot('PieChart', [PieChartS1, PieChartS2 ], {
seriesDefaults: {
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
sliceMargin: 1,
startAngle: -145,
showDataLabels: true,
dataLabels: 'label',
padding: '5',
ringMargin: '5',
dataLabelThreshold: '1',
highlightMouseOver: true,
}
},
grid: {background: 'transparent', borderWidth: '0', cursor: 'pointer',},
});
I'm wondering whether it is a format issue?
Thanks for any help
Richard
Update:
Am wondering whether the graph is being formed by the script before the data has been obtained, so it is just showing blank as it is finding no data. Perhaps I need to delay the graph formation until the 'get data' scripts are fully executed?
Had some help from elsewhere.
It needs to be specified as an integer, so the change needs to be:
var DataTest = parseInt($(dataID + ' td:nth-child(46)').text());
This works fine.

Can I load the columns (each series) one by one in a HighChart JS?

I am using HighCharts JS for making a bubble chart. It's a pretty self-explanatory but what I am trying to do is a changed mechanism.
the graph loads the chart perfectly, but it loads all the columns (or series) at the same time. What I am hoping to do is that it loads each column one-by-one.
You can see the example graph at this link:-
http://www.highcharts.com/demo/bubble
As you can see in the sample graph shown above, they have three series, and they all load simultaneously; I was hoping that it loads one-by-one.
Any idea,
Thanks.
You can remove series from options, and add all of them in load event. Demo: http://jsfiddle.net/qc8bS/
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
events: {
load: function () {
var chart = this;
function addSeries() {
if (s.length > 0) {
chart.addSeries(s[0]);
setTimeout(addSeries, 1000);
s.splice(0, 1);
}
}
addSeries();
}
}
},
title: {
text: 'Highcharts Bubbles'
},
series: []
});

HighCharts full width issue

Im trying to make my rendered chart fill 100% of the parent div with no success. Is there any way I can remove the gap on the left and right sides?
http://jsfiddle.net/sKV9d/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: 300,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
The issue is because of jquery UI. after rendering your chart call this code to reflow the chart. This fixed my problem
chart.reflow();
If you remove the options width: 300, height: 200 like this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
defaultSeriesType: 'areaspline'
},
...
it will fill automatically the container.
Set minPadding and maxPadding to 0, see: http://jsfiddle.net/sKV9d/3/
I solved it by
window.dispatchEvent(new Event('resize'));
UPD:
remove width and height attributes.
add into .css the following code in order to adjust chart block to 100% of #container:
chart { width: 100%; height: 100%; }
2a. another way is - in case if not possible to define container size during "design" time you can reflow chart after chart load (i.e. call chart.reflow(); ):
chart: {
events: {
load: function(event) {
**event.target.reflow();**
}
}
},
See example http://jsfiddle.net/yfjLce3o/
just simply add CSS
.highcharts-container{
width: 100% !important;
}
.highcharts-root{
width: 100% !important;
}
Try this :
var height= $("#container").height();
var width= $("#container").width();
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: width,
height: height,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
The issue with Highcharts already reported here.
To handle this we can do something like mentioned above.
I was also facing the same problem so I have solved it by using
window.dispatchEvent(new Event('resize'));
after rendering my chart like :
this.chartData={
... //some required data object to render chart
}
Highcharts.stockChart('divContainerID', this.chartData, function (chart) {});
window.dispatchEvent(new Event('resize'));
If you do not provide width property to the chart, it should automatically get the width of the container.
So just remove the width from the chart and give the container width: 100% and that should work.
If you want a specific width, just change the container width to a specific size. The chart should still be 100% of that size.
JSFiddle
Example:
HTML
<div id="container">
<div id="chart"></div>
</div>
JS
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
CSS
#container {
width: 100%;
height: 200px;
}
use updateChart function and call chart.reflow() inside that function
scope.updatechart = function(){
scope.chart.reflow();
}
call updatechart method every 30 seconds using any refresh mechanism
I tested it, and it is working very well:
chart-tab is div, and contains high chart div, so you first need to define two DIVs, first for containing the chart('chart-container'), and second the container of 'chart-container' which is 'chart-tab', then one library must be added('resizesensor') for adding the event for 'chart-tab' DIV on-change , and here is the function as follows:
new ResizeSensor($('#chart-tab'), function(){
if(chart){
var wid = document.getElementById('chart-tab').clientWidth;
var hei = document.getElementById('chart-tab').clientWidth;
chart.update({
chart: {
width: wid,
height: hei
}
});
}
});
You can make use of chart.update function from anywhere across your project.
Highcharts.charts.forEach(function (chart) {
chart.update({ chart: { width: some value } }, true, true, true);
})
In my case it was a loading issue that caused the chart container to be too narrow. If you make use of jQuery then load your chart like this
$(document).ready(function() {
let chart = Highcharts.stockChart('chart-container', {
[...]
}
}
Angular only:
if you are using angular-highchart library then remove style from your options and simple do this
<highcharts-chart
*ngFor="let stock of chartArray; let i = index"
[Highcharts]="Highcharts"
[constructorType]="'stockChart'"
[options]="stock.chartOption"
style="width: 100%; display: block"
>
</highcharts-chart>
style="width: 100%; display: block" here is the noticable part. Ignore the rest please
For me using Angular it was solved by moving setting the option in ngAfterViewInit!

Highcharts Column Series Point Object Click Function

Recently I posted a question on Highcharts column charts drilldown. I have found that in click event of point object you can find out which column was clicked. I have implemented the same in my code but I am not getting alert in my code. Please find below my code. First is my chart options variable -
var columnoptions = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Column Chart'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Exposure'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('here');
}
}
}
}
},
series: []
};
I am filling the series dynamically with below statements in a loop -
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
Finally I display my chart like this -
chart = new Highcharts.Chart(columnoptions);
But I am not getting any alert on column click. I get error javascript error messages in IE. I am using IE8. Kindly help me with this. Highcharts official example with static data works fine and I have seen that. My chart displays correctly without any issues. But I need to know which column was clicked to implement drilldown functionality. Please help.
---Edit
Here is the full function I am using to draw the charts-
function displayColumnChart(){
columnoptions.series = [];
columnoptions.xAxis.categories = [];
var seriesOptions = {
name: 'Column Chart',
data: [],
};
/* category array contains x axis category values
value array contains y axis numeric values */
for(index = 0; index < categoryArray.length; index++){
columnoptions.xAxis.categories.push(categoryArray[index]);
seriesOptions.data.push(valueArray[index]);
}
columnoptions.series.push(seriesOptions);
chart = new Highcharts.Chart(columnoptions);
}
I am reading my data from an XML doc and then creating value and category array. Chart comes fine but not getting alert on point click. Please help. Thanks. :) Sorry for delay in posting the code.
I only added the latest version of the highcharts and point click is working for me. Thanks.

Categories