amchart in jupyter

amchart_in_jupyter.ipynb

@ArsalanAli915 You can check them out.

• https://www.amcharts.com/docs/v5/concepts/exporting/
• https://www.amcharts.com/docs/v5/tutorials/creating-multi-content-pdf-export/

@hkmoon I really appriciate the time u have given. Actually using link I have tried export my pie chart genreated by this code
%%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('

');
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);
});
but png image does nott export automatically. Though menu is created which only help in exporting manually. I would great help if u look into this. thanks.

@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.

@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;
});