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
Related
I'm working on an app that uses Vue. It is a kind of document editor that allows editing of content.
There's a filmstrip in a sidebar displaying the entirety of the document, and a viewport in the center displaying the current page/spread.
On large documents with 100+ pages, I'd like to throttle the number of updates allowed through to the filmstrip component as it gets a little laggy on resize and when the JS controlled layouts in pages all have to resize simultaneously when global fields are changed etc.
There's a data structure representing the document's content, which is rendered by Vue components in the viewport and the filmstrip.
I could maintain two data structures and only update the data structure used in the filmstrip 1000ms after the last user interaction.
However, it feels like there could be a better way.
Vue has a directive called v-once, which looks promising, however, I can't find out if that can be set conditionally.
If I could, then I could set a timeout on change, and clear it if a change occurs before the timeout ends, and then momentarily unset v-once, then on next tick, add it back on again so that rendering pauses.
If there's a way of doing this, I'd love to know.
Here Proposal: Allowing v-once to accept a boolean flag is very clear, you can't set v-once dynamically. Also there is an example of one way to combine v-if and v-once to achieve the result you want.
Excerpt from the link
v-once is used for static content. v-once tell the compiler don't add any responsive functionalities to save cpu time. Otherwise, if the content is responsive, no methods could be used to save this kind of cpu time.
Hope it helped
I am trying to use cytoscape to replace my dot output and make it interactive (move nodes and compounds, expand/collapse compounds, etc.)
When a graph is first loaded, the user should be presented with a default layout though. However, I am struggling to find a layout/config that supports what dot calls rank.
In my graph I have compound nodes that represent components.
Components contain other components and/or states, transitions, variables.
Each component can specify inputs and outputs.
In dot I tried to add some form of flow within the system (rankdir=LR;) by positioning the inputs on the left (rank=source;) and the outputs on the right (rank=sink;).
Other elements have no rank and are hence freely positioned.
I then specified cluster subgraphs containing all recursive components.
Now, here is what I have in dot. I hope it explains what I would like to end up with.
First, I already saw this question, but as far as I understood it's for manual positioning, rather than layouts.
I haven't found a layout that fully supports positioning nodes within the compound.
I looked into using the cytoscape.js-cola layout with the following options:
layout: {
name: 'cola',
flow: { axis: 'y', minSeparation: 40 },
avoidOverlap: true
}
I ended up with this
As you can see, there is some flow, but not as nicely as in dot.
I tried adding some function for the alignment parameter, but as far as I understood I can only specify the absolute coordinates (e.g. return {'x': 0};). This basically allows me to align ALL inputs, rather than all inputs of a compound.
Here is a CodePen of my example to play around with: https://codepen.io/anon/pen/GEaOQQ
In the Javascript you can see the comments of
You could try Klay: https://github.com/cytoscape/cytoscape.js-klay
If any of the existing layouts don't meet your requirements, you can use any algorithm you'd like by writing a layout extension. You could port the exact layout you're using with dot/graphviz, if you like.
I am creating an app with some style differences in portrait-landscape rendering.
For example the navigation bar height can be different and there are several sizes that I want to keep under strict control to make sure certain control/text fit to screen without scrolling.
I am fine with calculating stylesheets dynamically or caching them with either own utilities or utilities like react-native-extended-stylesheet yet.. where to store the calculated sheets for portrait landscape?
Possible options
1. A module level variable in my style.js. Possibly calculated on demand and cached later. I'd need to pass screen size to it though
2. Make styles a part of a state and update it on orientation changes action
3. Anything else
What makes most sense? What do you use in your applications?
I think a stylesheet library should take care about caching styles for landscape/portrait layouts and developer should just write styles and component logic.
I'm working on it currently here: https://github.com/vitalets/react-native-extended-stylesheet/issues/9
Until it is ready I think the best option is to cache on module level.
const styleLandscape = ...
const stylePorttrait = ...
Putting styles into component state will mix it with logic data that seems not good.
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 recently stumbled upon this microsite from the Obama campaign:
http://www.barackobama.com/anniversary
Among the many cool features of this site is its dynamic header -- when you resize your browser window smaller, the "OBAMA * BIDEN" logo up top automatically floats to left side of the header and its width gets changed to 36px (thereby "hiding" the "OBAMA BIDEN" text).
How did the developers of this page achieve this effect? Is this javascript/jquery driven, or purely a CSS trick?
Ideas?
This question covers the window.resize event. You can do whatever you need in its handler.
Another option is to use media queries that allow you to change applied CSS once the browser window dimension changes (this is what the site you refer to does. It combines the style class changes with animations (use Chrome Developer Tools to see which styles get applied to the logo in both big and small browser dimensions)).