We Keep Coding

Highcharts is rounding off the decimal values to 0. How to avoid it?

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.

Highchart : Unable to populate data from JSON

I was trying to learn highchart but when I am trying to populate the data from JSON it is not working fine. But I hardcode the data it works fine. So , I think I am doing some mistake while calling the JSON.
My JSON looks like :--
[{
"data": ["11-Aug 12:03", "11-Aug 12:45", "11-Aug 13:13", "11-Aug 13:53", "11-Aug 14:03", "11-Aug 14:33", "11-Aug 14:54", "11-Aug 15:17", "11-Aug 15:49", "11-Aug 16:07", "11-Aug 17:00", "11-Aug 17:33"]
}, {
"data": [23987, 24784, 25899, 255, 25897, 25668, 24114, 23899, 224987, 25111, 25899, 23]
}, {
"data": [12.4, 4.56, 3.8, 1.2, 11, 12.3, 5.67, 7.65, 34.5, 12.78, 10.5, 2.8]
}]
Adding whole code :--
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Job Status'
},
xAxis: [{
categories: [],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Transaction Count',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Time',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} min',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: []
}, {
name: 'Temperature',
type: 'spline',
data: []
}]
$.getJSON("http://localhost:8080/TestQuartz/json/highdefault.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
});
I am unable to create a JSFiddle to show the live example.
Can you please help in where I am doing wrong while calling the data from JSON.
Regards

Syntax of code is incorrect. Morefer you run highcharts two times. Fixed code:
$(function () {
var options = {
chart: {
zoomType: 'xy',
renderTo: 'container'
},
title: {
text: 'Job Status'
},
xAxis: [{
categories: [],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Transaction Count',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Time',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} min',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: []
}, {
name: 'Temperature',
type: 'spline',
data: []
}]
};
$.getJSON("http://localhost:8080/TestQuartz/json/highdefault.json", function (json) {
options.xAxis[0].categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});

setting highcharts title in a modal

how do i set a title of highcharts from an element?
here is my code:
$(function () {
var chart;
$('#second-chart').highcharts({
chart: {
type: 'bar'
},
subtitle: {
text: 'Assortment # by SKUs'
},
xAxis: {
categories: ['Lazada', 'C1', 'C2', 'C3']
},
yAxis: {
title: {
text: '# of SKUs'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'SKU',
data: [500, 120, 150, 300]
}]
});
chart = $('#container').highcharts();
$('#chart-modal').on('shown.bs.modal', function () {
var title_string = $(this).closest('.row').find('.form-control').val().toString();
chart.setTitle({ text: title_string});
// alert(title_string);
});
});
here is the jsfiddle: http://jsfiddle.net/omp4b291/
what am i doing wrong here

In your modal code you need to make use of parent() instead of children in order to access the textControl.
And when deciding on the highCharts, you have to map it with second-chart as you already defined that one only and since there is no #container you need to have that in one which is in your markup
Here is a Working Fiddle
Code Snippet
$(function () {
var chart;
$('#second-chart').highcharts({
chart: {
type: 'bar'
},
subtitle: {
text: 'Assortment # by SKUs'
},
xAxis: {
categories: ['Lazada', 'C1', 'C2', 'C3']
},
yAxis: {
title: {
text: '# of SKUs'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'SKU',
data: [500, 120, 150, 300]
}]
});
$('#chart-modal').on('shown.bs.modal', function () {
var chart = $('#second-chart').highcharts();
var title_string = $(this).parent().find('.form-control').val().toString();
console.log(chart);
chart.setTitle({ text: title_string});
});
});

Error displaying Highcharts chart in Firefox, IE

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

HighCharts: How to put the xAxis category text inside the chart

I'm working with Highcharts and I'm not being able to accomplish something. Here is what I want:
As you can see, the text for each bar is on top of the bar.
Here is the version that I've been working on:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'APPROVED SPEND TO DATE FOR FISCAL YEAR 2013: $17,360,612'
},
xAxis: {
categories: ['Intellectual Property', 'Antitrust/Competition'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Approved spend',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' dollars'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 2013',
data: [6000123, 3743653]
}]
});
});
JSFiddle: http://jsfiddle.net/WcKvz/1/
As you can see, I'm only having the text in the left side of the bar and I can't get it right.
Any ideas? Thank you

The only way I've seen this work is with stackedLabels. You can use them even if you aren't using stacked bars since you only have one series.
...
plotOptions: {
bar: {
stacking: 'normal'
}
},
yAxis: {
stackLabels: {
formatter: function() {
return this.axis.chart.xAxis[0].categories[this.x] + ': $' + this.total;
},
enabled: true,
verticalAlign: 'top',
align: 'left',
y: -5
},
...
http://jsfiddle.net/NVypa/