Python: Read data from Highcharts after setExtreme

I'm trying to get the data from a Highcharts chart using Selenium. The issue I have with this is that the setExtremes function does not work with .options.data. How can I read data after using setExtremes using purely Python-based methods?

My code:

capabilities = webdriver.DesiredCapabilities().FIREFOX capabilities["marionette"] = True driver = webdriver.Firefox(capabilities=capabilities, executable_path=gecko_binary_path) driver.get(website) time.sleep(5)  temp = driver.execute_script('return window.Highcharts.charts[0].series[0]'                              '.xAxis[0].setExtremes(Date.UTC(2017, 0, 7), Date.UTC(2017, 0, 8))'                              '.options.data'                             )  data = [item for item in temp] print(data) 

1 Answers

Answers 1

The problem is setExtremes(min, max) method returns undefined, so you can not chain options. Solution is to wrap this method and pass on context, for example:

(function(H) {   H.wrap(H.Axis.prototype, 'setExtremes', function (proceed) {     proceed.apply(this, Array.prototype.slice.call(arguments, 1);     return this; // <-- context for chaining   }); })(Highcharts); 

Now we can use:

return window.Highcharts.charts[0].xAxis[0].setExtremes(min, max).series[0].options.data; 

Note: The snippet can be placed in a separate file and used like any other Highcharts plugin (simply load after Highcharts library).

Important

Axis object has references only to series that are bound to this axis. If you want to access any series on the chart use:

return window.Highcharts.charts[0].xAxis[0].setExtremes(min, max).chart.series[0].options.data; 

Read More

Highstock/Highchart scatter points in combined graph

I am trying to plot a combination chart of a scatter and columnrange.

I am having issues with the scatter plot not showing correctly. The points seem to "stop" at a certain point after zooming in and scrolling.

https://codepen.io/moosejaw/pen/QavGgR?editors=0011

It must be related to the boost module?

I've tried enabling and disabling it.

boost: {     // enabled: false // works     enabled: true  // doesn't work } 

I know the boost module can handle the number of points, but I am confused on why their is a scrolling / placement issue.

Thanks for your time.

1 Answers

Answers 1

This issue happens only when the chart is inverted.

It's a bug reported on github: https://github.com/highcharts/highcharts/issues/4608

---

The workaround here is to create inverted chart manually (which can be done via chart options and preprocessing the data):

• Swap x and y values for all points
• Set reversed to true for the y axis (when chart is inverted it's set by default: https://api.highcharts.com/highcharts/chart.inverted)
• Swap formatting and zoom options for axes
• Handle the format of tooltip (tooltip.formatter may be useful)

Read More

World map paths data in react high charts

I am looking at the react highmaps documentation and it seems like they have hardcoded/saved the map data:

https://github.com/kirjs/react-highcharts https://github.com/kirjs/react-highcharts/tree/master/demo/src/mapdata

I see in a lot of little tutorials though that the data comes from high maps itself by just passing a key like this

mapData: Highcharts.maps['custom/world'], 

See example here: http://jsfiddle.net/gh/get/jquery/3.1.1/highcharts/highcharts/tree/master/samples/maps/tooltip/usehtml/

But given that I am writing a pure reactJS/ nodeJS app, I was wondering if there is a way in pure react to pull in the path data for world maps? Is this deployed to react high maps somewhere?

1 Answers

Answers 1

According the official Highcharts documentation you have to manualy include the map script:

In short, the GeoJSON version of the map is loaded in a script tag in the page. This GeoJSON object is then registered to the Highcharts.maps object, and applied to the mapData option in the chart setup.

As you can see in the fiddle you mentioned, they included the map with the script tag:

<script src="https://code.highcharts.com/mapdata/custom/world.js"></script> 

Because of the above script include, the map is available in Highcharts.maps['custom/world'].

So in the React module you have to manually add the desired maps, like in the demo you mentioned. For example, if you want to add the World map, then:

1. Get it from here: https://code.highcharts.com/mapdata/custom/world.js
2. Replace Highcharts.maps["custom/world"] = with module.exports = in the above file.
3. Load the map in your component const map = require('./maps/world');
4. Then you can reference it in the config mapData: map

I understand that you want to skip the above process, but currently there isn't any React module that includes the map.

---

Actually there is a hackish way you can do it ... In your html file, where the react scripts are included, there you can include world.js script tag, but first you have to make sure that Highcharts.maps object array exist. In that fashion you'll use the maps externally.

However this is a bad practice, because of your React's components will be dependend on that map script.

Good practice is to manage your vendor modules via package manager and reference the modules in the components. In that way the components are self-descriptive

Read More

Highcharts: multiple CSVs and multiple chart types

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 Answers

Read More

Highchart chart chopped on page break

I have a simple bar chart with many bars. I take the highcharts result and use wkhtmltopdf to generate a PDF with A4 page size.

The problem is that the page break always chops some results like this (detail of the page break):

How can I avoid it without having to split the data in two or more charts (paginate the chart)?

I thought about setting something like page-break-inside: avoid; to the bar (or even to the svg's rect), but I don't know how to do this in Highcharts.

Any ideas?

0 Answers

Read More