how to make a scatter with regression line graph in amcharts / highcharts? - highcharts

Question

I read all amcharts and highcharts demo and cant figure out how to draw chart like
The issue I am having is the X axis is text, not numeric like most amcharts/highcharts demos are.

Answer 1

It doesn't matter that you have categories on the x axis, as far as the scatter plot is concerned - your x values are the array index of the categories (0-5 in the case of your image).
There is a plugin to auto calculate a regression line, here:
http://www.highcharts.com/plugin-registry/single/22/Highcharts%20regression
Or, you can calculate your own and plot it normally.
However, a regression line through a group of categories doesn't make much sense. I don't see how it can tell you anything useful, and is probably more likely to cause confusion or outright misunderstanding.
This seems to me to be data that would be more appropriate to plot with a bar chart than a scatter plot.
FWIW
{{edit:
After looking at this longer, I am somewhat unclear: is that actually a regression line, or is that an average, or a target...?
If that's the case, you can either plot it is a line series, or you can use plotLines:
http://api.highcharts.com/highcharts#yAxis.plotLines
Example with a plotLine:
http://jsfiddle.net/jlbriggs/3d3fuhbb/63/

Answer 2

The chart like this is very easily done using amCharts regular Serial chart with line graph with bullets (bullet: "diamond") and no line (lineAlpha: 0).
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataProvider": [ {
"category": "Civil",
"value": 0.87
}, {
"category": "Piping",
"value": 1.1
}, {
"category": "Mechanical",
"value": 0.69
}, {
"category": "Electrical",
"value": 0.82
}, {
"category": "Insulation",
"value": 1.42
}, {
"category": "Completion",
"value": 1.1
} ],
"valueAxes": [ {
"guides": [{
"value": 1,
"lineAlpha": 1,
"lineThickness": 2,
"lineColor": "#f00"
}]
} ],
"startDuration": 1,
"graphs": [ {
"lineAlpha": 0,
"bullet": "diamond",
"valueField": "value",
"lineColor": "#5782bf"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "category",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start"
}
} );
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 600px; height: 200px;"></div>