I use the library hightChart for build some graph and i want to put a message when their is no data in my chart so i have this javascript code :
statChart = new Highcharts.Chart
({
lang:
{
noData : "no data",
},
chart:
{
renderTo: 'chart_container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title:
{
text: 'Graphique',
x: -20
},
subtitle:
{
x: -20
},
xAxis:
{
categories:['Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre', 'Janvier', 'Février', 'Mars', 'Avril', 'Mai']
},
yAxis:
{
title:
{
text: ''
},
plotLines:
[{
value: 0,
width: 1,
color: '#808080'
}]
},
legend:
{
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0,
},
credits :
{
enabled : false
}
});
And after i add some data with javascript like that :
newSerie = statChart.addSeries(
{
name : nameGraph,
data : []
});
But i never arrive to print the message who say no data and i really don't understand why because on all the exemple i find their is nothing special to do for print this message.
you need also include the no-data-to-display.js:http://code.highcharts.com/modules/no-data-to-display.js
Related
I have a heatmap that has a legend scale on the right side with label on top. I would like to know if it's possible to move the label "number of MMF share classes" below the legend scale in the same vertical position as the y-axis label on left?
https://jsfiddle.net/samwhite/5d6kL32o/2/
xAxis: {
// categories: this.value,
title: {
text: 'Date'
},
labels: {
autoRotation: [-10],
formatter: function () {
var dt = xcats[this.value];
var date = new Date(dt);
var month = date.getUTCMonth() + 1;
var year = date.getUTCFullYear()
return `${year}`
}
},
tickInterval: 45
},
yAxis: {
title: {
text: 'Price ($)'
},
labels: {
formatter: function () {
return `$${(this.value / 10000).toFixed(4)}`;
}
},
min: ymin*10000,
max: ymax*10000,
plotLines: [{
value: 10000,
color: 'darkred',
dashStyle: 'shortdash',
width: 0.2,
zIndex: 5
}]
},
tooltip: {
pointFormatter: function () {
return `NAV per share: <strong>${(this.y / 10000)}</strong>
<br/>Date: <strong>${xcats[this.x]}</strong>
<br/>Number of Share Classes: <strong>${this.value}</strong>`
}
},
legend: {
title: {
text: 'number of<br/>MMF share classes',
style: {
fontWeight: 'normal'
}
},
align: 'right',
y: 80,
padding: 20,
verticalAlign: 'middle',
symbolHeight: 300
},
colorAxis: [{
type: 'linear',
reversed: false,
layout: 'vertical',
stops: [
[0, '#c8daf9'],[1.0, '#537dca']
]
}],
An option could be use the code posted on this thread:
Quote:
Highcharts is not providing this option for legend title. You can
achieve your goal by translating your title in callback function:
function (chart) {
var title = chart.legend.title;
title.translate(x, y);
}
I've modified your code as follows:
Example:
legend: {
title: {
text: 'number of<br/>MMF share classes',
style: {
fontWeight: 'normal'
}
},
align: 'right',
//y: 80, // <- comment this line.
padding: 20,
verticalAlign: 'middle',
symbolHeight: 300
},
Then:
// After the "highcharts" settings, add:
, function(chart) {
var title = chart.legend.title;
title.translate(0, 370);
}
Here is the modified jsfiddle.
$(function () {
Highcharts.setOptions({
global : { useUTC : false
}
});
$('#container').highcharts({
title: {
text: 'coefficient 10 days',
x: -20
},
subtitle: {
text: 'Company',
x: -20
},
xAxis: {
categories: [<?php echo join($data, ',')?>],
type: 'datetime'
},
yAxis: {
title: {
text: 'Коэффициент'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '', enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
series: [
{
name: 'value',
data: [<?php echo join($koef, ',')?>]
}, {
name: 'norm',
data: [<?php echo join($norm, ',')?>], color: '#FF0000'
}
]
});
});
When format in php as 'Ymd', date is correct but as number, like '20151210' this not readable for users. When i try format (in php code) 'd.m.Y' java say script1007 error. On api.highcharts.com nothing in the description specified what to do. Probably i need set in javascript something about datetime setting.
Create Line chart with JSON data using i have a data in json in following format:
Data
{"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]}
Highchart code:
$.post(trendUrl,params,function(data)
{
console.log("you are submitting"+data);
});
$('#trendChart').highcharts({
title: {
x: -20 //center
},
subtitle: {
x: -20
},
xAxis: {
gridLineWidth: 1,
categories: []
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
color:'#FBA208',
data: []
}]
});
Here i would like to plot categories in X and Series in y.
Thanks in advance
try:
$(function () {
data = {"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]};
$('#container').highcharts({
title: {
text: 'title',
x: -20 //center
},
subtitle: {
text: 'subtitle',
x: -20
},
xAxis: {
categories: data.Categoires
},
yAxis: {
title: {
text: 'yaxis'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'dd'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'data',
data: data.Series
},]
});
});
jsfiddle: http://jsfiddle.net/e2bm7wu8/
What do I need to do to make this chart work with 3D options? I have everything connected properly and it shows the charts in 2D just fine.
When I add the options3d like in the example below it throws an error that the identifier is depreciated.
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
Here is what I have tried with no luck, I commented out the 3D portion because that was the only way it worked with my data query:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 75,
marginBottom: 25
//options3d: {
// enabled: true,
//alpha: 15,
//beta: 15,
// depth: 50,
// viewDistance: 25
// }
},
title: {
text: 'Contributions to Filers by Year',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Money Contributed to Filers'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
}
$.getJSON("/charts/data/filers-test.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>
Since no one was able to help me with this, I figured it out on my own with trial and error. Here is the script I used to get the final working result from the server. This produces a nice 3D highchart that can show the data properly. I may need to edit it a few more times before it is actually used...
$(document).ready(function() {
var options = {
// basic chart options
chart: {
height: 350,
renderTo: 'container',
type: 'column',
marginRight: 130,
lang: {
thousandsSep: ','
},
marginBottom: 25,
// 3D initialization, comment out for non-3D columns
options3d: {
enabled: true,
alpha: 0,
beta: 2,
depth: 50,
viewDistance: 25
}
},
// main chart title (TOP)
title: {
text: 'Contributions to Filers',
x: -20 //center
},
// main chart sub-title (TOP)
subtitle: {
text: '',
x: -20
},
// xAxis title
xAxis: {
reversed: true,
title: {
text: 'Election Year'
},
categories: [],
reversed: true
},
// yAxis title
yAxis: {
title: {
text: 'Dollar Amount'
},
// chart options for each plotted point
plotLines: [{
value: 1,
width: 1,
color: '#66837B'
}]
},
// tooltip on hover options
tooltip: {
lang: {
thousandsSep: ','
},
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
align: 'left',
verticalAlign: 'top',
x: 0,
y: 0,
borderWidth: 0,
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#F2C45A'
}
},
series: {
text: 'Total Dollar Amount',
color: '#66837B',
cursor: 'pointer'
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#F2C45A'
}
}
},
series: []
}
Highcharts.setOptions({
// sets comma for thousands separator
lang: {
thousandsSep: ','
}
});
$.getJSON("/charts/data/filers-test.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
chart.legend.allItems[0].update({name:'Total by Election Year'}); ///// LEGEND LABEL CHANGES HERE!
});
});
chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'column'
},
title: {
text: 'Cumplimiento de los Programas del PMA-Contratistas'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Nº Charlas ambientales',
'Nº personal capacitado'
]
},
yAxis: {
min: 0,
title: {
text: '%'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{name: 'Semana',data: [12 , 321] }, {name: 'Acum',data: [85, 65]}]
});
this is my Highchart code
when I am using javascript variable
like this
g311 = $("#g311").val();
g312 = $("#g312").val();
g321 = $("#g321").val();
g322 = $("#g322").val();
and pass this in series
series: [{name: 'Semana',data: [g311, g312] }, {name: 'Acum',data: [g321, g322]}]
it is not showing me graph please give me some way how to pass jquery variable in series (not static or PHP variable)
Seems to me you need to convert them to numbers first because input elems have values as strings:
g311 = +$("#g311").val();
g312 = +$("#g312").val();
g321 = +$("#g321").val();
g322 = +$("#g322").val();
and you need to declare these above the chart.
prefixing + converts a string to number.