Highchart scatter point not connected

Question

I set the lineWidth already to let every point connected to each other but it's still won't work. Please help me to inspect the sample data below and also the options setting

[{"x":101.4,"y":69.235,"marker":{"fillColor":"#BF0B23"}},{"x":101.23,"y":69.24},{"x":101.03,"y":69.24},{"x":100.82,"y":69.22},{"x":100.61,"y":69.21},{"x":100.41,"y":69.21},{"x":99.95,"y":69.19},{"x":99.96,"y":69.19},{"x":100,"y":69.14},{"x":100.03,"y":69.1},{"x":100.04,"y":69.1},{"x":100.09,"y":69.085},{"x":100.15,"y":69.08},{"x":100.08,"y":69.135},{"x":100.03,"y":69.095},{"x":100.06,"y":69.07},{"x":100.1,"y":69.07},{"x":100.25,"y":69.045},{"x":100.18,"y":69.105},{"x":102.82,"y":68.925},{"x":102.52,"y":68.89},{"x":102.2,"y":68.86},{"x":102.18,"y":68.87},{"x":102.25,"y":68.855},{"x":102.21,"y":68.845},{"x":102.82,"y":69.595},{"x":102.9,"y":69.575},{"x":102.86,"y":69.595},{"x":102.8,"y":69.775},{"x":102.83,"y":69.695},{"x":102.83,"y":69.755},{"x":102.82,"y":69.615},{"x":102.91,"y":69.615},{"x":102.88,"y":69.575},{"x":102.98,"y":69.585},{"x":103.16,"y":69.655},{"x":103,"y":69.655},{"x":102.91,"y":69.595},{"x":102.82,"y":69.595},{"x":102.7,"y":69.575},{"x":102.76,"y":69.625},{"x":102.77,"y":69.575},{"x":102.76,"y":69.545},{"x":102.85,"y":69.505},{"x":102.99,"y":69.505},{"x":103.02,"y":69.505},{"x":102.88,"y":69.515},{"x":103,"y":69.845},{"x":103.19,"y":69.805},{"x":103.1,"y":69.725},{"x":102.79,"y":69.675},{"x":102.96,"y":69.735},{"x":103.14,"y":69.625},{"x":103.02,"y":69.615},{"x":103.27,"y":69.785},{"x":103.19,"y":69.765},{"x":102.88,"y":69.475},{"x":103,"y":69.475},{"x":102.99,"y":69.395},{"x":99.49,"y":69.195},{"x":99.32,"y":69.215,"marker":{"fillColor":"black"}}]

this is not the whole data. The data is not fit in in SO textarea

the options

options = {
    chart: {
        type: 'scatter',
        animation:false             
    },              
    plotOptions: {
        scatter: {
            turboThreshold: 9999
        }                   
    },              
    series: [{
        name: 'Hysteresis',
        data: [],
        lineWidth: 2
    }]
}

Here my attempt to use with jsFiddle and it's working. But for your information, I dynamically load the data like this chart.series[0].setData() and it's not working

screenshot of console.log($('ele').highcharts());

this is the alternative that I tried, how I push the data to the series before initiated highcharts

options.series[0].data.push({
    x: parseFloat(model.get('xreading')), 
    y: parseFloat(model.get('yreading')), 
    marker:{ fillColor: '#BF0B23', symbol: 'triangle' }, label: model.get('iv_date')
});

Any possible options that might prevent it from draw the line

Answer 1

A scatter plot (definition of a scatter plot @ Wikipedia) doesn't have lines connecting each data point. Line graphs have lines: Highcharts, Basic Line @ highcharts.com

Change:

type: 'scatter',

to

type: 'line',

Then change the plotOptions accordingly.

Maybe what you really want is a trend line? See: https://github.com/virtualstaticvoid/highcharts_trendline That's a regression line which is automatically calculated to fit your data?

Answer 2

to solve this little problem when it is not connected,

• check your data. Make sure x and y is available if normal push array
• not working for you, why not you try build json string then later parse it

that's all folks