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

how to create scatter dotted graph in php?

i getting issue create dynamic dotted graph in php data fetch data base y-axis data ploat and x-axis date required but getting issue pls give me some hint or google line
i am using this code but x-axis not display date
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [[07/07/2004, 51.6], [07/026/2004, 59.0], [08/01/2004, 49.2], [08/26/2004, 63.0]]
}]
}]
}); });

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/

Highchart set min on combo-duel-axis

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