I was wondering if some one could direct me how to test svg pie charts and graphs using protractor .
I have to read data on pie charts when hovered on it or read data on graphs when hovered to the data points .
The pie chart is very similar to following one except for the text data. CHeck 2D pie chart example: http://www.fusioncharts.com/charts/pie-doughnut-charts/
I get the data by xpath - though it's a bit different than normal. To get access to svg:
element(by.xpath('//*[name() = "svg"]//the rest of the path'))
Related
We have a selection of user charts.
When we use the standard highcharts export facility we have layout and font size issues: half the labels are missing and the font sizes and layout are way out of size.
I have read about altering the font sizes in the export settings but when I do this we loose our custom labels, they get replaced with numbers.
The users want a WYSIWYG export.
Here is a link to a fiddle :
`https://jsfiddle.net/spencerplanton/nd8ko93y/17/`
This has been lifted from a rather complicated dynamic chart application, so apologies for any verbose/redundant code.
In the real application we populate data from AJAX calls and allow the user to swap between data sets as well as allowing the user to see the data as either Pie, Bar or Line chart using our custom buttons. Drilldowns are used as well. I have trimmed the ajax data code and replaced it with static data but left the dynamic chart type swapping code and buttons. Without that there will be no way of testing whether any hint/solution/suggestion works with different chart types and the dynamic content/labels. Producing an over simplified test set of one particular iteration could lead to a solution that only fits that one scenario.
Any help formatting the PDF export labels would be greatly appreciated.
It is because Highcharts does not detect the width of the container.
What I can suggest is to set sourceHeight and sourceWidth to bigger values.
exporting: {
enabled: true,
sourceWidth: 1200,
sourceHeight: 600
},
See the demo, now chart looks much better in the PDF.
API: https://api.highcharts.com/highcharts/exporting.sourceWidth
Can we automate graphs generated using canvas tag for test automation in selenium using python?I want to extract the data points plotted on the graph.
You can using ocular ,if your graph is not dynamically changing for every second.
Through selenium we cannot automate graphs.
You can refer to http://www.testautomationguru.com/selenium-webdriver-how-to-automate-charts-and-graphs-validation/
you can embed ocular along with selenium code
I created a svg element with d3.js which contains some elements now i want to export it on button click as pdf. Does someone know how to approach this?
When I draw it in a canvas I only get a blank page.
You can use the cloudformatter scripts to convert d3 svg to pdf. See http://www.cloudformatter.com/css2pdf. There are several different examples there showing svg to pdf from various charting and visualization libraries.
Get their Javascript or link to it, its jQuery so you need jQuery. You can format the <div> containing the D3 generated SVG with on line. Assuming the <div>'s id is "d3donut":
return xepOnline.Formatter.Format('d3donut', {srctype:'svg',render:'download',filename:'d3donut'});
There are several other functions to embed, convert to image format or other print formats.
The d3 specific samples are at http://www.cloudformatter.com/CSS2Pdf.SVGCharts.d3Charts
I searched this questions with google and only got some answers for Highcharts or D3 graphs.
this demo is for Highcharts: http://jsfiddle.net/sJfuA/22/
Also, I found an example here: http://pentaho-bi-suite.blogspot.com/2014/08/dual-level-pie-chart-in-pentaho-cde.html, but I couldn't tweak the code to fit my purpose.
my use case
I create a pie chart with extension point options:
slice_innerRadiusEx: 50%
which is very similar to this demo: http://jsfiddle.net/make_dream/sugmyyto/, then I'm trying to put numbers in the center of of the pie(see previous demo, in the white area).
what I want
What I want is almost the same as this chart: http://bl.ocks.org/ckuijjer/6929969, but implement with the code snippet in the second jsfiddle demo.
I don't think that can be done via CCC configuration or extension points.
What people usually do is create a donut chart with a predefined empty space in the center, add a div on top of it and, e.g. using a text component, append whatever text you want in the center of the donut to that div.
The center text isn't really part of the donut, it's added by a separate component. Then it's a matter of crafting your CSS carefully to align the text with the center of the donut and not allow it to overflow its container.
I have a sliced pie chart.
I need to implement Click event on each slice to go other page.
Can any body tel me how to do this kind of clicks on the pie chart using dojo?
You should use actions for that. Read this article (linked from the official docs): http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
As always you can look at the code for standard actions in dojox/charting/action2d.