Not able to create scatter and line chart together in c3.js

Question

Please guide me what i am doing wrong.I am using c3.js for showing chart in my webpage.Now i have requirement where i need to show spline and scatter chart together.I have searched in c3.js and came across combinational chart (http://c3js.org/samples/chart_combination.html). But when i used it for scatter and spline chart is not coming at all

Below is my code

<!-- Load c3.css -->
<link href="c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="d3.js" charset="utf-8"></script>
<script src="c3.js"></script>

<div class="chart" id="chart" ></div>


<script>
var chart = c3.generate({
    data: {
        xs: {
            setosa: 'setosa_x',
        },
        // iris data from R
        columns: [
             ["setosa", 3.0, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
             ["setosa_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
             ['data3', 300, 200, 160, 400, 250, 250],
        ],
        type: 'scatter',
         types: {
            data3: 'spline',  
        },
    },
    axis: {
        x: {
            label: 'Sepal.Width',
            tick: {
                fit: false
            }
        },
        y: {
            label: 'Petal.Width'
        }
    }
});

</script>

Thanks

Answer 1

The above answer was a useful start for me but it's ultimately off point. The C3 system allows one to specify multiple chart types, without having to resort to creating multiple y axes, which should almost always be avoided because it's too easy to manipulate inferences in this manner (think of truncating one axis to increase the appearance of variability or vise versa).

Simply add in the x and y values respectively for each series you'd like to plot and refer to the type of chart that needs to be plotted in the types argument in the data object. See below:

var setosa_x = [2.3,2.9,3.0,3.0,3.0,3.0,3.0,3.0,3.1,3.1,3.1,3.1,3.2,3.2,3.2,3.2,3.2,3.3,3.3,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.5,3.5,3.5,3.5,3.5,3.6,3.6,3.6,3.7,3.7,3.7,3.8,3.8,3.8,3.8,3.9,3.9,4.0,4.1,4.2,4.4]; 
var setosa = [0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2]; 

    var new_setosa = setosa.map(function(x){
        return 0.75 * x + .25; 
    }); 

    var new_setosa_x = setosa_x.map(function(x){
        return x + .10; 
    })

    var other_chart = c3.generate({
    bindto: '#other_chart',
    data: {        
        xs: {
            setosa: 'setosa_x',
            other: 'other_x'

        },
        // iris data from R
        columns: [                       
            ["setosa_x"].concat(setosa_x),
            ["setosa"].concat(setosa),
            ["other_x"].concat(new_setosa_x),
            ["other"].concat(new_setosa)
            ],            
            types: {
                setosa: 'scatter',
                other : 'spline'
            }
    }    
});

Answer 2

I have also wondered.

• To plot the line chart on the same x axis as the scatter chart, you will need an x axis and set it to the same axis as scatter chart. The setosa_x data does not have to be in order, but it should be so you can make a useful line chart on the shared x axis. This affects how setosa can be defined also.
• Because the x axis will have several numbers the same, you will need to giver your line data some nulls.
• You need to give the scatter and line charts different axes{} to work from (y and y2). Also need to set limits with min and max for each.

You can cut and paste the data in the arrays into M Excel and order the chronoligically

var chart = c3.generate({
    data: {
        x:'setosa_x',
        xs: {
            setosa: 'setosa_x',
        },
        // iris data from R
        columns: [
            //['x',2.3,2.9,3.0,3.0,3.0,3.0,3.0,3.0,3.1,3.1,3.1,3.1,3.2,3.2,3.2,3.2,3.2,3.3,3.3,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.5,3.5,3.5,3.5,3.5,3.6,3.6,3.6,3.7,3.7,3.7,3.8,3.8,3.8,3.8,3.9,3.9,4.0,4.1,4.2,4.4],
            ['data3', 100, 200, 300, null, null, 200, null, 160, 400, 250, 250,100, 200, 300, 200, 160, 400, 250, 250,100, 200, 300, 200 ],
            ["setosa_x",2.3,2.9,3.0,3.0,3.0,3.0,3.0,3.0,3.1,3.1,3.1,3.1,3.2,3.2,3.2,3.2,3.2,3.3,3.3,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.4,3.5,3.5,3.5,3.5,3.5,3.6,3.6,3.6,3.7,3.7,3.7,3.8,3.8,3.8,3.8,3.9,3.9,4.0,4.1,4.2,4.4],
            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ],
            axes: {
               // setosa_x: 'x',
                setosa: 'y2',
                data3: 'y'
            },
            type: 'scatter',
            types: {
                data3 : 'spline'
            }
    },    
    axis: {
        y: {
            min: 35,
            show: true
        },
        y2: {
            max: 0.5,
            show: true
        }      
    }                 
});