Develop Reference

echarts for react save chart png in different resolution?

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>
)

Is it possible to print the label of the object instead the id in material ui DataGrid

So I have two tables in my database. I want a DataGrid UI to print all my columns except the categoryId I want to print a label instead (like in selection valueOptions) :
const columns: GridColDef = [
{
"field": "title",
"headerName": "Titel",
"width": 350,
"editable": true
},
{
"field": "categoryId",
"headerName": "Kategorie",
"width": 250,
"editable": true,
"type": "singleSelect",
"valueOptions": [
{
"value": "miv560972ynqzk9",
"label": "stuff 1"
},
{
"value": "1t7n08l9tfdwotn",
"label": "stuff 2"
},
]
}
]
const rows: GridRowsProp = [
{
"categoryId": "miv560972ynqzk9",
"title": "Lineare Algebra Hausaufga",
},
{
"categoryId": "1t7n08l9tfdwotn",
"title": "Test",
},
]
So I want something like this:
const rows: GridRowsProp = [
{
"categoryId": { value:"miv560972ynqzk9", label: "stuff1"},
"title": "Lineare Algebra Hausaufga",
},
{
"categoryId": { value: "1t7n08l9tfdwotn", label: "stuff2" },
"title": "Test",
},
]

Drilldown in grouped column chart with categories

I have created a simple grouped column chart here;
I want to create a drill down report with following dataset:
[{
"category" : "Quantitative",
"counts" : [
{
"topic" : "Compound Interest",
"correct" : 0
"incorrect" : 1
"missed" : 0
},
{
"topic" : "Pipers and Cistern",
"correct" : 0
"incorrect" : 0
"missed" : 1
},
{
"topic" : "Simplification",
"correct" : 0
"incorrect" : 0
"missed" : 1
}
]
},
{
"category" : "Quantitative",
"counts": [ ...again some objects with counts]
}]
Where when we click on any of the columns in Quantitative, we should go to drill down report for Quantitative and it should also change category names. How can we achieve that ? I am using Highcharts React Wrapper

Highcharts drilldown does not support what you are expecting. However, you can achieve it making a custom drilldown functionality.
On load event add Go back button using Highcharts.SVGRenderer and hide it. On click the button update the chart with level 0 (main) data.
On point event callback update the chart with drilldown data and new categories. In the nutshell:
Code:
var drilldownData = [{
"category": "Quantitative_1",
"counts": [{
"topic": "Compound Interest",
"correct": 2,
"incorrect": 7,
"missed": 4
},
{
"topic": "Pipers and Cistern",
"correct": 5,
"incorrect": 3,
"missed": 1
},
{
"topic": "Simplification",
"correct": 2,
"incorrect": 5,
"missed": 2
}
]
}, {
"category": "Quantitative_2",
"counts": [{
"topic": "Compound Interest",
"correct": 2,
"incorrect": 8,
"missed": 11
},
{
"topic": "Pipers and Cistern",
"correct": 3,
"incorrect": 6,
"missed": 3
},
{
"topic": "Simplification",
"correct": 2,
"incorrect": 11,
"missed": 8
}
]
}];
var data = [{
"name": "Correct",
"color": "#0098ad",
"data": [{
y: 8,
drilldown: "Quantitative_1",
className: 'drilldown'
},
9,
7
]
}, {
"name": "InCorrect",
"color": "#BF350A",
"data": [{
y: 8,
drilldown: "Quantitative_2",
className: 'drilldown'
},
7,
10
]
}, {
"name": "Missed",
"color": "#F7A35B",
"data": [
4,
4,
3
]
}];
var categories = [
"Quantitative",
"Verbal Ability",
"Logical Reasoning"
];
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
var chart = this;
chart.customBtn = chart.renderer.button('◁ Go back', 40, 10, function() {
chart.update({
xAxis: {
categories: categories
},
series: JSON.parse(JSON.stringify(data))
}, true);
chart.customBtn.hide();
}).add().hide();
}
}
},
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": [
"downloadPNG",
"downloadSVG",
"separator",
"label"
]
}
}
},
"title": {
"text": null
},
"xAxis": {
"categories": categories,
"title": {
"text": "Section",
"style": {
"fontWeight": "bold",
"color": "#000"
}
}
},
"yAxis": {
"allowDecimals": false,
"min": 0,
"title": null
},
"tooltip": {},
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true
},
point: {
events: {
click: function() {
var point = this,
chart = point.series.chart,
drilldown = this.drilldown,
data = drilldownData.find(elem => elem.category === drilldown),
categories = [],
series = [{
name: 'Correct'
}, {
name: 'InCorrect'
}, {
name: 'Missed'
}];
if (drilldown && data) {
data.counts.forEach(function(count, i) {
categories.push(count.topic);
series[i].data = [{
y: count.correct,
drilldown: null
}, {
y: count.incorrect,
drilldown: null
}, {
y: count.missed,
drilldown: null
}];
});
chart.update({
xAxis: {
categories: categories
},
series: series
});
chart.customBtn.show();
}
}
}
}
}
},
"series": JSON.parse(JSON.stringify(data))
});
.drilldown {
cursor: pointer;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/zdm4cLty/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/plotOptions.column.point.events.click

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.