问题
Using google chart Iam trying to combine two graphs in a single graph.But i have 5 colummn values as follows.The final chart will contains 4 line graphs.But roght now it contains only 2.
For data1 line graphs of App1 and Seloger1
For data2 line graphs of App2 and Seloger2
Final graph will contain 4 line graphs of App1,App2 and Seloger1 and seloger 2
回答1:
need to include each column index,
from each data table,
that should be included in the join
var joinedData = google.visualization.data.join(
data, // data table 1
data2, // data table 2
'full', // join type
[[0,0]], // join columns
[1, 2, 3, 4], // include columns from data table 1
[1, 2, 3, 4] // include columns from data table 2
);
see following working snippet...
var commonOptions = {
titlePosition: "none",
height: 350,
width: 1024,
pointShape: "circle",
crosshair: {
trigger: "both",
color: "#A9A9A9"
},
chartArea: {
top: 25,
left: 70,
width: "80%",
},
backgroundColor: {
strokeWidth: 3,
fill: "#F9F9F9"
},
legend: {
position: "right"
},
hAxis: {
slantedText: true,
slantedTextAngle: 90,
},
tooltip: {
isHtml: true
},
vAxis: {
gridlines: {
count: -1,
color: "#000000"
},
minorGridlines: {
count: 1
}
}
};
var xAxisView = [{data: [["1:24:22", 0, "Uptime: 1:24:22<br/>App Count: 0", 0, "Uptime: 1:24:22<br/>Zombie Count: 0 "],["1:24:42", 0, "Uptime: 1:24:42<br/>App Count: 0", 0, "Uptime: 1:24:42<br/>Zombie Count: 0 "],["1:25:03", 0, "Uptime: 1:25:03<br/>App Count: 0", 0, "Uptime: 1:25:03<br/>Zombie Count: 0 "],["1:25:23", 0, "Uptime: 1:25:23<br/>App Count: 0", 0, "Uptime: 1:25:23<br/>Zombie Count: 0 "],["1:25:43", 0, "Uptime: 1:25:43<br/>App Count: 0", 0, "Uptime: 1:25:43<br/>Zombie Count: 0 "],["1:26:03", 0, "Uptime: 1:26:03<br/>App Count: 0", 0, "Uptime: 1:26:03<br/>Zombie Count: 0 "],["1:26:23", 0, "Uptime: 1:26:23<br/>App Count: 0", 0, "Uptime: 1:26:23<br/>Zombie Count: 0 "],["1:26:43", 51, "Uptime: 1:26:43<br/>App Count: 51", 0, "Uptime: 1:26:43<br/>Zombie Count: 0 "],["1:27:03", 77, "Uptime: 1:27:03<br/>App Count: 77", 23, "Uptime: 1:27:03<br/>Zombie Count: 23 (braiiiins!)"],["1:27:23", 80, "Uptime: 1:27:23<br/>App Count: 80", 25, "Uptime: 1:27:23<br/>Zombie Count: 25 (braiiiins!)"],["1:27:43", 82, "Uptime: 1:27:43<br/>App Count: 82", 27, "Uptime: 1:27:43<br/>Zombie Count: 27 (braiiiins!)"],["1:28:03", 80, "Uptime: 1:28:03<br/>App Count: 80", 27, "Uptime: 1:28:03<br/>Zombie Count: 27 (braiiiins!)"],["1:28:23", 80, "Uptime: 1:28:23<br/>App Count: 80", 26, "Uptime: 1:28:23<br/>Zombie Count: 26 (braiiiins!)"],["1:28:43", 78, "Uptime: 1:28:43<br/>App Count: 78", 24, "Uptime: 1:28:43<br/>Zombie Count: 24 (braiiiins!)"],["1:29:03", 82, "Uptime: 1:29:03<br/>App Count: 82", 27, "Uptime: 1:29:03<br/>Zombie Count: 27 (braiiiins!)"],["1:29:23", 80, "Uptime: 1:29:23<br/>App Count: 80", 30, "Uptime: 1:29:23<br/>Zombie Count: 30 (braiiiins!)"],["1:29:43", 78, "Uptime: 1:29:43<br/>App Count: 78", 24, "Uptime: 1:29:43<br/>Zombie Count: 24 (braiiiins!)"],["1:30:03", 83, "Uptime: 1:30:03<br/>App Count: 83", 28, "Uptime: 1:30:03<br/>Zombie Count: 28 (braiiiins!)"],["1:30:23", 81, "Uptime: 1:30:23<br/>App Count: 81", 27, "Uptime: 1:30:23<br/>Zombie Count: 27 (braiiiins!)"],["1:30:43", 77, "Uptime: 1:30:43<br/>App Count: 77", 25, "Uptime: 1:30:43<br/>Zombie Count: 25 (braiiiins!)"],["1:31:03", 77, "Uptime: 1:31:03<br/>App Count: 77", 28, "Uptime: 1:31:03<br/>Zombie Count: 28 (braiiiins!)"],["1:31:23", 82, "Uptime: 1:31:23<br/>App Count: 82", 29, "Uptime: 1:31:23<br/>Zombie Count: 29 (braiiiins!)"],["1:31:43", 35, "Uptime: 1:31:43<br/>App Count: 35", 24, "Uptime: 1:31:43<br/>Zombie Count: 24 (braiiiins!)"],["1:32:03", 0, "Uptime: 1:32:03<br/>App Count: 0", 0, "Uptime: 1:32:03<br/>Zombie Count: 0 "],["1:32:23", 0, "Uptime: 1:32:23<br/>App Count: 0", 0, "Uptime: 1:32:23<br/>Zombie Count: 0 "],["1:32:43", 0, "Uptime: 1:32:43<br/>App Count: 0", 0, "Uptime: 1:32:43<br/>Zombie Count: 0 "],["1:33:03", 0, "Uptime: 1:33:03<br/>App Count: 0", 0, "Uptime: 1:33:03<br/>Zombie Count: 0 "],["1:33:23", 0, "Uptime: 1:33:23<br/>App Count: 0", 0, "Uptime: 1:33:23<br/>Zombie Count: 0 "],["1:33:43", 0, "Uptime: 1:33:43<br/>App Count: 0", 0, "Uptime: 1:33:43<br/>Zombie Count: 0 "],["1:34:03", 0, "Uptime: 1:34:03<br/>App Count: 0", 0, "Uptime: 1:34:03<br/>Zombie Count: 0 "],["1:34:23", 0, "Uptime: 1:34:23<br/>App Count: 0", 0, "Uptime: 1:34:23<br/>Zombie Count: 0 "],["1:34:43", 0, "Uptime: 1:34:43<br/>App Count: 0", 0, "Uptime: 1:34:43<br/>Zombie Count: 0 "],["1:35:03", 0, "Uptime: 1:35:03<br/>App Count: 0", 0, "Uptime: 1:35:03<br/>Zombie Count: 0 "],["1:35:23", 0, "Uptime: 1:35:23<br/>App Count: 0", 0, "Uptime: 1:35:23<br/>Zombie Count: 0 "],["1:35:43", 0, "Uptime: 1:35:43<br/>App Count: 0", 0, "Uptime: 1:35:43<br/>Zombie Count: 0 "],["1:36:03", 0, "Uptime: 1:36:03<br/>App Count: 0", 0, "Uptime: 1:36:03<br/>Zombie Count: 0 "]]}, {data: [["1:19:33", 0, "Uptime: 1:19:33<br/>App Count: 0", 0, "Uptime: 1:19:33<br/>Zombie Count: 0 "],["1:19:53", 0, "Uptime: 1:19:53<br/>App Count: 0", 0, "Uptime: 1:19:53<br/>Zombie Count: 0 "],["1:20:13", 0, "Uptime: 1:20:13<br/>App Count: 0", 0, "Uptime: 1:20:13<br/>Zombie Count: 0 "],["1:20:33", 0, "Uptime: 1:20:33<br/>App Count: 0", 0, "Uptime: 1:20:33<br/>Zombie Count: 0 "],["1:20:53", 0, "Uptime: 1:20:53<br/>App Count: 0", 0, "Uptime: 1:20:53<br/>Zombie Count: 0 "],["1:21:13", 19, "Uptime: 1:21:13<br/>App Count: 19", 0, "Uptime: 1:21:13<br/>Zombie Count: 0 "],["1:21:33", 49, "Uptime: 1:21:33<br/>App Count: 49", 30, "Uptime: 1:21:33<br/>Zombie Count: 30 (braiiiins!)"],["1:21:53", 51, "Uptime: 1:21:53<br/>App Count: 51", 30, "Uptime: 1:21:53<br/>Zombie Count: 30 (braiiiins!)"],["1:22:13", 49, "Uptime: 1:22:13<br/>App Count: 49", 28, "Uptime: 1:22:13<br/>Zombie Count: 28 (braiiiins!)"],["1:22:33", 53, "Uptime: 1:22:33<br/>App Count: 53", 29, "Uptime: 1:22:33<br/>Zombie Count: 29 (braiiiins!)"],["1:22:53", 49, "Uptime: 1:22:53<br/>App Count: 49", 29, "Uptime: 1:22:53<br/>Zombie Count: 29 (braiiiins!)"],["1:23:13", 52, "Uptime: 1:23:13<br/>App Count: 52", 31, "Uptime: 1:23:13<br/>Zombie Count: 31 (braiiiins!)"],["1:23:33", 53, "Uptime: 1:23:33<br/>App Count: 53", 29, "Uptime: 1:23:33<br/>Zombie Count: 29 (braiiiins!)"],["1:23:53", 51, "Uptime: 1:23:53<br/>App Count: 51", 30, "Uptime: 1:23:53<br/>Zombie Count: 30 (braiiiins!)"],["1:24:13", 49, "Uptime: 1:24:13<br/>App Count: 49", 29, "Uptime: 1:24:13<br/>Zombie Count: 29 (braiiiins!)"],["1:24:33", 48, "Uptime: 1:24:33<br/>App Count: 48", 27, "Uptime: 1:24:33<br/>Zombie Count: 27 (braiiiins!)"],["1:24:53", 53, "Uptime: 1:24:53<br/>App Count: 53", 31, "Uptime: 1:24:53<br/>Zombie Count: 31 (braiiiins!)"],["1:25:13", 52, "Uptime: 1:25:13<br/>App Count: 52", 31, "Uptime: 1:25:13<br/>Zombie Count: 31 (braiiiins!)"],["1:25:34", 52, "Uptime: 1:25:34<br/>App Count: 52", 28, "Uptime: 1:25:34<br/>Zombie Count: 28 (braiiiins!)"],["1:25:54", 51, "Uptime: 1:25:54<br/>App Count: 51", 28, "Uptime: 1:25:54<br/>Zombie Count: 28 (braiiiins!)"],["1:26:14", 35, "Uptime: 1:26:14<br/>App Count: 35", 30, "Uptime: 1:26:14<br/>Zombie Count: 30 (braiiiins!)"],["1:26:34", 0, "Uptime: 1:26:34<br/>App Count: 0", 0, "Uptime: 1:26:34<br/>Zombie Count: 0 "],["1:26:54", 0, "Uptime: 1:26:54<br/>App Count: 0", 0, "Uptime: 1:26:54<br/>Zombie Count: 0 "],["1:27:14", 0, "Uptime: 1:27:14<br/>App Count: 0", 0, "Uptime: 1:27:14<br/>Zombie Count: 0 "],["1:27:34", 0, "Uptime: 1:27:34<br/>App Count: 0", 0, "Uptime: 1:27:34<br/>Zombie Count: 0 "],["1:27:54", 0, "Uptime: 1:27:54<br/>App Count: 0", 0, "Uptime: 1:27:54<br/>Zombie Count: 0 "],["1:28:14", 0, "Uptime: 1:28:14<br/>App Count: 0", 0, "Uptime: 1:28:14<br/>Zombie Count: 0 "],["1:28:34", 0, "Uptime: 1:28:34<br/>App Count: 0", 0, "Uptime: 1:28:34<br/>Zombie Count: 0 "],["1:28:54", 0, "Uptime: 1:28:54<br/>App Count: 0", 0, "Uptime: 1:28:54<br/>Zombie Count: 0 "],["1:29:14", 0, "Uptime: 1:29:14<br/>App Count: 0", 0, "Uptime: 1:29:14<br/>Zombie Count: 0 "],["1:29:34", 0, "Uptime: 1:29:34<br/>App Count: 0", 0, "Uptime: 1:29:34<br/>Zombie Count: 0 "],["1:29:54", 0, "Uptime: 1:29:54<br/>App Count: 0", 0, "Uptime: 1:29:54<br/>Zombie Count: 0 "],["1:30:14", 0, "Uptime: 1:30:14<br/>App Count: 0", 0, "Uptime: 1:30:14<br/>Zombie Count: 0 "],["1:30:34", 0, "Uptime: 1:30:34<br/>App Count: 0", 0, "Uptime: 1:30:34<br/>Zombie Count: 0 "],["1:30:54", 0, "Uptime: 1:30:54<br/>App Count: 0", 0, "Uptime: 1:30:54<br/>Zombie Count: 0 "],["1:31:14", 0, "Uptime: 1:31:14<br/>App Count: 0", 0, "Uptime: 1:31:14<br/>Zombie Count: 0 "]]}];
xAxisView.forEach(function (r) {
k = 0;
r.data.forEach(function (d) {
d[0] = ++k;
});
});
function drawChart() {
// Create data table for Release version.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Tick');
data.addColumn('number', 'Apps1');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addColumn('number', 'Zombies1');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addRows(xAxisView[0].data);
//Create Data table for Golden version
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'Tick');
data2.addColumn('number', 'App2');
data2.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data2.addColumn('number', 'Zombies2');
data2.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data2.addRows(xAxisView[1].data);
// Set additional chart options
var myOptions = Object.assign({}, commonOptions);
myOptions.pointSize = 3;
myOptions.hAxis['showTextEvery'] =1;
myOptions.vAxis['viewWindow'] = {};
myOptions.vAxis['format'] = "###";
myOptions.vAxis['minValue'] = 0;
myOptions.vAxis['maxValue'] = 5;
myOptions.interpolateNulls = true;
// include all columns
var joinedData = google.visualization.data.join(data, data2, 'full', [[0,0]], [1, 2, 3, 4], [1, 2, 3, 4]);
var lineChart = new google.visualization.LineChart(document.querySelector('#chart_div'));
lineChart.draw(joinedData, myOptions);
}
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>来源：https://stackoverflow.com/questions/46293809/google-chart-with-5-columns-with-data-join-method