Google Charts: Adding points to a candlestick chart
Question
Created a candlestick chart of quartiles for chorusing frog activity. Trying to figure out how to add the actual data points to the chart (make it a combo chart).
Here is the code for the candlestick chart:
<!DOCTYPE html> <html lang="en"> <head><title> KHA </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['American Bullfrog (394)', 69, 137, 176, 225], ['American Toad (479)', 71, 99, 146, 187], ['Blanchards Cricket Frog (1476)', 78, 121, 168, 210], ['Boreal Chorus Frog (2410)', 55, 93, 160, 242], ['Chihuahuan Green Toad (24)', 124, 159, 188, 228], ['Crawfish Frog (212)', 67, 83, 111, 187], ['E. Narrow-mouthed Toad (32)', 142, 153, 200, 201], ['Gray Treefrog complex (721)', 74, 118, 169, 202], ['Great Plains Toad (212)', 85, 130, 174, 242], ['Plains Leopard Frog (638)', 70, 103, 163, 242], ['Plains Spadefoot (165)', 85, 129, 177, 225], ['Red-spotted Toad (9)', 154, 154, 165, 165], ['Southern Leopard Frog (344)', 55, 84, 144, 200], ['Spotted Chorus Frog (163)', 80, 111, 153, 239], ['Spring Peeper (116)', 41, 63, 102, 146], ['Streckers Chorus Frog (100)', 57, 84, 110, 149], ['W. Narrow-mouthed Toad (87)', 96, 151, 178, 211], ['Woodhouses Toad (553)', 83, 125, 173, 243], // Hope it works. ], true); var options = { legend: 'none', orientation: 'vertical', hAxis: { ticks: [{v:0, f:'Jan'},{v:31, f:'Feb'},{v:59, f:'Mar'},{v:90, f:'Apr'},{v:120, f:'May'},{v:151, f:'Jun'},{v:181, f:'Jul'},{v:212, f:'Aug'},{v:243, f:'Sep'},{v:273, f:'Oct'},{v:304, f:'Nov'},{v:334, f:'Dec'},{v:365, f:'|'}], textStyle: {fontSize: 13}}, vAxis: { textStyle: {fontSize: 13}}, chartArea:{top:10, height:580} }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div class="container-fluid"> <div class="container"> <div id="chart_div" style="width: 1200px; height: 620px;"></div> </div> </div> </body> </html>
I would like to add the underlying data (scatter chart with red points) over each associated candlestick chart. So that the user can better visualize the spread of the data, and ultimately identify outliers.
Here is the underlying data for the top three candlestick charts. [69, 78, 87, 91, 102, 109, 111, 112, 117, 118, 120, 126, 129, 131, 132, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 155, 156, 157, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 190, 198, 200, 203, 204, 207, 208, 212, 216, 225]
[71, 72, 74, 78, 80, 82, 83, 84, 85, 87, 88, 89, 90, 91, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 125, 127, 130, 131, 132, 133, 135, 137, 138, 140, 142, 143, 144, 146, 147, 149, 151, 152, 159, 161, 163, 164, 165, 168, 171, 172, 173, 175, 178, 181, 187]
[78, 88, 90, 94, 95, 96, 102, 103, 105, 106, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 187, 198, 199, 200, 201, 206, 207, 210]
Thank you for your help.
- Travis
1 answers
solution1
1 ACCPTED 2018-02-15 20:17:36
here's what i came up with...
add a new column to the data table for each scatter point...
var scatterSeries = [
[69, 78, 87, 91, 102, 109, 111, 112, 117, 118, 120, 126, 129, 131, 132, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 155, 156, 157, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 190, 198, 200, 203, 204, 207, 208, 212, 216, 225],
[71, 72, 74, 78, 80, 82, 83, 84, 85, 87, 88, 89, 90, 91, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 125, 127, 130, 131, 132, 133, 135, 137, 138, 140, 142, 143, 144, 146, 147, 149, 151, 152, 159, 161, 163, 164, 165, 168, 171, 172, 173, 175, 178, 181, 187],
[78, 88, 90, 94, 95, 96, 102, 103, 105, 106, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 187, 198, 199, 200, 201, 206, 207, 210]
];
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (scatterSeries.length > i) {
scatterSeries[i].forEach(function (y, index) {
var colIndex = data.addColumn('number', 'Scatter ' + index);
data.setValue(i, colIndex, y);
addSeries(data.getNumberOfColumns() - 5);
});
}
}
add a series option for each new column...
function addSeries(index) {
options.series[index] = {type: 'scatter', pointSize: 1};
}
by default, the chart will color each series differently,
to use the same color for all, add a 'style' column for each new series column
this can be done using a data view...
var viewColumns = [];
for (var col = 0; col < data.getNumberOfColumns(); col++) {
viewColumns.push(col);
if (data.getColumnLabel(col).indexOf('Scatter') > -1) {
viewColumns.push({
type: 'string',
role: 'style',
calc: function (dt, row) {
return 'red';
}
});
}
}
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);
see following working snippet...
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['American Bullfrog (394)', 69, 137, 176, 225], ['American Toad (479)', 71, 99, 146, 187], ['Blanchards Cricket Frog (1476)', 78, 121, 168, 210], ['Boreal Chorus Frog (2410)', 55, 93, 160, 242], ['Chihuahuan Green Toad (24)', 124, 159, 188, 228], ['Crawfish Frog (212)', 67, 83, 111, 187], ['E. Narrow-mouthed Toad (32)', 142, 153, 200, 201], ['Gray Treefrog complex (721)', 74, 118, 169, 202], ['Great Plains Toad (212)', 85, 130, 174, 242], ['Plains Leopard Frog (638)', 70, 103, 163, 242], ['Plains Spadefoot (165)', 85, 129, 177, 225], ['Red-spotted Toad (9)', 154, 154, 165, 165], ['Southern Leopard Frog (344)', 55, 84, 144, 200], ['Spotted Chorus Frog (163)', 80, 111, 153, 239], ['Spring Peeper (116)', 41, 63, 102, 146], ['Streckers Chorus Frog (100)', 57, 84, 110, 149], ['W. Narrow-mouthed Toad (87)', 96, 151, 178, 211], ['Woodhouses Toad (553)', 83, 125, 173, 243], ], true); var options = { legend: 'none', orientation: 'vertical', hAxis: { ticks: [{v:0, f:'Jan'},{v:31, f:'Feb'},{v:59, f:'Mar'},{v:90, f:'Apr'},{v:120, f:'May'},{v:151, f:'Jun'},{v:181, f:'Jul'},{v:212, f:'Aug'},{v:243, f:'Sep'},{v:273, f:'Oct'},{v:304, f:'Nov'},{v:334, f:'Dec'},{v:365, f:'|'}], textStyle: {fontSize: 13}}, vAxis: { textStyle: {fontSize: 13}}, chartArea:{bottom: 24, top: 10, height: '100%'}, series: {} }; var scatterSeries = [ [69, 78, 87, 91, 102, 109, 111, 112, 117, 118, 120, 126, 129, 131, 132, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 155, 156, 157, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 190, 198, 200, 203, 204, 207, 208, 212, 216, 225], [71, 72, 74, 78, 80, 82, 83, 84, 85, 87, 88, 89, 90, 91, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 125, 127, 130, 131, 132, 133, 135, 137, 138, 140, 142, 143, 144, 146, 147, 149, 151, 152, 159, 161, 163, 164, 165, 168, 171, 172, 173, 175, 178, 181, 187], [78, 88, 90, 94, 95, 96, 102, 103, 105, 106, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 187, 198, 199, 200, 201, 206, 207, 210] ]; for (var i = 0; i < data.getNumberOfRows(); i++) { if (scatterSeries.length > i) { scatterSeries[i].forEach(function (y, index) { var colIndex = data.addColumn('number', 'Scatter ' + index); data.setValue(i, colIndex, y); addSeries(data.getNumberOfColumns() - 5); }); } } var viewColumns = []; for (var col = 0; col < data.getNumberOfColumns(); col++) { viewColumns.push(col); if (data.getColumnLabel(col).indexOf('Scatter') > -1) { viewColumns.push({ type: 'string', role: 'style', calc: function (dt, row) { return 'red'; } }); } } var view = new google.visualization.DataView(data); view.setColumns(viewColumns); function addSeries(index) { options.series[index] = {type: 'scatter', pointSize: 1}; } var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(view, options); window.addEventListener('resize', function () { chart.draw(view, options); }, false); }
html, body { height: 100%; } #chart_div { height: 100%; }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.