Related
I have this line of code using a chart.js in Laravel App
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
var ctx = document.getElementById("array_crawl_source_gap").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Google Analytics", "Google Analytics", "Web", "Web"],
datasets: [{
data: [ {{ $array_crawl_source_gap[0] }}, {{ $array_crawl_source_gap[1] }},
{{ $array_crawl_source_gap[2] }}, {{ $array_crawl_source_gap[3] }} ],
backgroundColor: [
'rgb(182, 197, 211)',
'rgba(113, 152, 214, 1.0)',
'rgb(182, 197, 211)',
'rgba(113, 152, 214, 1.0)',
]
}]
},
options: {
responsive: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
}],
xAxes: [{
ticks: {
beginAtZero:true,
stepSize: 100
}
}],
}
}
});
Here is the output of my code.
Expected output:
Base on my codes how can I able to make only one Google Analytics and Web in labels? And is it possible to change the labels when you hover the data as the picture below? Any idea/thoughts how can I fix this. Thank you in advance.
Custom tooltip position:
Chart.Tooltip.positioners.custom = function(elements, position) {
if (!elements.length)
return false;
var em = elements[0]._model;
return {
x: em.x-((em.x-em.base)/2),
y: em.y+em.height/4
}
}
Added tooltipText for custom tooltip titles, also callbacks to display those titles and labels. Y-axis labels have offset.
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Google Analytics", "", "Web", ""],
tooltipText: ["Wild Quess", "Very Analytical", "Fine Prediction", "Bob's opinion"],
datasets: [{
data: [ 250 , 260 , 270 , 280 ],
backgroundColor: [
'rgb(182, 197, 211)',
'rgba(113, 152, 214, 1.0)',
'rgb(182, 197, 211)',
'rgba(113, 152, 214, 1.0)',
]
}]
},
options: {
responsive: false,
legend: { display: false },
tooltips: {
enabled: true,
displayColors: false,
yPadding: 10,
xPadding: 30,
caretSize: 10,
backgroundColor: 'rgba(240, 240, 240, 1)',
titleFontColor: 'rgb(50, 100, 50)',
bodyFontColor: 'rgb(50, 50, 50)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
cornerRadius: 0,
yAlign: 'bottom',
xAlign: 'center',
callbacks: {
title: function(tooltipItem, data) {
var title = data.tooltipText[tooltipItem[0].index];
return title;
},
label: function(tooltipItem, data) {
return tooltipItem.xLabel+' pages';
}
},
position: 'custom',
},
scales: {
yAxes: [{
ticks: {
type: 'category',
labelOffset: 35,
},
}],
xAxes: [{
ticks: {
beginAtZero:true,
stepSize: 100
}
}],
},
}
});
Manual on tooltip:
https://www.chartjs.org/docs/latest/configuration/tooltip.html
HTML in tooltip:
Chart JS Show HTML in Tooltip
I'm trying to draw two charts in the same page php using highcharts.But, just the first one was displayed.The $data1,$data2,$data3,$data4,$data5 are values returned by some functions.
page.php:
<div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="containerone" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<?php
include 'data.php';
$data1=data::amountUSD($res['id']);
$data2=data::amountEUR($res['id']);
$data3=data::Month($res['id']);
$data5=data::Totalminutejour($res['id']);
$data4=data::Day($res['id']);
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'USD VS EUR'
},
xAxis: {
categories: [<?php echo join(',', $data3); ?>]
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [ {
name: 'EUR',
data: [<?php echo join(',', $data2); ?>],
},
{
name: 'USD',
data: [<?php echo join(',', $data1); ?>],
},
]
});
});
$(function() {
var chartone = new Highcharts.Chart({
chart: {
renderTo: 'containerone',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Range Total Minutes every day',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [<?php echo join(',', $data4); ?>]
},
yAxis: {
title: {
text: 'Total Minutes'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'TotalMinuteDay',
data: [<?php echo join(',', $data5); ?>],
},
]
});
});
</script>
</div>
That's what print_r returns:
print_r($data1); // Array ( [0] => 8.800000190734863 [1] => 20 )
print_r($data2); // Array ( [0] => 8.800000190734863 [1] => 2 )
print_r($data3); // Array ( [0] => 5 [1] => 5 [2] => 4 [3] => 4 )
print_r($data4); //Array ( [0] => a [1] => d )
print_r($data5); // Array ( [0] => 0.2 [1] => 0.2 )
Question: PDF generated by Phantomjs has additional grey bars coming in the Graph.
Set up: My Front end is using highcharts to create graphs for the pages.
I have used phantomjs to create PDF from the HTML page.
Sample: attached image
My Attempts: Followed numerous posts and answers to the same topic and gave the following tries but unsuccessful.
Disable animation and enableMouseTracking for whole chart.
$('#graph').highcharts({
chart: {
type: 'bar',
animation: false,
enableMouseTracking: false
},
Disable animation and enableMouseTracking in PlotOptions:
plotOptions: {
bar: {
animation: false,
enableMouseTracking: false
},
series: {
stacking: 'normal',
animation: false,
enableMouseTracking: false,
shadow:false
Disabling tool tip:
tooltip: {
enabled: false
},
$('#graph').highcharts({
chart: {
type: 'bar',
animation: false,
enableMouseTracking: false
},
title: {
text: 'Online Survey Results'
},
xAxis: {
categories: data
},
yAxis: {
min: 0,
max: maxTotalAnswerWeight,
tickInterval: Math.round(tickInterval),
minorGridLineWidth: 0,
minorTickInterval: Math.round(tickInterval),
minorTickLength: 10,
minorTickWidth: 1,
lineWidth: 1,
title: {
text: 'Progress'
},
labels: {
enabled: true,
align: 'right',
rotation: -45,
formatter: function() {
//console.log(this.value)
var tickMarkNumber = this.value/Math.round(tickInterval);
return seriesData[tickMarkNumber]
},
style: {
fontSize: '14px',
fontFamily: 'proxima-nova,helvetica,arial,sans-seri',
/*whiteSpace: 'nowrap',
paddingLeft: 50,
paddingRight: '100px',
marginLeft: "50px",
padding: 10,
paddingBottom: '10px'*/
}
}
},
legend: {
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
animation: false,
enableMouseTracking: false
},
series: {
stacking: 'normal',
animation: false,
enableMouseTracking: false,
shadow:false
/*dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}*/
}
},
colors: ['green','gray'],
series: [{
index: 1,
name: 'Progress made',
data: achievedData
}, {
index: 0,
name: 'Progress yet to be made',
data: yetToAchievedData
}]
});
},
Is there anything very fundamental I am missing here?
I am new to highcharts and i am using hightcharts graph but volume not showing.When i remove MACD then volume show i don't understand why i am getting this issue!. my code are
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
$(function() {
$('#container').highcharts('StockChart', {
title : {
text : 'MACD of AAPL stock price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
yAxis: [{
title: {
text: 'Price'
},
height: 200,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}, {
title: {
text: 'MACD'
},
top: 320,
height: 100,
offset: 0,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 500,
height: 60,
offset: 0,
lineWidth: 2
}],
tooltip: {
crosshairs: true,
shared: true
},
rangeSelector : {
selected : 1
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series : [{
name: 'AAPL Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name : 'MACD',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'trendline',
algorithm: 'MACD'
}, {
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
linkedTo: 'primary',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
name: 'Histogram',
linkedTo: 'primary',
yAxis: 1,
showInLegend: true,
type: 'histogram'
}]
});
});
});
Why volume is not showing?
Thanks in advance!
You have three yAxis, but in each serie (except first) you use yAxis:1 which means that series is displayed on that axis. So you need to modify axis index to display on the "last" yAxis.
Hi guys I'm having a trouble working with Highchart. I think my error is when the category is more than 12. here's my code:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['ARC', 'CLM', 'COLREP', 'CUI', 'FB', 'IOH', 'IST', 'LCV', 'LCWSLC', 'LOGDFR', 'LOGDRT', 'LOGGLE',
'LOGGT', 'LOGSR', 'LOGVL', 'LST', 'OARD', 'OARP', 'OARPPP', 'POR', 'PRIN', 'SLRD', 'SLRS', 'SLRSUP', 'SVTCBR',
'SVTSP', 'SVTST', 'TKD', 'TR', 'USO']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [400.6, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 100.9]
}]
});
});
});
I already try to put the categories in array variable but same result show.
x-axis only show 12 categories. the example on there site is good for 12 categories. Is anyone know how to fix this problem or configure anything in the plugin?
here's there demo page http://www.highcharts.com/demo/line-basic
thanks in advance!
The problem is that you have series with only 12 Values within each array ,so if there's only 12 Values it will pick up first 12 Categories .
High chart's wont show Categories without data related to them using Series ,just put 18 next 0 Values at Series Array and it will show those Categories .