We Keep Coding

How to pass values from controller to JavaScript chart

I am able to fetch profit and loss values for every month from my database and I have shown below how the responses for both profit and loss are displayed.
What I want to do now is to display the month and their respective figures in the chart in the script below for both profit and loss?
How do I achieve this?
Controller
$profit= Account::selectRaw('month(date) as month, sum(amount) as amount')
->with(array('sector' => function($query){
$query->where('type','Income');
}))->whereHas('sector',function($query){
$query->where('type','Income');
})
->groupBy('month')
->get();
$loss= Account::selectRaw('month(date) as month,
sum(amount) as amount')
->with(array('sector' => function($query){
$query->where('type','Expence');
}))->whereHas('sector',function($query){
$query->where('type','Expence');
})
->groupBy('month')
->get();
return view(index, compact('profit','loss'))
Reponse for both queries
profit
{"key":["August","September"],"value":["71145.00","891.00"]}
loss
{"key":["August","September","October"],"value":["71145.00","891.00","900.00"]}
View
<script>
$(function() {
"use strict";
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [{
name: 'series-real',
data: [200, 289, 263, 278, 320, 450],
}, {
name: 'series-projection',
data: [240, 502, 360, 380, 505,],
}]
};
});

Have you tried this?
labels: {!! json_encode($profit[0]) !!},
series: [{
name: 'series-real',
data: {!! json_encode($profit[1]) !!},
}, {
name: 'series-projection',
data: {!! json_encode($loss[1]) !!},
}]
};
json_encode will return the JSON representation of a value so js can use it.

Remove first and last grid lines in highcharts?

I want to separate the points on a line graph by vertical lines in Highcharts. I can do this with grid lines, but I would like the lines to display only between points and not before the first point and after the last one. In the fiddle there should be no grid lines before 'Jan' and after 'Dec'. Is it possible?
Here is my x-axis
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
gridLineWidth: 1,
minorGridLineWidth: 0
}

Just delete two last <path> elements in the group <g> element .
Example on fiddle

Axis has classname attribute.
set an axis classname.
set CSS to hide the last path element.
.axis-container {
path:last-child {
display: none;
}
}

Making y axis of highcharts in time format hh:mm

I need to put in y-axis time format hh:mm, for example y-axis should have 16:00,32:00 and etc. ticks or smth simmilar.
I've been working with highcharts - I'm new with JS and web-programming.
I have my data in miliseconds and convert it to hh:mm format, but when I have miliseconds more than 86400000 (24 hours) it shows me next date and I need it to be still displayed in hours:minutes format. Is there any way to do it? I've tried to change y-axis from type: 'datetime' to type: 'time', but it didn't help me alot.
Here is jsfiddle example of my charts and bellow you can find just js-code.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
title: {
text: 'Time (hh:mm)'
},
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H:%M'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]
}]
});
});

So here is the answer that I've got if anyone need it (here is the link to jsfiddle).
I set the time variables in ms:
data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]
And then I format this value as I need:
yAxis: {
title: {
text: 'Time (hh:mm)'
},
labels: {
formatter: function () {
var time = this.value;
var hours1=parseInt(time/3600000);
var mins1=parseInt((parseInt(time%3600000))/60000);
return hours1 + ':' + mins1;
}
}
}
That's the only way I found to make y axis in pure hh:mm format. Also you can make the data not in ms, but in w/e you want or need.

then better use your own formatting method, here you will have more control on formatting. you can use formatter as shown below.
yAxis: {
labels: {
formatter: function () {
//get the timestamp
var time = this.value;
//now manipulate the timestamp as you wan using data functions
}
}
}
hope this will help you in achieving what you needed.

Highcharts put null values at maximum y position?

Setting a maximum of 100 for the y axis, any data point above 100 renders like the below screen shot. With the point being outside of the chart. Mouse hover still displays a tooltip showing the y position, in this screen shot it is 150 with a max y axis of 100.
I am setting null values for points, and connecting null values. Is it possible to reformat a null value and place it outside the chart or at the very least at the maximum y position? Below the null value would be May, is it possible to put this null value at the very top of the chart at the 100 line while keeping the value null?

You could preprocess the data to set your null values to a high number and then add a tooltip formatter to display null for thoes values:
var data = [29.9, 45, 90.4, 29.2, 80.0, null, 24.6, null, 10, 12, 95.6, 54.4];
data = $.map(data, function (n) {
if (n == null) return 150;
else return n;
});
$('#container').highcharts({
chart: {},
tooltip: {
formatter: function () {
if (this.y >= 100) return this.x + ':';
else return this.x + ':' + this.y;
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
max: 100
},
series: [{
data: data
}]
});

highchart: add images to top of chart on every column

Does anyone know if it's possible to create something like this in Highcharts:
It's about the weather icons on the top. I added them as a "scatter graph" which is nice, so the images/graph can be disabled. But I want them always at the top. For example: y=20px or something. Is it possible to do this with Highchart? I know set their data to "30 celcius" but that would mess up the graph if it the temperature would go up to 30 degrees.

You can use a trick of having two x-axes, one with images and offset'ed to the top of the chart and one with the usual labels at the bottom:
xAxis: [{
offset: -290,
tickWidth: 0,
lineWidth: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> ';
}
}
}, {
linkedTo: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
Full example on jsfiddle

I found a solution by chance because of a logging code I forgot to remove. You can access the data inside the method formatter using "this":
...
plotOptions: {
series: {
dataLabels: {
useHTML: true,
enabled: true,
x: -50,
y: -50,
formatter: function(){
console.log(this);
return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />';
},
}
...
This code surely isn't working, but shows up the idea, doesn't it?
Hope it helps!

Given that highcharts is just SVG you can always go directly and manipulate the SVG to show the images you want, usually with just CSS. You can inspect the chart with Chrome's web inspector and find the elements you want to style. I have to warn you though that having customized highcharts myself in the past has made upgrading to newer versions difficult.

You can add another scatter plot to your series that contains specific markers: http://jsfiddle.net/ZZ7Kd/135/

You can use Renderer.image() to add images in any place on chart
http://api.highcharts.com/highcharts#Renderer.image()