highchart: add images to top of chart on every column - javascript

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()

Related

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.

How to show No Data Available Message in highcharts

Can we show a message using highcharts.When the data is not available? we have to show a message Example : No Data Available. If we have data hide : No Data Available message . in highcharts dynamically
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 0,
zoomType: 'xy'
},
});
Include no-data-to-display.js file in your page. It comes bundled with highcharts. You can get it here otherwise: https://code.highcharts.com/modules/no-data-to-display.js
Default message is "No data to display". If you would like to modify it, you can do this:
Highcharts.setOptions({
lang: {
noData: 'Personalized no data message'
}
});
You can use Highcharts Chart Renderer
Here's an example in JSFiddle
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: []
}, function(chart) { // on complete
chart.renderer.text('No Data Available', 140, 120)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
Some of these other answers seem kind of crazy... here's a super basic solution I wanted to share:
Highcharts.setOptions({lang: {noData: "Your custom message"}})
var chart = Highcharts.chart('container', {
series: [{
data: []
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div id="container" style="height: 250px"></div>
Hope this helps someone
Based on your comment (if we have data still showing no data available message so,can we hide in highcharts if we have data).I think you are using fustaki's solution and don't want to use no-data-to-display.js module. Yes there is problem as mentioned .You can still use the same code by modifying it i.e add condition inside continuing function to check if series is empty or not, based on this render message.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: []
}, function(chart) { // on complete
if (chart.series.length < 1) { // check series is empty
chart.renderer.text('No Data Available', 140, 120)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
}
});
Fiddle demo
For me with latest version it works like this:
const Highcharts = require('highcharts');
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
NoDataToDisplay(Highcharts);
Highcharts.setOptions({
lang: {
noData: 'No data is available in the chart'
}
});
With the current version (v7.1.2) and connected no-data-to-display module (v7.1.2) you can show your 'no data' message when you create a chart object as Patrik said by setting lang.noData option.
To be able to change this message after the chart is created you need to call method
yourChartObject.showNoData('you new message')
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
Highcharts.chart('container', {
lang: {
noData: "No data found"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px'
}
},
.
.
});
and then after series you should add:
lang: {
noData: 'Nessun dato presente'
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#303030'
}
},
and it will work just fine

Simple Bar Graph Doesn't Show Graph

I was planning to display a bar chart using HighCharts.js. But data in the series attribute was not displaying. See image below:
See my code below:
exec_dashboard_load_graph(
'exec_dashboard_collection_disbursement_graph',
response,
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
);
function exec_dashboard_load_graph(id,data, x){
var myChart = Highcharts.chart(id, {
chart: {type: 'column'},
title: {text: 'Annual Collection and Disbursement Summary'},
subtitle:{text: 'City Goverment of Butuan'},
xAxis: {categories: x,crosshair: true},
yAxis: {min: 0,title: {text: 'Amount (Peso Value)'}},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b> {point.y:.1f} Php </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},
series: data
});
}
The data variable contains the value below:
I wonder what's wrong with my data. Please help. Here's my jsfiddle.
It's because your numbers are in quotes, making them strings, and Highcharts doesn't know how to render the data as strings.
Changing them to numbers like so will fix it:
var collections = new Array(11242282.20,7966734.89,5936262.58,7903113.53,6527188.99,20639705.75,14359971.15,6861212.08,0,0,0,0);
var disbursements = new Array(117015425.13,151452477.46,182264161.40,218257774.81,188822327.59,209183652.51,15081727.17,204713881.30,0,0,0,0);
https://jsfiddle.net/nnfbcuzr/1/
Also, in case you don't have control over how the data is formatted, you could always convert the array over into ints first by using a function like this:
function parsValuesToInts(arr) {
var newArr = [];
for(var i = 0; i < arr.length; i++){
newArr.push(parseInt(arr[i],10));
}
return newArr;
}

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;
}
}

Highcharts min y-axis value

Is it possible to set a min y-axis value when the series values are the same?
For example:
http://jsfiddle.net/6hyfk/1/
I would like to see 0.00019 as y-axis value.
If i change it to:
series: [{
data: [0.00019,0.00020,0.00019,0.00019]
}]
it looks a lot better.
So the answer largely depends on your data. If for example, you know your values are all positive, setting a yAxis min helps your data display a bit better. You know your data better than I, so I'd look at the yAxis settings and see what you can change to get a better result, but for example, this is a JSFiddle that sets a minimum value:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickLength: 20
},
yAxis: {
min: 0
},
series: [{
data: [0.00019,0.00019,0.00019,0.00019]
}]
});
});
http://jsfiddle.net/gTG2z/
You can manually set the min and max on the X axis.
yAxis:{
min: 0,
max: .001
},
http://jsfiddle.net/6hyfk/2/
If you know what range is in your series, you can set accordingly minRange, so Highcharts will render more ticks as expected. For example: http://jsfiddle.net/Fusher/6hyfk/3/ Good thing about minRange is that it will work also for another values like that: http://jsfiddle.net/Fusher/6hyfk/5/
Probably,you don't need to hardcode min,max values.Do calculation for min and max and set to y Axis as shown below,
$(function () {
yMin = Math.min.apply(Math,data); // Find Min
yMax = Math.max.apply(Math,data); //Find Max
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
min: yMin,
max: yMax
},
series: [{
data: data //Array of values
}]
});
});

Categories