CODEWITHSUNDEEP
javascriptd3.js
yavg
yavg

Reputation: 3051

make a chart of X vs Y

I have some points in x and others in y. I'm trying to make a chart as in the image I have. I want the points of the created graph can be joined. in c3.js I do not know how to plot X vs Y. How can I achieve something like my photo?

https://jsfiddle.net/8tqguqww/

var pointsx=[1,2,3,4,5,4,3,2,1]
var pointsy=[2,3,4,7,8,9,8,7,3]

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    },
    point: {
        show: true
    }
});

https://i.imgur.com/xGZO8Vx.jpg

Upvotes: 1

Views: 125

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102188

The name of this kind of chart is scatter plot.

Therefore, you'll have to specify the type:

type: 'scatter'

And tell C3 what are the data array pairs:

xs: {
  data1: "data2"
},
columns: [
  ['data1', 30, 200, 100, 400, 150, 250],
  ['data2', 50, 20, 10, 40, 15, 25]
],

Here is the updated fiddle: https://jsfiddle.net/qrqquhvd/

EDIT: Because of the comment in your question I just realized that you have this requirement: "I want the points of the created graph can be joined". The answer is simple: it's impossible using just C3. You'll have to do that with D3 code... an even better idea is just dropping C3 and doing everything with D3.

Upvotes: 1

Related Questions