Last active
January 31, 2024 07:23
-
-
Save hkmoon/aa4041d59f297560e1a65ac2ee124c72 to your computer and use it in GitHub Desktop.
amchart in jupyter
@ArsalanAli915 Please, use code block for pasting your code. It's not easy to read your code without it.
@hkmoon please take a look now.
%%javascript
require.config({
paths: {
d3: '//cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min',
am5: '//www.amcharts.com/lib/5/index',
am5percent: '//www.amcharts.com/lib/5/percent',
exporting: '//www.amcharts.com/lib/5/plugins/exporting',
'am5themes_Animated': '//www.amcharts.com/lib/5/themes/Animated',
},
shim: {
am5: {
init: function () {
return am5;
}
},
am5percent: {
deps: ['am5'],
exports: 'am5xy',
init: function () {
return am5percent;
}
},
exporting: {
deps: ['am5'],
exports: 'am5plugins_exporting',
init: function () {
return am5plugins_exporting;
}
},
'am5themes_Animated': {
deps: ['am5'],
init: function () {
return am5themes_Animated;
}
}
}
});
element.append('<div id="chartdiv" style="height: 500px;"></div>');
require(['am5', 'am5percent', 'am5themes_Animated', 'exporting'], function (am5, am5percent, am5themes_Animated, exporting) {
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(
am5percent.PieChart.new(root, {})
);
// Create
var series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
categoryField: "country",
valueField: "litres"
})
);
// Define data
series.data.setAll([{
"country": "Lithuania",
"litres": 9501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
}]);
// var title = chart.children.unshift(am5.Label.new(root, {
// text: "Sales by country ($M)",
// fontSize: 24,
// textAlign: "center",
// width: am5.p100,
// visible: false
// }));
// Export the chart as PNG
// Enable exporting
var exportings = am5plugins_exporting.Exporting.new(root, {
menu: am5plugins_exporting.ExportingMenu.new(root, {}),
pngOptions: {
maintainPixelRatio: true
},
});
exportings.export()
}, function (err) {
console.log(err);
});
%%javascript
require.config({
paths: {
d3: '//cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min',
am5: '//www.amcharts.com/lib/5/index',
am5percent: '//www.amcharts.com/lib/5/percent',
am5plugins_exporting: '//www.amcharts.com/lib/5/plugins/exporting',
'am5themes_Animated': '//www.amcharts.com/lib/5/themes/Animated',
},
shim: {
am5: {
init: function () {
return am5;
}
},
am5percent: {
deps: ['am5'],
exports: 'am5percent',
init: function () {
return am5percent;
}
},
am5plugins_exporting: {
deps: ['am5'],
exports: 'am5plugins_exporting',
init: function () {
return am5plugins_exporting;
}
},
'am5themes_Animated': {
deps: ['am5'],
init: function () {
return am5themes_Animated;
}
}
}
});
element.append('<div id="chartdiv" style="height: 500px;"></div>');
require(['am5', 'am5percent', 'am5themes_Animated', 'am5plugins_exporting'],
function (am5, am5percent, am5themes_Animated, am5plugins_exporting) {
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(
am5percent.PieChart.new(root, {})
);
var series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
categoryField: "country",
valueField: "litres"
})
);
// Define data
series.data.setAll([{
"country": "Lithuania",
"litres": 9501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
}]);
var exportings = am5plugins_exporting.Exporting.new(root, {
menu: am5plugins_exporting.ExportingMenu.new(root, {}),
pngOptions: {
maintainPixelRatio: true
},
});
exportings.export()
}, function (err) {
console.log(err);
});
@hkmoon does the above script export automatically? please verify this. I was getting with my code same but its does not export automatically. thanks.
@ArsalanAli915 You can use download()
or print()
since this is based on web.
https://www.amcharts.com/docs/v5/concepts/exporting/exporting-api/#initiating-download-print
It cannot access to local file system in the web. However, you can pass a raw format binary data to the python context and save it locally.
exporting.export("png").then(function(imgData) {
document.getElementById("myImage").src = imgData;
});
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@hkmoon my browser show warning manager-base.js:291 Failed to fetch ipywidgets through the "jupyter.widget.control" comm channel, fallback to fetching individual model state. Reason: Control comm was closed too early.