We Keep Coding

Created function for highchart is not taking values and showing properly

Hi I try to create spider chart using high chart but it taking first 4 values(parm1,parm2,parm3,parm4) properly but not the other 4 values (data1,data2,data3,data4)
i am using this code to call these values finalResults.innerHTML += spiderChart (PM,AF,AT,AD,dataPM,dataAF,dataAT,dataAD) + "<br>" values of PM,AF,AT and AD are showing properly in spider chat but for data dataPM,dataAF,dataAT,dataAD it is showing nothing ... i check the function by replacing variable with acctual value and it was working properly... please let me know what is wrong here ?
function spiderChart(parm1,parm2,parm3,parm4,data1,data2,data3,data4) {
$('#container2').highcharts({
chart: {
polar: true,
type: 'line',
margin: 0
},
exporting: {
enabled: false,
buttons: {
enabled: false
}
},
title: {
text: '&nbsp',
x: -80,
useHTML: true
},
pane: {
size: '70%'
},
xAxis: {
categories: [parm1,parm2,parm3,parm4],
tickmarkPlacement: 'on',
lineWidth: 0,
labels: {
align: 'center',
distance: 43
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
endOnTick: true,
showLastLabel: true,
tickPositions: [10, 20, 30, 40, 50, 60, 70 , 80]
},
credits: {
enabled: false
},
tooltip: {
shared: true,
headerFormat: '<span style="font-size: 12px">{point.key}:</span> <b>{point.y:,.2f}</b>',
pointFormat: '',
useHTML: true
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
y: 30,
layout: 'vertical'
},
series: [{
name: 'Maturity',
data: [data1,data2,data3,data4],
pointPlacement: 'on',
color: 'green',
fillOpacity: 0.2
}]
});
};

Highcharts.chart is not a function?

I am getting the json data but its not showing in jsp page. In console Uncaught TypeError: Cannot read property 'navigator' of undefined exporting.js:9 and export-data.js:10 Uncaught TypeError: Cannot read property 'document' of undefined and highcharts.chart is not a function
I have copy the highchart js file in my local path
<script src="${resourceUrl}/js/highchart/highcharts.js"></script>
<script src="${resourceUrl}/js/highchart/exporting.js"></script>
<script src="${resourceUrl}/js/highchart/export-data.js"></script>
<script>
$(document).ready(function(){
$.getJSON( "http://localhost:8080/mandatoryCheck/generate2", function(data) {
var chart = new Highcharts.chart('cvsMandCheckGraph', {
chart: {
type: 'column'
},
title: {
text: 'Top 5 Mandatory Checks Fail'
},
subtitle: {
text: ''
},
xAxis: {
categories: " ",
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
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} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
shadow: true
},*/
series: [{
colorByPoint: true,
data: data
}]
});
});
});
$(document).ready(function(){
$.getJSON( "http://localhost:8080/fieldModification/generate", function(data) {
var chart = new Highcharts.chart('cvsFieldModiChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
legend: {
itemStyle: {
fontSize: '10px'
}
},
subtitle: {
text: 'Top 5 Field Modifications'
},
xAxis: {
categories: []
},
tooltip: {
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{}</b><br>{point.percentage:.1f} %',
distance: -30,
color: '#fff',
style: {
textOutline: false ,
fontSize: 9,
},
filter: {
property: 'percentage',
operator: '>',
value: 4
}
},
showInLegend: true
}
},
series: [{
name: '',
style: { fontFamily: '\'Lato\', sans-serif', lineHeight: '18px', fontSize: '17px' },
colorByPoint: true,
data: data
}]
});
});
});
</script>

You can make use of below CDN link.It will make sure the Highchart.chart is available.
If you are using jQuery make sure that jQuery CDN link should provide before Highchart Link
console.log(Highcharts.chart)
<script src="http://code.highcharts.com/highcharts.js"></script>

highcharts StockChart pass multiple values to tooltip

These code are written by javascript,and use hightChart StockChart below.
The program can draw chart by the datetime and report_value1 in the stockChart,and show report_value1 in the tooltip.
I want to add more values to show in the pointFormat of the tooltip.
How to add code to show the rpm value of the speed_data in the tooltip?
var speed_data = [];
for (var i = 0; i < _datalenght; i++) {
v = sData[i];
speed_data.push([
v.report_time * 1000,
v.report_value1,
v.rpm,
]);
}
fuelchart = new Highcharts.StockChart({
chart: {
renderTo: "speed_chart_div",
type: 'line',
zoomType: 'x',
marginRight: 10,
backgroundColor: null
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 5,
text: '5min'
}, {
type: 'minute',
count: 30,
text: '30min'
}, {
type: 'hour',
count: 1,
text: '1hour'
}, {
type: 'hour',
count: 4,
text: '4hour'
}, {
type: 'hour',
count: 8,
text: '8hour'
}, {
type: 'all',
count: 1,
text: 'all'
}],
selected: 5,
inputEnabled: false
},
title: {
text: null
},
subtitle: {
text: '' // dummy text to reserve space for dynamic subtitle
},
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#CCC'
},
xAxis: {
type: 'datetime',
ordinal: false
},
yAxis: {
title: {
text: JLANG.REPORT_SPEED
},
min: 0
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
}
}
},
series: [{
name: JLANG.REPORT_SPEED,
type: 'area',
color: '#357EC7',
lineWidth: 1,
data: speed_data,
tooltip: {
valueDecimals: 0,
useHTML: true,
headerFormat: '<span style="color: {series.color}; font-size:15px;"><b>{point.key}</b></span>',
pointFormat:
'<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{point.y} km/h</b></span></div>' +
'<br/><div><span style="color: {series.color}; font-size:15px;">rpm: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{???} </b></span></div>'
,
xDateFormat: '%H:%M:%S %d-%m-%Y'
},
gapSize: 0,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}],
credits: {
enabled: false
}
});

I try it succussfully.
usdeur = [[1187654400000,0.7429,1],[1187740800000,0.7383,2],[1187827200000,0.7369,3]];
propertyData = [];
//propertyData[1187654400000] = {"a":1,"b":2};
//propertyData[1187740800000] = {"a":3,"b":4};
//propertyData[1187827200000] = {"a":5,"b":6};
for (var i = 0; i < usdeur.length; i++) {
propertyData[usdeur[i][0]] = {"a":i,"b":i+1};
}
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
ordinal: false
},
yAxis: {
title: {
text: "speed"
},
min: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
valueDecimals: 0,
useHTML: true,
xDateFormat: '%H:%M:%S %d-%m-%Y',
/* pointFormat:
'<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' +
'<div><span style="text-align: right; font-size:15px;"><b>{propertyData[point.x]}.{point.y} km/h</b></span></div>',
*/
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function () {
s += '<br/>1 USD = ' + this.y + ' EUR<br/>' +
propertyData[this.x]["a"] + "<br/>" +
propertyData[this.x]["b"] ;
});
return s;
}
},
rangeSelector: {
selected: 1
},
series: [{
type: 'area',
name: 'USD to EUR',
data: usdeur
}]
});

How to pass the values to the highcharts?

I have following code, trying to get "this.y" outside highcharts function for setting different tooltip text for data. Please help me out how to pass y access values?
var series = [];
var myData = {
'color': 'url(#defaultYou)',
'name': 'Me',
'data': [],
tooltip: {
useHTML: true,
headerFormat: '',
pointFormat: 'Your current Salary in USD this.y',
footerFormat: '',
}
};
var maleData = {
showInLegend: false,
'color': 'url(#defaultMale)',
'name': 'Male',
'data': [],
tooltip: {
useHTML: true,
headerFormat: '',
pointFormat: 'Income this.y <br> Experience 3 Year(s)',
footerFormat: '',
}
};
var femaleData = {
showInLegend: false,
'color': 'url(#defaultFemale)',
'name': 'Female',
'data': [],
tooltip: {
useHTML: true,
headerFormat: '',
pointFormat: 'Income this.y <br> Experience 3 Year(s)',
footerFormat: '',
}
};
series = [maleData, femaleData, myData];
drawChart(series, 'My Chart Title');
function drawChart(series, chartTitle) {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
spacingBottom: 0,
events: {
load: function () {
}
}
},
title: {
text: chartTitle,
useHTML: true,
style: {
color: '#333333',
fontSize: '18px',
textAlign: 'center'
}
},
xAxis: {
gridLineWidth: 0,
min: 0,
max: 20,
labels: {
enabled: false
},
lineWidth: 0,
tickWidth: 0
},
yAxis: {
gridLineWidth: 0,
},
legend: {
enabled: true
},
series: series
});
}

From Highcharts's docs:
pointFormat:
StringSince 2.2 The HTML of the point's line in the
tooltip. Variables are enclosed by curly brackets.....
Long story short, instead of using this.y you should use {point.y}.
http://jsfiddle.net/kadoshms/qgx28yyp/

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