I have a issue with my charts working in highcharts.
All my charts are displaying correctly on desktop , in Chrome/FF/IE/Safari
But when i'm on mobile, any of them are showing.
I have nothing on my log so I would like to know how can i fix them,
There is the link for the charts :
http://www.chahinecapital.com/fonds/
You can go on the sub heading Digital Star Europe , and click the button for ACTIFS as exemple.
There is also my loadEurope.js , where i initialize the charts
jQuery(document).ready(function($) {
Highcharts.setOptions({
lang: {
months: [
'Janvier', 'Février', 'Mars', 'Avril',
'Mai', 'Juin', 'Juillet', 'Août',
'Septembre', 'Octobre', 'Novembre', 'Décembre'
],
weekdays: [
'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
'Jeudi', 'Vendredi', 'Samedi'
],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil',
'Aout', 'Sept', 'Oct', 'Nov', 'Déc'
]
}
});
$.get('http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/volatilityFR.csv', function(data) {
$('#EuropeVolatility').highcharts({
yAxis: [{
labels: {
format: '{value} %',
},
title: {
text: ' ',
}
}],
data: {
csv: data,
},
series: [{
color: '#682666',
}, {
color: '#ed8322',
},{
color: '#B7ADA5',
}],
xAxis: {
tickPixelInterval: 50,
},
title:{
text:null
}
});
});
$("#EuropeAllocPaysBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/countryFR.csv", function(csv) {
$('#EuropeAllocPays').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false
},
showInLegend: true
}
},
data: {
csv: csv
},
title:{
text:null
}
});
});
});
$("#EuropeAllocSecteursBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/secteursFR.csv", function(csv) {
$('#EuropeAllocSecteurs').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false
},
showInLegend: true
}
},
data: {
csv: csv
},
title:{
text:null
}
});
});
});
$("#EuropeActifsBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/assetsFR.csv", function(csv) {
$('#EuropeActifs').highcharts({
yAxis: [{
gridLineWidth: 0,
labels: {
format: '{value:,.0f}',
},
title: {
text: 'Nombre de parts',
},
opposite: true
},
{
labels: {
format: '{value}',
formatter: function(){
return this.value/100000 + "M";
}
},
title: {
text: 'Actifs en \u20AC ',
}
}],
data: {
csv: csv
},
series: [{
yAxis:1,
color: '#682666',
}, {
yAxis:0,
color: '#ed8322',
}],
title:{
text:null
}
});
});
});
$("#EuropePerformancesPeriodeBtn").click(function() {
$.get("http://www.chahinecapital.com/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/performancesFR.csv", function(csv) {
$('#EuropePerformancesPeriode').highcharts({
yAxis: [{
labels: {
format: '{value} %',
},
title: {
text: ' ',
}
}],
xAxis:{
tickInterval:1,
},
chart: {
type: 'column'
},
data: {
csv: csv
},
series: [{
color: '#682666',
}, {
color: '#ed8322',
},{
color: '#B7ADA5',
}],
title:{
text:null
}
});
});
});
});
Thanks a lot for your help
Jordan
I went through this exact same problem with another library, so I will put an answer here, maybe it will help someone.
Just to be clear, my problem was with AM4CHARTS library.
All charts working fine in Desktop, even when I was setting chrome and firefox to mobile mode, but not showing in Mobile.
The issue in my case was, for some reason, the browser cache.
I did clean the cache for the last 24 hours at chrome in android, and the charts went back.
Hope this helps anyone who might step into this.
Related
I am trying to create a chart like this one:
:
I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.
I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.
My current Highcharts settings look like this:
{
title: {
text: null
},
xAxis: {
crosshair: true,
labels: {
format: '{value} km'
},
title: {
text: null
},
opposite: true,
startOnTick: true,
endOnTick: false,
min: 0
},
yAxis: {
startOnTick: true,
showFirstLabel: false,
endOnTick: false,
maxPadding: 0.35,
title: {
text: null
},
min: 100,
labels: {
format: '{value} m'
}
},
plotOptions: {
dataGrouping: {
enabled: false
},
showInNavigator: true,
stacking: 'normal',
series: {
dragDrop: {
draggableY: true
},
point: {
events: {
mouseOver: (e) => {
this.chartHover.emit({
distance: e.target.x * 1000
});
},
}
},
},
area: {
dragDrop: {
draggableY: true,
dragPrecisionY: 1
}
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
chart: {
update: true,
styledMode: true,
marginBottom: 0,
marginRight: 0
},
tooltip: {
headerFormat: '',
pointFormatter: function () {
let point = this;
if (!this.series) {
return;
}
return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
},
shared: true
},
series: [],
};
Is there an built-in solution for this?
EDIT:
I used the proposed solution by ppotaczek:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.
There is also a small rendering issue - small gaps between the zones.
Best,
Philipp
You can add an extra spline series with zones:
series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
color: 'red',
value: 2
}, {
color: 'green',
value: 4
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/
API: https://api.highcharts.com/highcharts/series.spline.zones
highchart doesn't show in IE and SAFARI. I try the solution from the official highchart forum, but nothing help (remove "," at the end of json, or resize page on load etc... )
I have multiple different highcharts, but here is only one for explanation. I call config function depends on chart data. My app have many different parts, and it's very hard to make working plunker. Thnx
Here is my code
function getBaseChartConfig(graphName) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var config =
{
xAxis: {
ordinal: false
},
yAxis: {
},
options: {
chart: {
zoomType: 'x',
backgroundColor: 'rgba(255, 255, 255, 1)',
polar: true,
type: 'line',
borderRadius: 5
},
legend: {
enabled: true
},
rangeSelector: {
//za postavit rucni upis date range-a
enabled: false,
inputStyle: {
color: 'black'
}
},
navigator: {
enabled: true
}
},
series: [],
title: {
text: graphName
},
useHighStocks: true
};
return config;
};
$scope.data.push(solar_voltage);
$scope.data.push(battery_voltage);
$scope.data.push(solar_current);
$scope.data.push(hybridCurrent);
$scope.chartConfig1 = getChartConfigWithYaxisPlotLines('Production');
$scope.chartConfig1.series.push({
id: 1,
name: "Solar voltage",
data: $scope.data[0],
tooltip: {
valueDecimals: 2
}
}, {
id: 2,
name: "Battery voltage",
data: $scope.data[1],
tooltip: {
valueDecimals: 2
}
}, {
id: 3,
name: "Solar current",
data: $scope.data[2],
tooltip: {
valueDecimals: 2
}
}, {
id: 4,
name: "Hybrid current",
data: $scope.data[3],
tooltip: {
valueDecimals: 2
}
}
);
function getChartConfigWithYaxisPlotLines(graphName) {
var baseChartConfig = getBaseChartConfig(graphName);
baseChartConfig.yAxis.plotLines = [{
color: '#FF0000',
width: 1,
value: 11.50,
label: {text: '11.50'}
}];
return baseChartConfig;
}
Here is image how this look in safari or IE
And here is in CHROME and FIREFOX
This is my json from api
I have multiple data coming on each day and I was wondering how to make a graph where I see the days and when I zoom in I should see the time in between the days. I am not able to do so resulting in a graph with days getting duplicated or triplicated as per the number of data points.
Before Zooming:-
After Zoom :-
I would like not to have duplicate Day names rather time in between them.
My Highcharts-ng configuration json object is as follows:-
{
options: {
chart: {
type: 'line',
zoomType: 'xy',
animation: true
},
colors:['#2C91DE','#165A8E'],
plotOptions: {
line:{
marker:{
symbol:'circle'
}
},
series: {
lineWidth: 3,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: null,
enabled: true,
radius: 5
}
}
},
tooltip: {
shared: true,
crosshairs: true,
followPointer: true
}
},
title: {
text: ''
},
loading: false,
xAxis: {
type: 'datetime',
title: {
text: 'Date/Time'
},
dataTimeLabelFormats:{
day:'%a',
week:'%a',
},
labels: {
format: '{value:%a}'
}
},
series: [{
pointIntervalUnit: 'hourly'
}],
yAxis: {
title: {
text: ''
}
},
size: {
height: 500
}
}
I have tried the solution at https://stackoverflow.com/a/24206104/5653279 but to no avail as my Highcharts consist of 2 series of data.
Following the above solution returns me the error
Uncaught TypeError: Cannot read property 'category' of undefined
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
zoomType: 'xy',
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
tooltip: {
enabled: false,
headerFormat: '<b>{point.x: %A, %b %e at %I:%M %p}</b><br>',
shared: true,
borderRadius: 10,
crosshairs: [true, false] //x,y
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},
title: {
text: 'Glucose/Carbohydrate'
},
subtitle: {
text: 'Ratio between Glucose and Glucose'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e/%b',
},
title: {
text: 'Date'
}
},
yAxis: [{ // Glucose yAxis
labels: {
format: '{value}mmol/L',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Glucose',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Carbohydrate yAxis
title: {
text: 'Carbohydrate',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
},{
name: 'Carbohydrate',
data: carbohydrate,
dashStyle: 'shortdot',
yAxis: 1,
marker: {
enabled: true
}
}
]}
);
});
However, the error would be "solved" if I edit plotOptions as seen.
plotOptions: {
series: [{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}]
},
But still, the tooltip does not show when I clicked on any point.
Solved the issue!
Just changed
this.chart.myTooltip.refresh(evt.point, evt);
to
this.chart.myTooltip.refresh([evt.point], evt);
But the only limitation to this fix is if there's multiple series (e.g. Line A and B) and the data of both series falls on the same X-Axis (e.g. on the same date), clicking on it will only show the tooltip of that particular series's data (if I click on series A's data, the tooltip only shows A's data without B, even though they are sharing the same X-Axis).
I use highchart everything works good except for the chart print button is not click-able, below are my highchart implementation and reference image. Any ideas, clues, suggestions, recommendations, help?
$('#chart_portfolio').highcharts({
chart: {
borderColor: '#ff0000',
width: null,
height: null
},
title: {
text: false,
x: -20 //center
},
xAxis: {
categories: portfolio_creation_date
},
yAxis: {
title: {
text: false
},
plotLines: [{
value: 0,
width: 1,
color: '#ff0000'
}]
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Future',
data: portfolio_future,
color: '#0f00ff'
}, {
name: 'In Grace Period',
data: portfolio_ingrace_period,
color: '#fda800'
}, {
name: 'Arrears',
data: portfolio_in_arrears,
color: '#f40404'
}, {
name: 'Good standing',
data: portfolio_good_standing,
color: '#4da74d'
}]
}); //end of highcharts
Issue reference image
Simply set higher zIndex for that button: http://jsfiddle.net/9P5fC/488/
exporting: {
buttons: {
contextButton: {
theme: {
zIndex: 100
}
}
}
}