search

amcharts / amcharts3-angular2

Official Angular 2 plugin for amCharts V3
99 stars 35 forks source link

Creating bubble chart in angular 5 #87

Open sushant47 opened 5 years ago

sushant47 commented 5 years ago

kindly provide some sample code to create bubble chart in angular 5

xorspark commented 5 years ago

Generally speaking, creating any chart type requires including the corresponding script files (serial.js for line/column/step/candlestick, xy.js for bubble/scatter, pie.js for pie, etc) and setting the appropriate config (the second parameter in the AmCharts.makeChart() calls), *Field properties (valueField, categoryField, xField, yField, etc, depending on the chart type) and dataProvider. The majority of our demos and knowledge base examples can be ported over to use the angular component fairly easily that way.

Using the bubble chart demo as an example, set the correct includes in your html file (note this plugin requires <script> tags):

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<!-- export/themes/etc optional -->

Then tweak the makeOptions and generateDataProvider methods from our angluar-cli example in the app.component.ts to include the chart config from the AmCharts.makeChart call and your desired dataProvider values.

Here's a stackblitz demo that puts all of this together: https://stackblitz.com/edit/amcharts3-angular-bubble-chart-demo-mzsbu8