I've had success with displaying box plots on Highcharts using a CSV file, but now I'm trying to display another csv file as a scatter plot on the same chart, and I don't know how.
Here's my code that works for the boxplot:
<!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script src = "https://code.jquery.com/jquery-1.12.4.js"></script> <script src = "https://code.highcharts.com/highcharts.js"></script> <script src = "https://code.highcharts.com/highcharts-more.js"></script> <script src = "https://code.highcharts.com/modules/exporting.js"></script> <script src= "https://code.highcharts.com/modules/data.js"></script> <script type = "text/javascript"> $(document).ready(function() { $.get('850_temp2.csv', function(csv) { var lines = csv.split('\n'); //alert(lines[1]); $('#container').highcharts({ chart: { type: 'boxplot' }, data: { //firstRowAsNames: false, //startRow: 2, //endRow: 15, csv: csv }, title: { text: '850mb temps' }, xaxis: { categories: [] }, yaxis: { title: { text: 'Units' } }, yAxis: { plotLines: [{ color: 'darkblue', width: 2, value: 3.5, zIndex: 100, label: { text: '<b>Crater Lake</b>' } }, { color: 'darkblue', width: 2, value: 1, zIndex: 100, label: { text: '<h2><b>Lake of the Woods</b></h2>' } }, { color: 'darkblue', width: 2, value: 0, zIndex: 100, label: { text: '<h2><b>Siskiyou Summit</b></h2>' } }, { color: 'darkblue', width: 2, value: -3, zIndex: 100, label: { text: '<h2><b>Sexton Pass</b></h2>' } }, { color: 'darkblue', width: 2, value: -5, zIndex: 100, label: { text: '<h2><b>Medford</b></h2>' } }] } }); }); }); //$('#container').highcharts(Highcharts.merge(options)); //options.data.switchRowsAndColumns = !options.data.switchRowsAndColumns; </script> </head> <body> <div id = "container" style="width:1100px; height: 700px; margin: 0 auto"> </div> </body> </html>And here's my code I'm trying to use to display the 2nd CSV file. I've looked all over, and I can't find something that addresses this. Here are the csv files.
850_temp2.csv
hour,one,two,three,four,five 0,3.0, 4.0, 5.0, 2.0, 5.0 6,2, -1.0, 0.0, -3.0, 2.0 12,4.0, 4.0, 5.0, 6.0, 7.0 18,13.0, 12.0, 11.0, 10.0, 10.0 24,13.0, 13.0, 12.0, 11.0, 6.0 30,8.0, 8.0, 8.0, 9.0, 11.0 and precp.csv
hour,one,two,three,four,five 0,0.0, 0.4, 0.3, 0.6, 0.4 6,0.6, 0.4, 0.5, 0.6, 0.7 12,0.1, 0.1, 0.05, 0.04, 0.03 18,0.0, 0.0, 0.0, 0.03, 0.02 24,0.0, 0.0, 0.0, 0.0, 0.0 30,0.0, 0.0, 0.0, 0.0, 0.0 Thanks for any help.
<!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script src = "https://code.jquery.com/jquery-1.12.4.js"></script> <script src = "https://code.highcharts.com/highcharts.js"></script> <script src = "https://code.highcharts.com/highcharts-more.js"></script> <script src = "https://code.highcharts.com/modules/exporting.js"></script> <script src= "https://code.highcharts.com/modules/data.js"></script> <script type = "text/javascript"> $(document).ready(function() { $.get('850_temp2.csv', function(csv) { $.get('precp.csv', function(csv2) { var lines = csv2.split('\n'); alert(lines[1]); $('#container').highcharts({ yAxis: { plotLines: [{ color: 'darkblue', width: 2, value: 3.5, zIndex: 100, label: { text: '<b>Crater Lake</b>' } }, { color: 'darkblue', width: 2, value: 1, zIndex: 100, label: { text: '<h2><b>Lake of the Woods</b></h2>' } }, { color: 'darkblue', width: 2, value: 0, zIndex: 100, label: { text: '<h2><b>Siskiyou Summit</b></h2>' } }, { color: 'darkblue', width: 2, value: -3, zIndex: 100, label: { text: '<h2><b>Sexton Pass</b></h2>' } }, { color: 'darkblue', width: 2, value: -5, zIndex: 100, label: { text: '<h2><b>Medford</b></h2>' } }] }, //y axis close series: [{ type: 'line', name: 'pcpn', data: csv2 },{ type: 'boxplot', name: '850mbT', data: csv }] }); //highcharts container close }); //precip csv close }); //850temp csv close }); //document ready close //$('#container').highcharts(Highcharts.merge(options)); //options.data.switchRowsAndColumns = !options.data.switchRowsAndColumns; </script> </head> <body> <div id = "container" style="width:1100px; height: 700px; margin: 0 auto"> </div> </body> </html>Essentially, I want to plot these two chart types, but on the same chart. I'll of course need to add a second y axis that applies to the scatter plot values.
0 comments:
Post a Comment