echarts for react save chart png in different resolution? - javascript

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

Remove empty values from grouped bar chart in Vega-lite

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

Group x axis labels

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.

Animation of line chart with D3.js (v4)?

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.

LabelDisplay for fusion charts MScombi3d charts

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.

How to use Highmaps and Highcharts with Meteor?

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.

Categories

Resources