Line Chart & Scatter Chart on the Same Graph

[Basky]

I need to plot a 'line chart' and 'scatter chart' on the same graph.

How do i merge the two to show on the same chart. The current code is as follows

// Draw Scatter Chart 
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
       for (var i = 0; i < arr1.length; ++i) {
      data.addRow([eval(arr2[i]), eval(arr1[i])])
    }
    var options = {
          title: 'Line of Best Fit(Trend Line)',
          hAxis: {title: 'Independent Variable', minValue: 0, maxValue: 15},
          vAxis: {title: 'Dependent Variable', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);

/* Draw Line Chart*/
     var lndata = new google.visualization.DataTable();
     lndata.addColumn('number', 'X');
     lndata.addColumn('number', 'Y');
       for (var i = 0; i < arr2.length; ++i) {
      data.addRow([eval(arr2[i]), eval(a + (b*arr2[i]))])
    }
   
   

        var lnchart = new google.visualization.LineChart(document.getElementById('chart_div1'));
        lnchart.draw(lndata, options);

How do I merge the two on the same chart ?

Thanks a lot :)

[asgallant]

Combine both data sets into one DataTable and use a ScatterChart for both series.  You can set the series.<series index>.lineWidth option (set to something > 0 to make the line show).  Like this:

var data = new google.visualization.DataTable();
data.addColumn('number', 'X');

data.addColumn('number', 'Y (scatter)');
data.addColumn('number', 'Y (line)');

for (var i = 0; i < arr1.length; ++i) {

    // why use eval's here?
    data.addRow([eval(arr2[i]), eval(arr1[i]), eval(a + (b * arr2[i]))]);

}
var options = {
    title: 'Line of Best Fit(Trend Line)',
    hAxis: {
        title: 'Independent Variable',
        minValue: 0,
        maxValue: 15
    },
    vAxis: {
        title: 'Dependent Variable',
        minValue: 0,
        maxValue: 15
    },

    legend: 'none',
    series: {
        // series 0 is the Scatter
        0: {
            // you can omit this if you choose not to set any options for this series
        },
        // series 1 is the Line
        1: {
            lineWidth: 1,
            pointSize: 1

        }
    }
};

var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);

[Basky]

Thanks asgallant .. It worked out exactly as I wanted it to :)

[asgallant]

You're welcome.

[dead...@gmail.com]

I tried this and I didn't get a line, only two small dots (at the top):

[Daniel LaLiberte]

Could you give us enough code, data, and options, to reproduce your chart?  Better, could you produce a jsfiddle example?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/34fe6aae-b740-425e-bca6-8261ee49d457%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA