We Keep Coding

Can we have 2 Y-axis for StockCharts in HighCart.js?

Picture as a reference
I want to build this type of chart and my data set link is below. I'm unable to find any example regarding this.
https://docs.google.com/spreadsheets/d/1geCzzfBeyY8yDHAdEFWUSUf8ex3QWfqDtPg7ArOdTw0/edit?usp=sharing

From the referred image I can see that it is a stock chart, which demo base you can find here: https://www.highcharts.com/demo/stock
How to align the series to the particular yAxis you can find here: https://api.highcharts.com/highcharts/series.line.yAxis
Sample demo: https://jsfiddle.net/BlackLabel/95ptgrec/
// Create the chart
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'axis1'
}
}, {
title: {
text: 'axis2'
}
}, {
title: {
text: 'axis3'
},
opposite: false
}],
series: [{
data: generateData()
}, {
data: generateData(),
yAxis: 1
}, {
data: generateData(),
yAxis: 2
}]
});
If you want to implement charts in Angular or React environment I encourage to use the official wrappers:
https://github.com/highcharts/highcharts-angular
https://github.com/highcharts/highcharts-react

Unable to USE tooltips when viewing svg code

I've searched around for several days and have not been able to find a solution to this issue. I'm generating highcharts with not problem. Inaddition, I'm using the below simple function to get the svg code for each chart.
function generateSVG (){
var svg_xml = $('#container').highcharts().getSVG();
document.getElementById('svg_code').innerHTML = svg_xml;
}
My issue is that with the chart originally generated by highcharts I am able to mouseover the chart and see tooltips. However, when I later embed the generated svg code, even with including all the external resources, the tooltips do not work - everything becomes like a static image. After inspecting the svg code extracted next to the code used to generate the initial chart, I noticed that the line of code which includes the tooltip class for highcharts was missing in the extracted code. Am I missing something here. Below is an example of one of the functions used to generate a chart.
function highArea(theD){
setHighSize();
var theData = theD;
$.get(theData, function(data) {
Highcharts.chart('chartDisplay', {
colors: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff"],
chart: {
type: "area",
useHTML: true
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
title: {
text: chart_title
},
data: {
csv: data
},
title: {
text: chart_title
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
title: {
text: some_label
},
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/> {point.x}'
},
plotOptions: {
area: {
marker: {
enabled: true,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
}
});
generateSVG();
});
}
Is what I'm trying to do even possible? I would really appreciate any feedback on this matter.
Thanks :)

Calling API data from kendo-ui chart series

Is there a way to refresh the charts with remote data if you don't use datasource but instead dynamically create a series set with the return data from the API? What I would like to do is have call the API again and rebuilt the chart.

When using Aurelia, there is a 3rd party bridge between kendo and aurelia called the aurelia-kendo-bridge. When using that they have a recreate() function that can be run to reload the charts. I just had to target all my charts and it worked. Thanks very much #Jeroen Vinke for all the help.

using this you can call the api from controller and if you want live update try to refresh the chart at particular time.
$("#chartere").kendoChart({
dataSource: {
transport: {
read: {
url: '#Html.Raw(#Url.Action("method", "controller"))',
dataType: "json"
}
},
group: {
field: "title",
Color: "Color"
}
},
seriesDefaults: {
type: "bar",
stack: {
type: "100%"
}
},
series: [{
field: "value",
colorField: 'Color',
groupColor: function (item) {
var series = item.series;
series.color = series.data[item.index].Color;
}
}],
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
valueAxis: {
line: {
visible: true
},
minorGridLines: {
visible: true
}
},
});
and use this for refresh the chart
chart.dataSource.read();
chart.refresh();
please check this url
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#refresh

Every kendo widget have a setOptions function that allow you to change the widget's option the same way you initialized them. You'll be able to replace the series using that function.
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}]
});
var chart = $("#chart").data("kendoChart");
chart.setOptions({
series: [{
data: [4, 5, 6]
}]
});
chart.refresh();

Highcharts heat map not displaying properly

I'm trying to create a heat map using Highcharts but it's not loading properly (just lines instead of the heat map itself).
I'm loading the data from a JSON file:
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
xAxis: {
categories: $scope.loadDays()
},
yAxis: {
categories: $scope.loadHours(),
title: null,
reversed: true
},
series: [{
name: null,
borderWidth: 1,
data: [],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
$scope.getHeatMapData = function(data) {
var response = [];
$scope.data = data;
if(data && $scope.data.timestamps && $scope.data.info) {
$scope.data.timestamps.forEach(function(element, index) {
if ($scope.data.info[index]) {
response.push([
moment(element).day(),
moment(element).hour(),
$scope.data.info[index]
]);
}
});
}
return response;
};
The data is being logged correctly to the console but, for some reason, the heat map isn't loading.
I've also created a Plunker where you can see its behavior.
Any ideas?

I was making a mistake when reloading the chart. I just had to add the type to the event:
chartConfig.chart = { type: 'heatmap', events: { load: callback } };
Plunker

Delay Loading Highcharts' Chart

I was wondering if there was a way of delaying the loading of a Highcharts' chart on page load. At the moment my chart is loading as soon as the page opens which is causing my code to crash as the script has not had enough time to fetch the data for the chart.
Does anyone know how to get around this?

There's a couple ways of doing this. One is to initialise the chart when you receive the data (example using jQuery post, data looks like [5,6,8,11]):
$(function(){
$.post('test_highchart.asp', {actn:'load-data'}, function(dat){
$('#chart').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Delayed Loading'
},
xAxis: {
title: {
text: 'Values'
}
},
series:[{
name: 'value',
data: dat
}]
});
}, 'json');
});
Or you can initialise the chart on load then pump the data into the chart when you get it (again data looks like [5,6,8,11]):
$(function(){
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'bar'
},
title: {
text: 'Delayed Loading'
},
xAxis: {
title: {
text: 'Values'
}
},
series:[{
name: 'values',
id: 'series1',
data: []
}]
});
// load data:
$.post('test_highchart.asp', {actn:'load-data'}, function(dat){
$.each(dat, function (val) {
// add points to chart:
window.chart.get('series1').addPoint(val);
});
}, 'json');
});
check http://www.highcharts.com/docs/working-with-data/live-data for details.
cheers