javascript - append multiple y axis data in plotly JS

Question

Welcome To Ask or Share your Answers For Others

javascript - append multiple y axis data in plotly JS

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - append multiple y axis data in plotly JS

I want to draw a multiline chart with a dataSet(multiple lists append in 1 list) where I know which one I will as X-axis and Y-axis.

let dataSet = [[1, 2, 3, 4], [10, 15, 13, 17], [16, 5, 11, 9]];
/**
X-axis = dataSet[0]  
The remaining will be used as Y-axis*/

The example is taken from here. Where I have seen for plotting each line(here 2 times) variable is calling to set the data. In my case, Y-axis will appear near about 30 times and for each X-axis value will be the same. But I haven't found a dynamic solution where I can append the Y-axis value using a for loop or something like that. That means I want to call this data variable only 1 time and want to append all information of multi-chart there at instant.

I have added my approach here.

let dataSet = [[1, 2, 3, 4], [10, 15, 13, 17], [16, 5, 11, 9]];

function get_val (data){
  let x = [];
  for(let j = 1;j<data.length;j++)
    {
    x.push(data[j]);
    }
    //console.log("x: ",x);
  return x;  
}

var trace1 = {
  x: dataSet[0],
  y: get_val(dataSet), /* if write here get_val(dataSet)[0] then works fine*/
  type: 'scatter'
};
/**
if you uncomment the following lines, result will be as like as the example of plotly JS
*/
/*
var trace2 = {
  x: dataSet[0],
  y: get_val(dataSet)[1],
  type: 'scatter'
};
*/
var data = [trace1/*, trace2*/];

Plotly.newPlot('myDiv', data);

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

question from:https://stackoverflow.com/questions/65830288/append-multiple-y-axis-data-in-plotly-js

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:37:16+0000

I have understood(maybe) where was my lacking.
1/ At first I have realized that I have overlooked that the traces or datapoints of plotly is an array of objects.
2/ I have also tried to organize my data
I have given here the solution that I have done.

let dataSet = [[10, 20, 30, 40], [10, 15, -13, 17], [1-6, 5, 11, 20] ]
/** following function will take the data and return the dataTRace as per as plotly's requirements.*/
function make_trace({data, set_type = "scatter", set_mode = "lines"} = {}){
  let dataPoint = [];
  for(let i = 1; i<data.length; i++){
    dataPoint.push({
                x: data[0],
                y: data[i],
                mode: set_mode,
                type: set_type,
                name: 'y_' + i
            });
  }
  return dataPoint;
}
/** following function will make the layout for the plot*/
function make_layout({given_title="the title is not provided",x_min=0,x_max=15,x_axis_title="x_axis", y_min=0,y_max=15, y_axis_title="y_axis"} = {})
{
    let layout_object = {
        title: {
            text: given_title
        },
        showlegend: true,
        xaxis: {
            range: [x_min, x_max],
            title: x_axis_title
        },
        yaxis: {
            range: [y_min, y_max],
            title: y_axis_title
        },
    };
    return layout_object;
}

let fig_layout = make_layout({given_title:"x vs y1, y2 plot", 
                                                    x_min: 10, x_max : 50, x_axis_title:"x",
                                                    y_min: -20, y_max: 20, y_axis_title : "y(1,2)"});

Plotly.newPlot('myDiv', make_trace({data : dataSet, set_type:"scatter", set_mode : "lines"}), fig_layout);
Plotly.newPlot('myDiv_1', make_trace({data : dataSet, set_type:"scatter", set_mode : "markers"}), fig_layout);

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
  <div id='myDiv_1'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Categories

javascript - append multiple y axis data in plotly JS

javascript - append multiple y axis data in plotly JS

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags