CODEWITHSUNDEEP
javascriptgoogle-visualization
ironsand
ironsand

Reputation: 15141

How to join multiple DataTable for Google chart

I want to draw multiple line charts those x-axis are Date.

function drawChart() {
    var chartData = [
        [["date", "chart1"],
            [new Date('2017-02-06'), 0.73], [new Date('2017-02-02'), 0.84], [new Date('2017-02-01'), 1.0], [new Date('2017-01-31'), 0.97],
            [new Date('2017-01-30'), 0.86], [new Date('2017-01-25'), 0.88]],
        [["date", "chart2"],
            [new Date('2017-02-16'), 0.52], [new Date('2017-02-22'), 0.43]],
        [["date", "chart3"],
            [new Date('2017-02-21'), 0.6], [new Date('2017-02-22'), 0.42], [new Date('2017-02-15'), 0.61], [new Date('2017-02-20'), 0.56]]
    ]
    var options = {
        title: 'joined chart'
    };
    var dt1 = google.visualization.arrayToDataTable(chartData[0]);
    var dt2 = google.visualization.arrayToDataTable(chartData[1]);
    var dt3 = google.visualization.arrayToDataTable(chartData[1]);
    var data = google.visualization.data.join(dt1, dt2, 'full', [[0, 0]], [1], [1]);
    new google.visualization.ComboChart(document.getElementById('chart-div')).draw(data, options);
}

When there are only two DataTable data it works as I expected.

enter image description here

To draw three lines I wrote like this:

var data3 = google.visualization.data.join(data, dt3, 'full', [[0, 0]], [1], [1]);

But then the result chart was not well drawn.

How can I join google chart DataTable more than two?

This is the code in jsfiddle. http://jsfiddle.net/fe26/gtf960nm/1/

Upvotes: 2

Views: 3163

Answers (1)

Canolyb1
Canolyb1

Reputation: 724

The way to combine two separate charts is using the join method:

var joinedData = google.visualization.data.join(dt1, data2, 'full', [[0, 0]], [1], [1]);
var joinedData2 = google.visualization.data.join(joinedData, dt3, 'full', [[0, 0]], [1,2], [1]);

Here the first two data sets are combined uding the google.visualization.data.join method. Then another third data set is combined to that one using the join method.

Fiddle: http://jsfiddle.net/q5ft1dex/

Upvotes: 4

Related Questions