admin管理员组文章数量:1327880
This is the high chart graph code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src=".8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I want to add trend line for this chart, i searched in google and got the code from this link : and i added the trend line code like this .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src=".8.2/jquery.min.js"></script>
<script type="text/javascript" src="regression.js"></script>
<script type="text/javascript" src=".js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
var chart_linear = new highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
enableMouseTracking: false
}
},
series: [{
type: 'scatter',
data: sourceData
},
{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
});
</script>
</head>
<body>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
and the trend line that acts according to the x-axis and y-axis values but on the x-axis values are date wise and the y-axis values are numbers ,please find the screen shot for the first code :
And this the trend line snapshot. please find.
please share any one of the code that i would like to add the two graphs in the same page , i have tried but the x-axis and y-axis values are different for the two graphs.
Thanks.
This is the high chart graph code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I want to add trend line for this chart, i searched in google and got the code from this link : https://github./virtualstaticvoid/highcharts_trendline and i added the trend line code like this .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="regression.js"></script>
<script type="text/javascript" src="http://code.highcharts./highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
var chart_linear = new highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
enableMouseTracking: false
}
},
series: [{
type: 'scatter',
data: sourceData
},
{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
});
</script>
</head>
<body>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
and the trend line that acts according to the x-axis and y-axis values but on the x-axis values are date wise and the y-axis values are numbers ,please find the screen shot for the first code :
And this the trend line snapshot. please find.
please share any one of the code that i would like to add the two graphs in the same page , i have tried but the x-axis and y-axis values are different for the two graphs.
Thanks.
Share asked Aug 26, 2014 at 12:35 JohnJohn 1012 gold badges7 silver badges17 bronze badges 5- Can you replicate your example as live demo on jsfiddle ? – Sebastian Bochan Commented Aug 26, 2014 at 13:05
- Here's an answer where I show the math involved: stackoverflow./questions/22115693/… – Mark Commented Aug 26, 2014 at 13:12
- yes m ihave already seen the above link but it is different from my code. – John Commented Aug 26, 2014 at 13:16
- other wise , any one can make changes in the code that i got trend line from this link : github./virtualstaticvoid/highcharts_trendline from this link i have downloaded the 'demo.html' and implementing but in this for x-axis and y-axis values are required but the line should draw according to the y-axis value. – John Commented Aug 26, 2014 at 13:19
-
John, it is different from your code, that's the math that
regression.js
is using. I'm using this as a teaching moment, instead of you cutting and pasting from links across the internet, take a moment and learn the math, then implement for yourself. This is how to bee a great developer. Regardless, I fixed your code below :) – Mark Commented Aug 26, 2014 at 13:26
2 Answers
Reset to default 5Numerous problems.
1.) You didn't really integrate the regresssion code into your plot, you just cut/pasted from the example and are over-drawing your plot. You need to add the regression line as a second series to your plot:
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: sourceData
},{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
2.) This is not valid javascript:
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
Those are strings and they aren't quoted. Regardless, strings won't cut it for the regression, it needs numbers. Since your dates are really categories, just use:
var sourceData = [
[0, 99.75], [1, 99.77],
[2, 99.78], [3, 99.84],
[4, 99.82], [5, 99.82],
[6, 99.76], [7, 99.78],
[8, 99.8], [9, 99.65],
[10, 99.94], [11, 99.8]
];
3.) Your series name is way too long for a right side legend (it squished the plot). In my example I moved it to the bottom.
Here's a example putting all this together.
You can use this Plugin that I believe will do what you want to.
$(function() {
$.getJSON('http://www.highcharts./samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
$('#container').highcharts('StockChart', {
title : {
text : 'AAPL Stock Price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
xAxis: {
ordinal: false
},
yAxis: {
title : {
text : 'Price'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series : [{
name: 'Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name: 'Linear Trendline',
linkedTo: 'primary',
showInLegend: true,
enableMouseTracking: false,
type: 'trendline',
algorithm: 'linear'
}]
});
});
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts./stock/highstock.js"></script>
<script src="http://code.highcharts./stock/modules/exporting.js"></script>
<script src="https://rawgithub./laff/technical-indicators/master/technical-indicators.src.js"></script>
<div id="container" style="min-width: 500x; height: 400px; margin: 0 auto"></div>
Source: http://www.highcharts./plugin-registry/single/16/technical-indicators
本文标签: javascriptHow to add trend line to high chartsStack Overflow
版权声明:本文标题:javascript - How to add trend line to high charts - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742232157a2437415.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论