I'm using https://github.com/hustcc/echarts-for-react
Desktop:
Mobile
When you click on the Save Icon the chart will be saved as you see, on mobile you will have less items/information than a desktop version.
I'm now looking for a way to export the Pie with a specific resolution, my problem is on mobile phones the pie is so small you don't see anything and i want to give the user the possible to export a bigger chart with more info. (which happens when the chart would be rendered in a higher resolution like 1920x1080).
I found a workaround, but this seems not a good solution, is rendering the chart 2 times (1 time in the FHD) and hide the second one so I can get a big image with all info i want. (see function gettest()
The problem: background is transparency.
Im also looking for 2 possibles solutions.
1.: use the saveas or other to export/rerender in 1920x1080 or
2.: add a white background to my hidden chart to export it over the workaround
I would prefer solution 1 but in the docs i haven't found anything like this.
Thanks in advance.
const option = {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
toolbox: {
feature: {
saveAsImage: {
backgroundColor: '#fff'
}
}
},
series: [
{
name: '',
type: 'pie',
radius: window.innerWidth < 1366 ? '50%' : '90%',
data: [
{
"value": 190.77828000000002,
"name": "Xtrackers FTSE Vietnam Swap UCITS ETF 1C"
},
{
"value": 190.70976,
"name": "Franklin FTSE India UCITS ETF USD Acc"
},
{
"value": 190.848,
"name": "Xtrackers MSCI Thailand UCITS ETF 1C"
},
{
"value": 493.81046,
"name": "VanEck Video Gaming and eSports UCITS ETF A USD"
},
{
"value": 462.71727,
"name": "Global X Video Games & Esports UCITS ETF"
},
{
"value": 695.53755,
"name": "Vanguard FTSE All-World UCITS ETF"
},
{
"value": 1748.34265,
"name": "BASF"
},
{
"value": 1233.9791,
"name": "Niu Tech ADR-A"
},
{
"value": 377.74,
"name": "AT&T"
},
{
"value": 359.4,
"name": "Sixt SE Inhaber-Vorzugsakt. o.St.o.N."
},
{
"value": 735.0396000000001,
"name": "Mercedes-Benz Group AG Namens-Aktien o.N."
},
{
"value": 901.6200000000001,
"name": "Ströer SE & Co. KGaA Inhaber-Aktien o.N."
},
{
"value": 209.99468,
"name": "Covestro AG Inhaber-Aktien o.N."
},
{
"value": 280.64384,
"name": "British American Tobacco PLC Registered Shares LS -,25"
},
{
"value": 1776.78144,
"name": "Allianz SE vink.Namens-Aktien o.N."
},
{
"value": 1156.9427999999998,
"name": "Unilever PLC Registered Shares LS -,031111"
},
{
"value": 1328.84396,
"name": "HeidelbergCement AG Inhaber-Aktien o.N."
},
{
"value": 692.69928,
"name": "Volkswagen AG Vorzugsaktien o.St. o.N."
},
{
"value": 855.93475,
"name": "Deutsche Post AG Namens-Aktien o.N."
},
{
"value": 1327.5,
"name": "Daimler Truck"
},
{
"value": 745.01694,
"name": "Lang & Schwarz N"
},
{
"value": 324.2454,
"name": "GSK Rg"
}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
formatter: '{b}: {d}%'}
},
],
};
function gettest(){
const echartInstance = echartRef.current.getEchartsInstance();
const base64 = echartInstance.getDataURL();
var link = document.createElement("a");
link.download = "Chart";
link.href = base64;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
return (
<ReactECharts
option={option}
theme={"vintage"}
style={{ height: window.innerWidth < 1366 ? "200px" : "500px" }}/>
//my try with hidding the second chart where my background has transparency but i want white
<ReactECharts
option={option}
theme={"vintage"}
ref={(e) => { echartRef.current = e; }}
style={{ height: "1080px", width:"1920px", display:"none", backgroundColor:"red" }}/>
<div onClick={(e) => gettest(e)}>FHD Speichern</div>
)
Related
Using Vega-lite I'm creating a grouped bar chart where schools are grouped by a Size string variable on the x-axis. The Y-axis is quantitative. I have it almost working but currently each group is including a spot on the x-axis for every school, including ones that aren't in that group and therefore display no data.
For example:
How do I ensure that schools only show up in the category that they belong? All but one example I've found online doing this type of thing uses an older version of Vega-lite and trying to reverse engineer them has been fruitless.
var barGroupCreate = {
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { values: toolData },
config: { view: { stroke: "transparent" }, axis: { domainWidth: 1 } },
spacing: { column: 10 },
facet: {
column: {
field: "Size",
type: "nominal",
header: { orient: "bottom" },
},
},
spec: {
width: { step: 12 },
mark: "bar",
encoding: {
y: {
aggregate: "sum",
field: "Contact Hours (Total)",
title: "Contact Hours",
axis: { grid: false },
},
x: { field: "Name", axis: null },
color: {
field: "Size",
scale: {
range: [
"#002D74",
"#F26852",
"#2A7DE1",
"#FFD100",
"#00A9C5",
"#3A4A9F",
],
},
},
},
},
};
Sample of my data (toolData):
"values": [
{
"Name": "Alamo",
"Contact Hours (Total)": 19930352,
"Size": "Very large",
},
{
"Name": "Alvin",
"Contact Hours (Total)": 2211352,
"Size": "Medium",
},
{
"Name": "Amarillo",
"Contact Hours (Total)": 4363650,
"Success Points (Total)": 16945,
"Size": "Large",
},
{
"Name": "Angelina",
"Contact Hours (Total)": 1983398,
"Size": "Medium",
},
{
"Name": "Austin",
"Contact Hours (Total)": 14027493,
"Size": "Very large",
},
{
"Name": "Blinn",
"Contact Hours (Total)": 7594730,
"Size": "Large",
},
You can do this by adding
resolve: {scale: {x: "independent"}}
within barGroupCreate.
More information at https://vega.github.io/vega-lite/docs/facet.html#resolve
I need to group (and show) labels of X axis of a grahp, but still showing all single labels.
This is the code I actually use, and its a normal column2d graph:
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "column2d",
renderAt: "chart",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"animation": 0,
"caption": "Graph title",
"xAxisName": "Performance",
"baseFontColor": "#000000",
},
"data": [
{
"label": "351-08",
"value": "91"
},
{
"label": "351-09",
"value": "90"
},
{
"label": "351-10",
"value": "94"
},
{
"label": "351-01",
"value": "99"
},
{
"label": "351-07",
"value": "92"
},
{
"label": "351-06",
"value": "81"
},
],
"trendlines": [
{
"line": [
{
"startvalue": "82",
"color": "#ff3333",
"thickness": "5",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}
}).render();
});
What I need is showing another label on X axis that groups labels.
For example:
Group 1: [label1, label2];
Group 2: [label3, label4, label5];
Group 3: [label6];
UPDATED
I attached an image of what I need.
As you can see I need another labels line ("Fattore1", "Fattore2" and "Fattore3") that group other labels.
Is it possible to create an animation with D3.js (version 4)? In particular I want to create multiple line charts that "runs" from left to right like in this example with react-fusionchart:
http://jsfiddle.net/thadeuszlay/m18qaekm/12/
(just look at the example above.)
FusionCharts.ready(function () {
var myDataSource = {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "ocean"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Projected Revenue",
"renderas": "line",
"showvalues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
}]
};
var chartConfigs = {
id: "revenue-profits-chart",
renderAt: "revenue-profits-chart-container",
type: "mscombi2d",
width: 600,
height: 400,
dataFormat: "json",
dataSource: myDataSource
};
React.render( < react_fc.FusionCharts {...chartConfigs
}
/>,
document.getElementById("chart-container")
);
});
Yes you can do that: you just need to replace the methods that have changed from d3 v3 to v4, such as:
var parse = d3.timeParse("%b %Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
xAxis = d3.axisBottom(x).tickSize(-height),
yAxis = d3.axisLeft(y).tickArguments(4);
Etc. Etc.
You can find the working example on my bl.ocks.
My example is the v4 update of another bl.ocks.
Hope that helps.
I need some help in displaying the xaxis labels for a MSCombi3d chart. I have checked and for 2d charts, there are below two attributes available. which when we set in the chart, the x axis labels will display in a rotated format.
labelDisplay='Rotate' & slantLabels='1'
But when I try to use the above for a MScombi3d chart it doesnot work. I have gone through the documentation and could only find this attribute xLabelGap='50'. But it does not rotate/display the x axis labels in a slant.
Can someone please suggest the attribute that needs to be used for MSCombi3d charts to display the x axis labels in a slant.
Any help on this is much appreciated.
The attribute xLabelGap is perhaps a deprecated or at least not applicable in FusionCharts Javascript version. Although I found some usage of this attribute here, but nowhere in the official FusionCharts docs
I found the attributes labelDisplay and slantLabels in MSCombi3d charts(JS version) functional since its 3.4.0 version. Might work before that too! :D
Below snippet illustrates the use of these attributes with its latest version. You can visit the download page.
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn3dlinedy',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Business Results 2005 v 2006",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "0",
"numberprefix": "$",
"labelDisplay": "rotate",
"slantLabels": "1",
"animation": "1"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "2006",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "2005",
"renderas": "Area",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}, {
"seriesname": "2004",
"renderas": "Line",
"data": [{
"value": "7000"
}, {
"value": "10500"
}, {
"value": "9500"
}, {
"value": "10000"
}, {
"value": "9000"
}, {
"value": "8800"
}, {
"value": "9800"
}, {
"value": "15700"
}, {
"value": "16700"
}, {
"value": "14900"
}, {
"value": "12900"
}, {
"value": "8800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "22000",
"color": "91C728",
"displayvalue": "Target"
}]
}],
"styles": {
"definition": [{
"name": "bgAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "BACKGROUND",
"styles": "bgAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Stacked Column 3D + Line Dual Y axis chart showing quarterly cost analysis for the last year. -->
<div id="chart-container">FusionCharts will render here</div>
A fiddle link for the avobe implementation.
Get to know more about the supported attributes in MSCombination 3d charts from here.
I am using the highcharts:highcharts-meteor package in my application. I added highmaps to my configuration. My config object for highcharts is as follows:
{
"version": "4.2.1", // Choose version of Highcharts/Highstock/Highmaps.
"base": "highcharts.js", // Choose base, can be "highcharts.js", "highstock.js" or "highmaps.js"
"adapter": "jquery", // Choose adapter, e.g. "jquery" or "standalone-framework.js".
"modules": [ // Choose modules to be installed altogether with main library.
"highcharts-3d.src.js",
"modules/exporting.js",
"modules/heatmap.js",
"modules/maps.js",
"modules/drilldown.js",
"themes/gray.js"
]
}
I added the maps.js to be able to use both highcharts and highmaps. I am trying to render the sample demo map "US Population Density" without any luck. I am unsure what the right configuration option is and where should I put the us-all.js file in my directory.
The error I get in the browser console is
Cannot set property 'countries/us/us-all' of undefined
The JSFiddle from highcharts demo site is below.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/
So highcharts.Map is undefined. I have tried multiple things:
changed the config base option to highmaps.js
Removing the modules/maps.js
Putting us-all.js in the compatibility directory
Same issue. What am I doing wrong?
The error:
highcharts.Map is undefined
occurs, because you are including modules/maps.js but this file cannot be found. The module you want to include instead is named map.js. This file is located in the directory /packages/highcharts-container/.npm/package/node_modules/highcharts/modules/.
If you want to implement the Highcharts Maps demo in Meteor, follow these seven steps:
Run the command meteor add highcharts:highcharts-meteor.
Run meteor in order to initialise the highcharts-container.
Open the file /client/config.highcharts.json and insert the following Highcharts configuration:
{
"version": "4.2.1",
"base": "highcharts.js",
"adapter": "default",
"modules": [
"highmaps.js",
"modules/exporting.js",
"modules/heatmap.js",
"modules/drilldown.js",
"modules/map.js",
"themes/gray.js"
]
}
Load the US map in your HTML head:
<head>
<title>meteor-highcharts-demo</title>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>
Implement a container which wraps your map:
<template name="map">
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</template>
Instanciate the map:
if (Meteor.isClient) {
var data = [{
"value": 438,
"code": "nj"
}, {
"value": 387.35,
"code": "ri"
}, {
"value": 312.68,
"code": "ma"
}, {
"value": 271.4,
"code": "ct"
}, {
"value": 209.23,
"code": "md"
}, {
"value": 195.18,
"code": "ny"
}, {
"value": 154.87,
"code": "de"
}, {
"value": 114.43,
"code": "fl"
}, {
"value": 107.05,
"code": "oh"
}, {
"value": 105.8,
"code": "pa"
}, {
"value": 86.27,
"code": "il"
}, {
"value": 83.85,
"code": "ca"
}, {
"value": 72.83,
"code": "hi"
}, {
"value": 69.03,
"code": "va"
}, {
"value": 67.55,
"code": "mi"
}, {
"value": 65.46,
"code": "in"
}, {
"value": 63.8,
"code": "nc"
}, {
"value": 54.59,
"code": "ga"
}, {
"value": 53.29,
"code": "tn"
}, {
"value": 53.2,
"code": "nh"
}, {
"value": 51.45,
"code": "sc"
}, {
"value": 39.61,
"code": "la"
}, {
"value": 39.28,
"code": "ky"
}, {
"value": 38.13,
"code": "wi"
}, {
"value": 34.2,
"code": "wa"
}, {
"value": 33.84,
"code": "al"
}, {
"value": 31.36,
"code": "mo"
}, {
"value": 30.75,
"code": "tx"
}, {
"value": 29,
"code": "wv"
}, {
"value": 25.41,
"code": "vt"
}, {
"value": 23.86,
"code": "mn"
}, {
"value": 23.42,
"code": "ms"
}, {
"value": 20.22,
"code": "ia"
}, {
"value": 19.82,
"code": "ar"
}, {
"value": 19.4,
"code": "ok"
}, {
"value": 17.43,
"code": "az"
}, {
"value": 16.01,
"code": "co"
}, {
"value": 15.95,
"code": "me"
}, {
"value": 13.76,
"code": "or"
}, {
"value": 12.69,
"code": "ks"
}, {
"value": 10.5,
"code": "ut"
}, {
"value": 8.6,
"code": "ne"
}, {
"value": 7.03,
"code": "nv"
}, {
"value": 6.04,
"code": "id"
}, {
"value": 5.79,
"code": "nm"
}, {
"value": 3.84,
"code": "sd"
}, {
"value": 3.59,
"code": "nd"
}, {
"value": 2.39,
"code": "mt"
}, {
"value": 1.96,
"code": "wy"
}, {
"value": 0.42,
"code": "ak"
}];
Template.map.onRendered(function() {
// Make codes uppercase to match the map data
_.each(data, (el) => el.code = el.code.toUpperCase());
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
borderWidth: 1
},
title: {
text: 'US population density (/km²)'
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
}
Run meteor to start your app.
I have prepared also a demo repository, which is hosted on GitHub.