Related
By using plotly, I am creating my analytics dashboard which has pie, bar and different kind of charts. I have a pie chart which has huge data and legends nearly more than 60. It's rendering properly in browser(bigger screen) problem is with the mobile screens. Chart legends are overlapping the actual chart.I am expecting to show chart as like below in mobile screens. Can anyone help me on this.
My Json looks like below.
{
"data": [{
"values": [1058,177,75,53,28,23,15,8,7,6,5,5,2,2,1,1,1,1,1,1,0],
"labels": ["Vision Corporation","Corporate Human Resources","Human Resources-West","Human Resources-East","Human Resources-Central","Recruiting-East","Human Resources","Recruiting-South","Payroll","Recruiting-West","Human Resources-South","Recruiting-Central","200-Human Resources","Direction des Ressources Humaines","Accounts Payable","Commercial Sales","Commercial Sales-West","Services-East","Vision Australia","Vision Industries","Others"],
"type": "pie",
"textposition":"inside"
}],
"linked": {
"layout": {
"legend":{
"orientation": "h",
"x": 1.02,
"xanchor": "center",
"y": 1.0,
"yanchor": "bottom"
},
"margin":{
"l": 0
}
}
}
}
Disclaimer: have not tried this on mobile. However, I had a similar issue on the browser (huge legend) - and the following did solve the issue:
You can control the size of the chart. By increasing the height property, you will leave more room for your legend.
Add a 'height' property under the 'layout' object, and play with the sizing to fit your data -
"layout": {
"height": 1000, ...
You can also add a width property if needed. See an example here (not in JSON, but the properties are clear).
Just started using Quill and find it very useful. My projects require plain text editing. Specifically I'm using quill as a form to enter YAML code. The dash, "-", is a key item in YAML. The problem is Quill automatically formats the line as a bullet.
Is there a way to disable automatic bullets?
Kevin
As mentioned in the comments, whitelist things you'll allow in the "formats" option (not the toolbar area)
var editor = new quill("#someElemId", {
modules: {
toolbar: [
'bold',
//{ 'list': 'bullet' },
{ 'indent': '-1'},
{ 'indent': '+1' },
{ 'color': ['black', 'red', 'blue', 'green'] },
'link',
'clean'
]
},
formats : [
"background",
"bold",
"color",
"font",
"code",
"italic",
"link",
"size",
"strike",
"script",
"underline",
"blockquote",
// "header",
"indent",
// "list", <-- commented-out to suppress auto bullets
"align",
"direction",
"code-block",
"formula",
"image",
"video"
],
theme: 'snow', // snow bubble
});
Quill's built in Keyboard module is responsible for auto formatting lists. You can override or disable this behavior by importing and extending the keyboard module like so.
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: undefined,
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
If you still list detection for other input ("* " for example), you can change the regex that the 'list autofill' binding matches like so
var Keyboard = Quill.import('modules/keyboard');
class CustomKeyboard extends Keyboard {
static DEFAULTS = {
...Keyboard.DEFAULTS,
bindings: {
...Keyboard.DEFAULTS.bindings,
['list autofill']: {
...Keyboard.DEFAULTS.bindings['list autofill'],
prefix: /^\s*?(\d+\.|\*|\[ ?\]|\[x\])$/
},
}
}
}
Quill.register('modules/keyboard', CustomKeyboard);
Here is a working example: https://codepen.io/josephdangerstewart/pen/dyNEGoj
Further documentation on Modules can be found on the Quill website: https://quilljs.com/docs/modules/#extending
Looking at https://quilljs.com/docs/formats/ there doesn't appear to be a way to disable a specific format, but you may be able to simply create a list of all formats and remove the list format.
Just write:
modules: {
keyboard: {
bindings: {
'list autofill': {
prefix: /^\s*()$/
}
}
}
}
This will ignore automatically ordered lists.
However, you still use bullets manually, by clicking the indent command or using the tab key.
Is there anyway to get a pulldown menu of States with Google Maps?
I am interested in having the map center on a State from a pull down, sort of like this:
http://www.dyngeometry.com/web/WorldRegion.aspx
Thanks!
You could have a pre-populated list of states (and countries and their corresponding hierarchy, if you need more than one country and other administrative levels). Use the google maps geocoding api to get the bounding box and the center it using the location of the state that is returned.
So for California it would look something like:
Request:
https://maps.googleapis.com/maps/api/geocode/json?address=CA&key=your_key_here
Response:
{
results:[
{
address_components:[
{
long_name:"California",
short_name:"CA",
types:[
"administrative_area_level_1",
"political"
]
},
{
long_name:"United States",
short_name:"US",
types:[
"country",
"political"
]
}
],
formatted_address:"California, USA",
geometry:{
bounds:{
northeast:{
lat:42.0095169,
lng:-114.1313927
},
southwest:{
lat:32.5342622,
lng:-124.415165
}
},
location:{
lat:36.778261,
lng:-119.4179324
},
location_type:"APPROXIMATE",
viewport:{
northeast:{
lat:42.0095169,
lng:-114.1313927
},
southwest:{
lat:32.5342622,
lng:-124.415165
}
}
},
place_id:"ChIJPV4oX_65j4ARVW8IJ6IJUYs",
types:[
"administrative_area_level_1",
"political"
]
}
],
status:"OK"
}
I am trying to display math-equations in a Sencha view component (extends: Ext.Container), using a Ext.Label Component and MathJax JS. (As was suggested answering my other question: Display math symbols in Ext.js / Sencha Touch)
This is the initialization of the view component:
Ext.define('TIQuiz3.view.Question', {
extend: 'Ext.Container',
...
requires: ['Ext.Label', ...],
config: {
fullscreen: true,
...
layout: {
type: 'vbox',
align: 'stretch'
}
},
initialize: function() {
this.callParent();
...
var questionLabel = {
xtype: 'label',
style: {
'border':'1px solid black',
'background':'white'
},
margin: 10,
padding: 10,
html: "<div>Es sei $L = \{011, 01, 11, 100\}$ \"uber dem Alphabet $\Sigma = \{0,1\}$.</div>",
flex: 1
};
...
this.add([...,questionLabel,...]);
}
I have included a local copy of MathJAX in the app.json file:
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "resources/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML",
"update": "delta"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
],
MathJax indicates to be loaded successfully.
But the output of the label does not display math properly. Instead it simply looks like this:
Es sei $L = {011, 01, 11, 100}$ "uber dem Alphabet $Sigma = {0,1}$.
Is displaying math with MathJax and HTML possible using a Sencha Label Component?
Any advice appreciated!
Thanks,
Thomas
Ok, thanks Peter, that brought me to the solution.
The problem was indeed the rendering of the content after the onload-event of the page.
For these cases MathJax holds a method to invoke the typesetting manually at a later time. So what I did was adding the following afterPainted-Listener to the rendered view component:
listeners : {
order : 'after',
painted : function() {
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}
Note that, as Peter pointed out, in order for the upper to work one has to configure $ to be accepted as math delimiter from MathJax - which is not default behaviour.
Thanks for the advice!
I am using Shield UI Chart where I have a chart with bars and some data.
dataSeries: [
{
seriesType: 'bar',
collectionAlias:'Total Visits',
data: [565000, 630400, 743000, 910200, 1170200, 1383000]
},
{
seriesType: 'bar',
collectionAlias: 'Unique Visits',
data: [152000, 234000, 123000, 348000, 167000, 283000]
}
]
The chart is woring fine, however when I try to use same data for range bar, there is nothing shown. Why is that? What could be the problem, since there are other chart types, where I just change the type and the data is displayed?
dataSeries: [
{
seriesType: 'rangebar',
collectionAlias:'Total Visits',
data: [565000, 630400, 743000, 910200, 1170200, 1383000]
},
{
seriesType: 'rangebar',
collectionAlias: 'Unique Visits',
data: [152000, 234000, 123000, 348000, 167000, 283000]
}
]
There is the possibility to just change the chart type and to have the data displayed in the now layout. However you need to consider where the data types are compatible or not. Bar charts are intended to show single values e.g. 1,2,3,4 and so on. While the range bar's data values come in pairs. Look at the code below:
{
seriesType: 'rangebar',
data: [[0.75, 0.79], [0.95, 1.03], [0.70, 0.79], [0.65, 0.70], [0.5, 0.69], [0.77, 0.89], [0.79, 0.87], [0.55, 0.89], [0.65, 0.99]]
}