$(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.
Related
I am passing the ecpm as you can see below as ["0.4", "0.2", "0.6", "0.3"] to be the data for y axis to draw a spline on a multi axis graph, using highcharts. But it is drawing the spline as a straight horizontal line considering the values as 0. Values on tooltip for every point is also coming as 0.
Following is the script used:
$('#dual-axes-line-and-column4').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Some Matrix'
},
subtitle: {
text: ''
},
xAxis: [{
categories: perfCategoriesStr
}],
yAxis: [
{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
},
title: {
text: 'Views',
style: {
color: '#89A54E'
}
},
opposite:false
}, { // Secondary yAxis
title: {
text: 'Revenue in $',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}, { // Secondary yAxis
title: {
text: 'eCPM in $',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 70,
verticalAlign: 'top',
y: 10,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Views',
color: '#4572A7',
type: 'column',
data: views,
tooltip: {
valueSuffix: ' views'
}
}, {
name: 'Revenue',
color: '#89A54E',
type: 'spline',
yAxis:1,
data: revenue,
tooltip: {
valuePrefix: '$ '
}
}, {
name: 'eCPM',
color: '#000000',
type: 'spline',
yAxis: 1,
data: ecpm,
tooltip: {
valuePrefix: '$ '
}
}]
});
Just figured it out. The values passed should be a number rather than a string. Its working fine if we are passing javascript numbers in an array instead of string as you can see in the question.
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/
I am using dual-axis highcharts. In the y-axis the values are too big to read. I wold like to convert them to shortcuts like 1K for 1000 and 1.0L for 100000 and 1.0M for 1000000 and 35.8M for 35869982 and 3.5M for 3550977.
This is my FIDDLE
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['MAR-2014', 'APR-2014', 'MAY-2014', 'JUN-2014',
'JUL-2014', 'AUG-2014', 'SEP-2014', 'OCT-2014', 'NOV-2014', 'DEC-2014'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'VOLUME',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REVENUE',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Revenue',
type: 'column',
yAxis: 1,
data: [35869982, 26090976, 26595718, 33914250, 25999278, 36579864, 35843674, 28008920, 27718356, 29014230],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'volume',
type: 'spline',
data: [3379865, 2373769, 2401815, 3222316, 2459713, 5864469, 5139453, 3341922, 3229963, 3550977],
tooltip: {
valueSuffix: ''
}
}]
});
});
Here I have rounded up where I want to make changes in the below figure
You need to make a use of formatter:
formatter: function(){
return this.value/1000000 + "M";
}
Fiddle
To utilize the built in "shortening" functionality you can just remove your yAxis.label.format. You have currently set it to {value}, which is the default, but manually setting it seems to prevent the metric prefixes from being applied.
Look at this JSFiddle example, where all I've changed is removing the following line from both of your y-axis labels:
format: '{value}'
With this automatic shortening the following metric prefixes may be applied:
[ "k" , "M" , "G" , "T" , "P" , "E"]
You can set your own values with the lang.numericSymbols option (API).
Highcharts is displaying a chart perfectly in Chrome, but in Firefox, IE10, it returns the error:
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]
This is the code I'm using:
$('#graf-1').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Titel'
},
subtitle: {
text: null
},
xAxis: [{
categories: datax
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value:,.0f} €',
style: {
color: cor1
}
},
title: {
text: null
}
}, { // Secondary yAxis
title: {
text: null //eixoz,
},
labels: {
format: '{value} %',
style: {
color: cor2
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: eixoz,
color: cor2,
type: 'line',
yAxis: 1,
data: dataz,
tooltip: {
valueSuffix: ' %'
},
zIndex: 2
}, {
name: eixoy,
color: cor1,
type: 'column',
data: datay,
tooltip: {
valueSuffix: ' €'
},
zIndex: 1
}]
});
Been looking and trying every thing I found and can think of.
I'm trying to set a minimum for the chart for the Y-axis (Time ms) & 100 max for the percentage on the x-axis and can't figure out where to put the
{min: 0} // For Time
{max: 100} // for the percent x-axis
Some places it works but takes away some of the chart data or menu's
full code:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Network Ping Results'
},
subtitle: {
text: ''
},
xAxis: [{
//echo php dates for data
categories: [<?php echo $categories;?>]
}],
// Primary yAxis Time ms
yAxis: [{
labels: {
format: '{value} ms',
style: {
color: '#89A54E'
}
},
title: {
text: 'Average Time',
style: {
color: '#89A54E'
}
}
},
// Secondary yAxis
{
title: {
text: 'Packet Loss',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Packet Loss',
color: '#4572A7',
type: 'column',
yAxis: 1,
//Data echo for packet loss:
data: [<?php echo $packet_loss;?>],
tooltip: {
valueSuffix: '%'
}
}, {
name: 'Average Time',
color: '#89A54E',
type: 'spline',
//Data echo for time:
data: [<?php echo $avg_times;?>],
tooltip: {
valueSuffix: ' ms'
}
}]
});
});