Multiple data sources in flot plot

Question

so i have a chart that calls data from a csv file. i basically need to put x and y in the same chart currently it is like this in two individual charts.

$.ajax({
            'url' : 'csvfile.csv',
            'method' : 'get',
            'success' : function(response){
                var response = Papa.parse(response,{
                    header: true
                });

                for(var i in response.data){
                    chartData.x.push([step * i, response.data[i]['rot_x']]);
                    chartData.y.push([step * i, response.data[i]['rot_y']]);
                    chartData.z.push([step * i, response.data[i]['rot_z']]);
                }


                var plotX = $.plot($("#x-chart"),[ {
                    data: chartData.x,
                    label: 'ROT-X'
                }],plotConfig);

                var plotY = $.plot($("#y-chart"),[ {
                    data: chartData.y,
                    label: 'ROT-Y'
                }],plotConfig);

any help here greatly appreciated i effectively want to get to this type of solution where both x and y are in the same chart..

var plotX = $.plot($("#x-chart"),[ {
                    data: {'chartData.x','chartData.y'},
                    label: 'ROT-X'
                }],plotConfig);

this does not work currently but at least you will see the problem

Answer 1

Assuming you are using the flot plugin for jQuery, then there are good docs that will help you. I believe your issue is that the data property of the objects in the plotData array need to be arrays - in your code your are using an object.

You could have one chart with two data sources:

var plotData = [ 
    { 
      label: "ROT-X", 
      data: chartData.x
    },
    { 
      label: "ROT-Y", 
      data: chartData.y
    }
];

var plotX = $.plot($("#x-chart"), plotData, plotConfig);

Or merge the arrays and have one data source.

var plotData = [ 
    { 
      label: "ROT-X&Y", 
      data: chartData.x.concat(chartData.y)
    }
];

var plotX = $.plot($("#x-chart"), plotData, plotConfig);