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).
Related
is there any way of using custom icons in primereact tree? I've tried importing them in css file and using them like that but it did not work.
Here is a sample of json file with primereact icon usage.
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "pi pi-fw pi-cog"
Icon usage in css
.myIcon {
background-image: url('imgpath');
}
Here is a sample of json file with custom icon usage
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "myIcon"
Would really appreciate help with this one
EDIT:
So I've managed to solve this problem by replacing background-image with content.
Css below:
.m-icon {
content: url("../images/module.png");
}
I've managed to solve this problem by replacing background-image with content.
Css below:
.m-icon {
content: url("../images/module.png");
}
I need to integrate map chart using fusion chart library in my react application. after install fusion chart library through yarn configured component including fusion chart library, but when i render the map chart it shows me below error
After having error i just watch the node modules and check the existence of file, but seems like its not there, but my fusion chart installed successfully with no error then how this happened?
Here is my code
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);
class MapChart extends Component {
state = {
dataSource: {
"chart": {
showCanvasBorder: true,
canvasBorderColor: "#000000",
canvasBorderThickness: 1,
showBorder: true,
borderColor: "#000000",
fillColor: "#f1f1f1",
caption: "* USA traffic not displayed on Heat Map",
includevalueinlabels: "1",
showHoverEffect: false,
showEntityHoverEffect: false,
theme: "fusion",
},
data: [
{
"id": "27",
"value": "8",
"color" : "#f65122"
},
{
"id": "159",
"value": "3",
"color" : "#fcc50b"
},
{
"id": "142",
"value": "3",
"color" : "#f65122"
},
{
"id": "141",
"value": "9",
"color" : "#f3172d"
},
{
"id": "173",
"value": "9",
"color" : "#f3172d"
},
{
"id": "113",
"value": "5",
"color" : "#f65122"
},
{
"id": "193",
"value": "5",
"color" : "#f65122"
},
{
"id": "122",
"value": "9",
"color" : "#f65122"
}
]
}
}
render() {
return (
<React.Fragment>
<div style={{ width: '100%', margin: '20px', textAlign: 'center' }}><button><Link to="/">Back to home</Link></button></div>
<div style={{ textAlign: 'center' }}>
<ReactFC
type="worldwithcountries"
width="80%"
height="500"
dataFormat="JSON"
dataSource={this.state.dataSource} />
</div>
</React.Fragment>);
}
}
export default MapChart;
Any help on this issue would be greatly appreciated. Thanks!
Fusion Maps XT offers interactive maps to plot geographical data like revenue by regions, population by state, survey and election results effectively. You can also drop markers on the map to pinpoint places like office locations and flight routes. It has over 1000 maps including all continents, major countries and all the US states.
Fusion chart library initially not provided any collection of maps. Whenever you install fusion chart library on initial base it has only few maps file in map folder of package. Due to that reason you're file is not available in the whole package. They provided the link on their official page for download all the map related to fusion map chart.
To render these maps, you need to download the map definition files from here and copy-paste the maps folder within your fusion charts directory.
Please follow the steps
open link https://www.fusioncharts.com/download/map-definition-files
click on Download Map Definition Files(https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip) which contains collection of all the maps available in Fusion Maps XTall the maps available in Fusion Maps XT
after download copy the /maps folder from this download package and paste it in your fusion charts folder.
now run you're existing application the file will be found and your react application will work as expected.
Every information already defined on it official site of fusion chart but not in proper way so with the help of link which earlier defined you'll be directly redirect to that instruction page.
On GitHub i created one repository with map chart using fusionchart library, so you can download that repository and check exact functionality of map chart.
GitHub Repository
Since you are rendering the world with countries map in your app, you need to import fusioncharts.worldwithcounties.js, however, if you install FusionCharts via npm it does not have worldwithcountries file in the map folder, to get the file you need to install fusionmaps, here is the link - https://www.npmjs.com/package/fusionmaps
This will install all the map definition files, then you can use the following command:
import World from 'fusionmaps/maps/fusioncharts.worldwithcountries';
I have developed an app and it is functioning properly, however when it comes to designing, i am unable to achieve what is given in the example despite of doing the same code in the example. I want to achieve this design where image is in the center with title above and description down but what I am getting is this, side image, side title and description down. Please let me know how to achieve that. Here is my sample of my code
"response" : {
"outputSpeech" : {
"type" : "SSML",
"ssml" : "<speak>Hello,welcome!</speak>"
},
"card": {
"type": "Standard",
"title": "My Title",
"text": "My description",
"image": {
"smallImageUrl": "small image with the width 720 and height 480",
"largeImageUrl": "large image with the width 1200 and height=800"
}
},
"reprompt": {
"outputSpeech": {
"type": "SSML",
"ssml": "<speak>I am waiting for your command!!</speak>"
}
},
"shouldEndSession" : false
}
It looks like Amazon has changed the Standard Card layout. Images are now shrinked and pushed to the left. The examples shown in current documentation on Cards have the new layout. The blog post you are referring is more than one and half years old
Please see the plunker http://plnkr.co/edit/tO5IgK2Bcx5fDKXCkFgH?p=preview. Initially there are so many repetitions of x-ticks for the same data value. Then, when I select Date Range slider, main chart x-ticks are getting changed to some peculiar dates like 01/01/70, etc. Purposely I have given small data set. Even though the data is in standard format lineWithFocusChart is not working properly, how can fix this? Is it a bug in nvd3 lineWithFocusChart?
$scope.data = [
{
"values": [
{
"series": 0,
"y": 0.3,
"x": 1394841600000
},
{
"series": 0,
"y": 0.3,
"x": 1394928000000
}
],
"key": "ABC"
}
];
Note : I have commented large data set in my plunker. For large data set lineWithFocusChart is working fine.
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]]
}