CODEWITHSUNDEEP
javascriptarrayshighcharts
Chempooro
Chempooro

Reputation: 435

Plot Y axis data based on x axis values from a csv file : Highcharts

What I want to do is that I want to scatter points on my graph at particular points. based on the data I have. in total, I have 1700 points data. out of which On some points I want to plot a scatter points so that Area could be highlighted on that point.

The X-axis data Have Values as follows:

[33,141,240,340,441,514,645,743,852,961,1064,1172,1279,1385,1495,1607]

and the Values in Y-axis are: 

[2,4,1,7,5,2,9,4,6,9,3,6,2,9,3,6]

But I am not getting the X-axis values. it simply counts the data from 0 to 16.

Here is the Graph I am getting : Highchart's graph

What I want is the data to print the line until the whole 1700 points and scatter points on the Y-axis based on the X-axis data.

Here is the code that I have tried.

    Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: ''
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
               // connectorAllowed: false
            },
            data : [33,141,240,340,441,514,645,743,852,961,1064,1172,1279,1385,1495,1607]

        }
    },

    series: [{
        name: 'Installation',
        data: [2,4,1,7,5,2,9,4,6,9,3,6,2,9,3,6]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

Any Help is Really appreciated, Thanks in advance.

Upvotes: 0

Views: 267

Answers (2)

TKoL
TKoL

Reputation: 13902

https://jsfiddle.net/1s5ctbn2/

You need your series data to look like this:

series: [{
    name: 'Installation',
    data: [
    {y:2,x:1.5},
    {y:4,x:2.2},
    {y:1,x:3},
    {y:7,x:4},
    {y:5,x:5},
    {y:2,x:6},
    {y:9,x:7},
    {y:4,x:8},
    {y:6,x:9},
    {y:9,x:10},
    {y:3,x:11},
    {y:6,x:12},
    {y:2,x:13},
    {y:9,x:14},
    {y:3,x:15},
    {y:6,x:20}
    ]
}]

With both x and y values

Upvotes: 0

user3297291
user3297291

Reputation: 23382

The scatter plot linked in the comments by @TKoL shows two main differences from your code:

  • You need to define the chart.type to be scatter
  • The data should be in the format of [[y, x]] for the scatter plot to be able to match y to x locations.

Defining the type is fixed by adding a property to your config:

Hichcarts.chart("container", { 
 chart: { type: "scatter" },
 /* ... */
})

To zip your x and y values, you can loop over two arrays and merge based on index.

A quick one liner (might not be best performing or readable production code version):

const zip = (ys, xs) => 
  xs.reduce(
    (acc, x, i) => (acc.push([x, ys[i]]), acc),
    []
  );

Note: You might want to ensure your xs and ys are of equal length and determine the strategy when they're not (throw an error, get rid of values that are not in a pair, etc.)

Here's a minimal example that uses your data in a scatter plot:

const xValues = [33, 141, 240, 340, 441, 514, 645, 743, 852, 961, 1064, 1172, 1279, 1385, 1495, 1607];

const yValues = [2, 4, 1, 7, 5, 2, 9, 4, 6, 9, 3, 6, 2, 9, 3, 6];

const zip = (ys, xs) => xs.reduce((acc, x, i) => (acc.push([x, ys[i]]), acc), []);



Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  series: [{
    name: 'Installation',
    data: zip(xValues, yValues)
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

Upvotes: 1

Related Questions