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.
Related
I'm very new to Webflow. I am somewhat familiar with CSS and web design concepts.
I downloaded one of the clonable templates to use as a practice:
https://webflow.com/made-in-webflow/website/Spaces-Urbanistic
With this template, I try to replace the logo image on the upper left.
I have a colorful webpage logo and inside the designer, I see all the colors.
When I click on preview, the logo turns into a grayscale image.
Webflow has Effects option that I could enable, but it is currently set to off, for Logo image element as well as all parent nodes up to the body tag.
When I inspect the logo in chrome dev tools, the immediate parent has this CSS:
element.style {
filter: invert(100%)
grayscale(100%)
contrast(128%);
}
My question is, where do those filter parameters are stored in webflow interface, if not under Style->Effects->Filters? Is there any other place I don't yet know about where the above code can be injected?
Thank you,
edit-1: I just noticed this code on top of the main HTML file:
Still, doesn't help me to identify where this code comes from. Thank you,
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
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'))
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.
I built a round rectangle in Expression Blend, and would like to bring it into Expression Web as a background for my #welcometext div. I want to be able to position it and then add text over it.
I brought it in with CSS but it's too big, how can I resize it to fit the div?
Thanks
Sounds more like a job for CSS than an image. The following website provides a way of automatically generating suitable backgrounds:
http://www.roundedcornr.com/