High charts using candlestick,vloum and MACD - php

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.

Related

is there a way to change the date format in php?

i have a chartjs charts that display the dateformat of
'm-d-Y H:i:s'
thats how the dates come out of the sql table as, but i need them to appear as d-m-y on the charts.
my model :
class chartData extends Entity
{
public static function findBy(
\DateTime $StartDate,
\DateTime $EndDate
): array
{
$params = [
$StartDate->format('m-d-Y H:i:s'),
$EndDate->format('m-d-Y H:i:s'),
];
return self::hydrate(DB::select('EXEC Table #StartDate = ?, #EndDate = ?',
$params
));
}
}
my controller :
public function index (Request $request)
{
if (!$request->input('StartDate') && !$request->input('EndDate')) {
$StartTime = Carbon::now()->subDays(7);
$EndTime = Carbon::now();
} else {
$StartTime = Carbon::parse($request->input('StartDate'));
$EndTime = Carbon::parse($request->input('EndDate'));
}
$Activity = chartData::findBy(
Carbon::parse($StartTime),
Carbon::parse($EndTime)
);
i cant simply do a ->format('d-m-y') as i get thrown errors. does anyone have any idea of how to reformat this so the date will appear as day/month/year ?
UPDATE:
taking advise, i have changed my chartjs to include the date formatting advised:
var ctx = document.getElementById("Chart").getContext('2d');
var recentActivityChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: 'hours',
data: [],
barThickness: 12,
fill: true,
backgroundColor: "rgba(54, 162, 235, 1)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1,
}]
},
options: {
animation: {
duration: 1000,
easing: "linear",
},
responsive: true,
maintainAspectRatio: true,
legend: {
display: false,
position: 'bottom',
usePointStyle: true,
labels: {
fontColor: "grey",
usePointStyle: true,
},
},
scales: {
yAxes: [{
gridLines: {
display: true,
borderDash: [8, 4],
},
scaleLabel: {
display: true,
labelString: 'hours',
},
ticks: {
beginAtZero: false,
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'labels', // define date format that matches the php data
unit: 'day',
displayFormats: {
day: 'DD-MM-YYYY'
},
tooltipFormat: 'DD-MM-YYYY'
},
gridLines: {
scaleShowVerticalLines: false,
display: false,
},
ticks: {
beginAtZero: false,
}
}]
},
}
});
this works as the dates now appear at dd-mm-yyy. however, the chart now begins in 1970 instead of when the data in the sql table actually begins.
any idea of how to resolve this?
This issue is best handled in the frontend rather than in the backend.
You should deine your xAxis as a time cartesian axis as follows.
options: {
...
scales: {
xAxes: [{
type: 'time',
time: {
parser: '', // define date format that matches the php data
unit: 'day',
displayFormats: {
day: 'D-M-YYYY'
},
tooltipFormat: 'D-M-YYYY'
}
...
}]
}
...
}
See Moment.js to find out about format strings that may be used for time.parser, time.displayFormats and time.tooltipFormat.
Note that Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
UPDATE:
i've managed to have it display correctly! this is the updated chart: I did not need the parser, it understood without what needed to be passed through.
var ctx = document.getElementById("recentChart").getContext('2d');
var recentChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: 'hours',
data: [],
barThickness: 12,
fill: true,
backgroundColor: "rgba(54, 162, 235, 1)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 1,
}]
},
options: {
animation: {
duration: 1000,
easing: "linear",
},
responsive: true,
maintainAspectRatio: true,
legend: {
display: false,
position: 'bottom',
usePointStyle: true,
labels: {
fontColor: "grey",
usePointStyle: true,
},
},
scales: {
yAxes: [{
gridLines: {
display: true,
borderDash: [8, 4],
},
scaleLabel: {
display: true,
labelString: 'hours',
},
ticks: {
beginAtZero: false,
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'DD-MM-YYYY'
},
},
gridLines: {
scaleShowVerticalLines: false,
display: false,
},
ticks: {
beginAtZero: true,
}
}]
},
}
});
dates now show up correctly and not from 1970.

How can I change the label name when you hover your data in Chart.js?

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

Highcharts with multiple dataLabels

I am using Highcharts to display transaction status for different months. The chart is displaying fine. To show the number of transactions for each month, I have placed a datalabel on top of each column. The code is given below:
$(function () {
$('#hc').highcharts({
chart: {
renderTo: 'container',
type: <?php echo $type ; ?>,
marginRight: 130,
marginBottom: 35
},
title: {
text: 'Transaction Status',
x: -20
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: <?php echo $monnth_series ?>
},
yAxis: {
title: {
text: 'Transactions'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: '#fff',
style: {fontWeight: 'bold'},
formatter: function() {return this.y},
y: -5,
rotation: 360
},
column: {
pointPadding: .2,
groupPadding: 0,
borderWidth: 1
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +': '+ this.y; +'</b>'
}
},
credits: { enabled: false },
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -6,
y: 90,
borderWidth: 0
},
series: <?php echo $series_data ?>
});
});
Now I want to place another datalabel on the body of the column which will show the type of the transaction.
If I try
formatter: function() {return this.series.name},
inside: true,
then the datalabel shows correctly but the datalabel on top of the column does not show up.
Any idea on how to do this ?

PDF generation by Phantomjs adding additonal gray bars

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?

Highcharts Column Chart Not Displaying Dynamic Values

Hi I need to create one dynamic column chart. But i am not able to put my values to the data field of value how can i do that
function getusercategorygraph()
{
$.getJSON('config/alumniusermodes.php',function(data){
// Create a new array
var finaldata = [];
var chart;
// Perform your operations
$.each(data, function( index, value ) {
// Create a new hash
var currentItem = {}
// Create the proper values in your hash
$.each(value, function( index, value ) {
currentItem[index] = value;
});
finaldata += currentItem;
});
var chart = new Highcharts.Chart({
chart: {
renderTo : 'user-count',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
//type: 'category',
categories: []
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
//data: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
//data: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
data : finaldata,
}],
});
});
}
But the graph doesnt show anything. Whats wrong in this code. Please help.
this is the result from api that i got
[{"name":"Standard","y":"52"},{"name":"Silver","y":"24"},{"name":"Gold","y":"20"},{"name":"Platinum","y":"6"}]
Thanks in Advance
To get you started, on line 18, change
finaldata += currentItem;
to
finaldata.push({
name: currentItem.name,
y: parseFloat(currentItem.y)
});
See JSFilddle.
Edit: Used suggestions by Sebastian in comments. Thanks!
Here is the working version keeping the highchart code inside $.getJSON callback function.
I added following PHP back-end code to get highchart sample data.
$data[] = array('name' => 'Standard', 'y'=> 52);
$data[] = array('name' => 'Silver', 'y'=> 24);
$data[] = array('name' => 'Gold', 'y'=> 20);
$data[] = array('name' => 'Platinum', 'y'=> 6);
echo json_encode($data);
exit;
This data is nothing but giving me data to use in highchart. Following is the javascript call to get it functional.
getusercategorygraph();
function getusercategorygraph()
{
$.getJSON('http://<mydomain>/getdata.php',function(data){
var chart = new Highcharts.Chart({
chart: {
renderTo : 'container',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
//type: 'category',
categories: []
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:'<span style="color:{point.color}">{point.name}</span>:<b>{point.y}Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
data: data
}],
});
});
}

Categories