This might be a very particular use case but I have a React app which uses Victory Charts. I need to get a screenshot of the chart and export it as a png.
I have done some research and here are some ideas that I have so far:
Export it using some functionality within victory.js itself. The closest I could get is: https://github.com/FormidableLabs/victory/issues/781#event-1281057513 But this approach doesn't work. I've tested it. It gives me a reference to the Chart's container though which might be useful.
Use some 'screenshot' library I tried saveSvgAsPng and made this: https://codesandbox.io/s/victory-chart-to-png-k9zo8 But this doesn't work too and I can't figure out why not.
Use some sort of implementation using D3.js upon which victory charts is built. But I have no idea how to do that too.
If you guys have any idea about how this sort of thing can be done, please let me know.
In order to saveSvgAsPng to work, you have to pass an <SVG> element to it.
After reviewing your code at https://codesandbox.io/s/victory-chart-to-png-k9zo8, you evidently passed a Container element to it.
There this.state.ref refers to the Container element but not the <SVG> element. Change this.state.ref to this.state.ref.firstChild which refers to the <SVG> element in the container. And the library works like a charm in downloading the SVG as PNG.
Related
I'm looking to add segment analytics to my JupyterLab extension. No worries if you've never heard of a JupyterLab extension - the best way to think about it: I get control over a single node in the DOM where I can place some HTML, so I'm doing the following:
function Welcome(props) {return <h1>Hello</h1>;}
ReactDOM.render(<Welcome/>, dom_element_i_control)
This all works fine - I'm now looking to add some analytics code to this. For example, I'd like to be able to:
See when my code is rendered
See when someone interacts with my rendered element (e.g. if there was a button in the Welcome function, when the user clicked on it).
However, segment is a JS library that is delivered as a script that you load into a webpage at the top in a string tag like:
<script>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&...}}();
</script>
Where would I even put this code? I don't have control over the larger page + HTML, so I'm not sure where I can slap this so I can start using analytics.
Thanks for any information!
My workaround:
Instead of using the above linked segment script, I used the analytics-node package from segment.
I create an Analytics object right before ReactDOM.render - and then can use it wherever I want :)
Note that this will not work for anyone who uses an add blocker, obviously!
I'm trying to get data from a Highchart, but I only have a "None" value.
The chart needs a password to be accessed, but I have the same problem with the chart on this page.
Using the browser's DevTools I can get the y value from highchart using:
Highcharts.charts[0].series[0].data[0].y
Thus, combining this code with a loop structure I can have all the y values.
The problem is when I try to use Selenium to webscraping those values. I'm using the code below
page.execute_script('Highcharts.charts[0].series[0].data[0].y')
The answer I expect is 2 (as in DevTools), but instead I'm getting "None" as answer.
I already tried to use Beautifulsoup to retrieve the y value from the <path> tag, but it doesn't meet the expected value.
The HTML source seems to be complex (I'm not expert in these area). The full xpath of the <svg> is:
/html/body/form/div[3]/div[2]/div[2]/section/div/div/div[2]/div/section/div/div/div/div[2]/div[2]/div[1]/div[2]/div/div/svg
Also, I can't find any <iframe>, which could be avoiding me from accessing the graph.
Does anyone knows what I'm doing wrong? (I'm beginner in this area, so let me know if any further information is necessary)
After a long time stuck in it, I figured out how to solve this problem.
My mistake is that I was sending to my browser, via selenium, the js script below to be executed.
page.execute_script('Highcharts.charts[0].series[0].data[0].y')
This code is working perfectly but it doesn't return to me any value. So, in order to have the y value (that is what I need), I just need to use a "return" in the previously code. The final code is
page.execute_script('return Highcharts.charts[0].series[0].data[0].y')
I'm not asking how to embed SVG file or image in React. I need a function of following type signature:
(source: string) => React.ReactNode
This function parse SVG source string and returns a React node. I really need this because I'm handling the output of Graphviz. And because I want to manipulate the resulting React node, dangerouslySetInnerHtml cannot meet my requirements.
Of course, I can parse the SVG source to SVGElement by DOMParser and then translate native SVGElement nodes into ReactElement. But this costs time. I wonder if anyone did this job before? I searched the whole Internet but gained nothing.
I don't know about performance. But maybe smth like https://github.com/egoist/svg-to-component or https://github.com/publitas/svg-to-react.
I'm trying to convert the Adjuster example mentioned here: http://agiletoolkit.org/learn/understand/view/interactive
into a View that is able to show me the next/previous picture of a list of given images.
I guess the number in the example could be an index into an array of pictures.
I'm just not sure how to provide the list of pictures, when all the code is put in init() for the View, so no way to give it the picturelist before that...
Should I use memorize/recall for this list also to prevent it getting lost upon reload ?
is there another example that might help me?
I think you what you are doing can be much easier done with a classic JavaScript Lightbox script. You would supply it list of images and it would show one full-screen.
If not, you can use this:
https://gist.github.com/romaninsh/7217119
This will give you slides similar to the ones on http://agiletech.ie/
Be advised that this code is a little old.
In sencha (http://www.sencha.com/products/extjs/) I was wondering is it possible if i can have a bar chart, or a pie chart and have the data exported? I would like to go back from a chart to a printed data in my hand.
** if i have a bar chart that has data already plotted on it and now i would like to get the x-axis in one column and have the y-axis in another column but i would like to have that exported so i can printed it out. I do not want the chart to be printed.
My question is: Is there a way to do that? and if so what is the code that is needed or used?
CAN I ALSO DO IT IN ZINGCHARTS.COM
what about zingcharts?? i have done my research and found that they have this code called zingchart.exec("yourChartId", "exportdata"); i just dont know how exactly to put it in my zingcharts.rendering function can i get help on that?
I see that this is an older question, but hopefully this will help you or someone else with a similar issue.
The ZingChart exportdata method doesn't actually go in the zingchart.render method, it's its own API method.
zingchart.exec('myChartDiv', 'exportdata', {
url : 'www.zingchart.com/resources/exportdataurl.php'
});
'myChartDiv' refers to the id given to the div in your page where your chart renders. You can either set the 'url' option in the export data method options, like I did above or you can set the 'exportdataurl'. The data is sent as POST data via HTTP.
Just to get the data? Sure.
Charts are populated by a store object, which is a container with all the data.
To get the data out of the store is pretty forward.
Eg:
store.each(function(store,record,e){console.log(record);});
You can probably use Export store to Excel user extension published on Sencha forum.