I am having troubles duplicating some highcharts in a php file. I separate each highchart in its own .js file. Everything works just fine if I stick to just one chart. As soon as I try to include several of the same chart, then only the first one shows up.
Below is the first highcharts .js file:
$(function () {
$('#chart2').highcharts({
chart: {
zoomType: 'xy',
marginTop: 40,
marginBottom: 75
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: [{
categories: []
}],
yAxis: [{ // Primary yAxis
tickAmount: 11,
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
gridLineWidth: '0',
labels: {
format : '{value}%',
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: '',
type: 'column',
yAxis: 0,
tooltip: {
valueSuffix: ''
},
}, {
name: '',
type: 'line',
yAxis: 1,
tooltip: {
valueSuffix: '%'
}
}]
},
function(theChart){
var tableName = '<?php echo $tableName; ?>';
$.getJSON("Data.php", {id: escape(tableName)}, function(json) {
theChart.xAxis[0].setCategories(json[0]['data']);
theChart.series[0].setData(json[4]['data'], true);
theChart.series[1].setData(json[3]['data'], true);
});
});
var theChart = $('#chart2').highcharts();
chart = new Highcharts.Chart(options);
});
Below is the second highcharts .js file. Note that they are exactly the same. The only thing that is changed is the variable names (I dont know what else to do). As I said before - both work just fine apart. But when I include both in my .php file, then only the first will show up.
$(function () {
$('#chart3').highcharts({
chart: {
zoomType: 'xy',
marginTop: 40,
marginBottom: 75
},
title: {
text: 'EBITDA and EBITDA-margin'
},
subtitle: {
text: ''
},
xAxis: [{
categories: []
}],
yAxis: [{ // Primary yAxis
tickAmount: 11,
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
gridLineWidth: '0',
labels: {
format : '{value}%',
},
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: '',
type: 'column',
yAxis: 0,
tooltip: {
valueSuffix: ''
},
}, {
name: '',
type: 'line',
yAxis: 1,
tooltip: {
valueSuffix: '%'
}
}]
},
function(theChart1){
var tableName1 = '<?php echo $tableName; ?>';
$.getJSON("Data.php", {id: escape(tableName1)}, function(json) {
theChart1.xAxis[0].setCategories(json[0]['data']);
theChart1.series[0].setData(json[4]['data'], true);
theChart1.series[1].setData(json[3]['data'], true);
});
});
var theChart1 = $('#chart3').highcharts();
});
You will notice that I call the first chart 'chart2' and the second one 'chart3'. I think the problem is very strange since I only get this problem on this exact chart type (dual-axis column+line). The way I include the files in the .php file is by using php include in head part. I then call them in the body part by using div.
<head>
<script type="text/javascript">
<?php
include('../index/charts2.js');
include('../index/charts3.js');
?>
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="chart2"></div>
</td>
<td>
<div id="chart3"></div>
</td>
</tr>
</table>
</body>
I hope somebody here will be able to help. Let me know if you need anything further to find out about this.
i think this can help you, look at this example http://jsfiddle.net/engemasa/7cvCX/
it was taken from here how do I get two highcharts on one page?
(all credit to the one that posted it)
no code nesesary, look at the fiddle, its self explanatory.
also, the console once you execute everything show some error?
also, are you shure that its just one that is showed?, is there a chance that the both charts are executed one on top of the other?
Related
My highchart shows data line only if value are different, if the value are the same like in this example 1100, it shows only the 1465 data like a point. The problem is with Y.axis if the data have the same value in a consecutif way.
Thank You.
Resulta image of highchart
$( document ).ready(function() {
var datacharts = ["1100","1100","1100","1100","1100","1100","1100","1100","1100","1100",1465,"1100"];
Highcharts.chart('container', {
chart: {
type: 'line',
height:500,
options3d: {
enabled: true,
alpha: 15,
beta: -10,
viewDistance: 180,
depth: 100
}
},
title: {
text: 'Personne 1'
},
xAxis: {
categories: ["mars","avril","mai","juin","juil.","ao\u00fbt","sept.","oct.","nov.","d\u00e9c.","janv.","f\u00e9vr."],
labels: {
skew3d: true,
style: {
fontSize: '16px'
}
}
},
yAxis: {
allowDecimals: false,
min: 800,
color:'red',
title: {
text: 'Prime Par mois',
skew3d: true
}
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'Data',
data: datacharts,
color: '#0e9bb7'
}]
});
});
</script>
The problem is that you are passing the data as string instead of numbers. Try this:
var datacharts = [1100,1100,1100,1100,1100,1100,1100,1100,1100,1100,1465,1100];
In your example 1465 is the only one that isn't a string, for this reason it is being represented on the chart.
I want to minify the chart Interface. Currently I am using chart with size 600 x 300 px, which is working fine.
Now I want to show 3 charts at the same place so in order to save space. I want to show 3 charts thumbnails (working charts). If user click on any chart it should appear as full chart. I can show it on the popup or expand it on the page itself.
I checked the Highchart website. It provide option to resize chart using height & width properties.
http://api.highcharts.com/highcharts/chart.height
http://api.highcharts.com/highcharts/chart.width
This option do not actually resize the chart. Char layout get smaller but the title label stay at the same size. I want chart to resize and work in a smaller version with text and chart show in smaller box like 100 x 100 px.
I can use chart.setSize(); function to resize the chart.
Does it make any sense? Please guide me.
I am using highcharts 5.0 version js file.
Here is my code:
var seriesData1 = {
name: "Series1Label",
data: Series1Data
},
seriesData2 = {
"name": "Series2Label",
"data": Series2Data
},
seriesData3 = {
"name": "Series3Label",
"data": Series3Data
},
completedData = [seriesData2, seriesData3, seriesData1];
var elem = par.find('<some class>');
elem.highcharts({
chart: {
type: 'areaspline'
},
colors: ['#21d0b8', '#2248B5', '#5B82A1'],
title: {
text: ""
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
useHTML: true,
itemDistance: 5,
},
xAxis: {
'title': {
text: xAxisTitle
},
categories: categories,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
}
}
},
areaspline: {
fillOpacity: 0.8
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: completedData,
exporting: {
buttons: {
contextButton: {
text: 'Export',
useHTML: true,
align: 'right',
symbolY: 15,
}
}
},
responsive: {
rules: [{
condition: {
maxWidth: 100
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled:false,
},
title: {
text: null
}
},
xAxis: {
labels: {
enabled:false,
},
title: {
text: null
}
},
title:{
text: '',
},
subtitle: {
text: null
},
tooltip:{
enabled:false,
},
legend:{
enabled:false,
},
credits: {
enabled: false
}
}
}]
}
});
The 'elem' chart element occurs 7 times on a single page, so I have made a single code to fill all the charts on different data and trigger them all at single function.
I need all the 7 charts to show in thumbnail and show certain chart in large size on user click.
using your example when I update my code.
var getChart = ele_.highcharts({.....});
Resize code:
getChart.setSize(100, 100);
Error encountered
getChart.setSize is not a function
Can anyone guide me how to fix this issue?
check responsive and set rules accordingly.
For 100 by 100 you should remove all gridlines, credits, labels, title
Example will be
Highcharts.chart('container', {
chart: {
type: 'line',
width: 100,
height: 100
},
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false,
},
title: {
text: null
}
},
xAxis: {
labels: {
enabled: false,
},
title: {
text: null
}
},
title: {
useHTML: true,
text: ''
},
subtitle: {
text: null
},
tooltip: {
enabled: false,
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
$('#container').highcharts().renderer.text('mini Highcharts', 20, 90)
.css({
fontSize: '8px',
color: '#7d7d7d'
})
.add();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
check this using chart.setSize();
Fiddle
Update
You could use $(elem).highcharts().setSize(100, 100);
Updated fiddle
I'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. I haven't been able to figure out how to do this.
I'm loading csv data from a pre HTML block.
Here's the code:
<body>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div>
</body>
<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div>
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy,
2009,1.9000,-2.1000,
2010,7.6000,3.8000,
2011,6.0000,3.7000,
2012,0.9000,4.1000,
2013,-0.1000,3.2000,
2014,5.8000,4.1000,
</pre>
$(function () {
$('#chart_left_1').highcharts({
chart: {
borderColor: '#000080',
borderRadius: 0,
borderWidth: 2
},
title: {text: 'GDP Growth', margin: 0},
exporting: {enabled: false},
legend: {enabled: false},
subtitle: {text: null},
xAxis: {
},
yAxis: {
tickInterval: 2,
title: {text: null},
labels: {
formatter: function() {
return this.value + '%';
}
},
},
tooltip: {
enabled: true,
valueSuffix: '%'
},
data: {
csv: document.getElementById('gdpgr').innerHTML,
startRow: 1,
endRow: 11,
endColumn: 2,
firstRowAsNames: false
},
xAxis: {
allowDecimals: false
},
series: [{
type: 'column',
name: ' GDP growth',
color: '#000080'
},{
type: 'column',
name: 'US GDP Growth',
color: '#CCCCCC'
}]
});
});
And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/
In this case, if you dont need to use other type of xAxis than category, you can use step label's property.
xAxis: {
type: 'category',
allowDecimals: false,
labels: {
step: 1
}
},
Example: https://jsfiddle.net/otfq0dch/3/
http://api.highcharts.com/highcharts/xAxis.labels.step
the xAxis is defined twice, i consolidate and added a new option called tickInterval which is set to 1
https://jsfiddle.net/otfq0dch/2/
xAxis: {
allowDecimals: false,
tickInterval: 1
},
link to the docs: http://api.highcharts.com/highcharts/xAxis.tickInterval
xAxis: {
type: 'category',
allowDecimals: true,
labels: {
step: 1
}
},
I have this highchart graph displayed on my website. How can I set an interval for my x-axis? e.g. I want the fist value to be displayed and then skip the second and display the third.
Can this be done? Or do you always just HAVE to display all the data you're passing to the axis in an array?
My code: (timestamp is a JS array that contains my time. I can get that time in epoch format. act and temps are arrays for data to be plotted along y-axis)
$(function () {
$('#tempactgraph').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature & Activity Monitoring '
},
subtitle: {
text: 'Source: Cowlar Sensors'
},
xAxis: [{
categories: timestamp,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Activity',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} xx',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Activities',
type: 'spline',
connectNulls: 1,
yAxis: 1,
data: act,
tooltip: {
valueSuffix: ' xx'
}
}, {
name: 'Temperature',
type: 'spline',
connectNulls: 1,
data: temps,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
You need to Add a tickInterval:2 to your x-axis decleration like so
xAxis: [{
categories: timestamp,
crosshair: true,
tickInterval: 2
}],
Highcharts API Reference
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.