Forum Academy Marketplace Showcase Pricing Features

Bubble Chart limitations, how do you do it?

Hi All

I am trying to get my head around the Bubble Charts Plugin, but it appears to me that it is pretty basic in accepting data in that you first have to sort, sum and do any calculations on the data before being able to show values or labels.

Is this correct?

If so how do others get the data in a format ready to display in the chart?

Cheers!

Steven

Correct, Bubble charts at its current version is very limited, and your description is pretty accurate: calculations, sums, labels, etc. are not possible. I can’t say for sure, but I don’t expect Bubble will prioritize improving it at this point, as other plugins can solve it for you.

@edwardbutcher made a plugin for AmCharts that’s worth checking out. I haven’t tested it myself, but you can read more about it in this thread: amCharts plugin [Premium now Live]

Hi Stevenm

I’m not at all advanced in charting data but I have been trying to implement Google charts for a very long time I have tried to reach out to many experts in the bubble community but I still have not found a solution.

My preference has always been Google charts over AM charts but I think with the lack of support in the community and with bubble js.charts beng so basic I am going to revisit AM charts for my sustainable solution for displaying my bubble data.

Let me know if you find any good solutions.

I tried AMcharts but seems to be a bit buggy. I am surprised there are no other options given that metrics are so important!

1 Like

Update: Anyone looking for a chart after trying different option I have found HighCharts to be the better solution, but does require a bit of time (not too much) to become familiar with the code.

If you sign up for the free cloud version you can create and format your chart and then copy the code it generates and pop it into an HTML element.

Tips to get started.

  1. Use the example on this page to become familiar with the process and the syntax: https://www.highcharts.com/docs/getting-started/your-first-chart

  2. Then signup for the cloud free version.

  3. Create your chart type using the editor in the account and format how you need to using dummy data similar to what you are looking to pull out from the database. (start with one of the many templates).

  4. Then select the “Customize” option to grab the code and you will need to remove the " " from the statements. (If not sure go back to the above example.

  5. You will need to copy and paste the cloud code into the following for it to work (don’t past in the code: “var options = {” and remove the last “};” as we have added this below.

<script>
  $(function () {  
     Highcharts.chart('container', {
     //Code for the chart goes in here from the begining which starts with 'chart: {'
                          });
                    });
</script>
  1. Once this has been done you can replace the data points with the dynamic data statements from your own application.
  2. HighCharts is free while you develop and they also have a startup license whihc is really inexpensive for the first year and then you can pay for a perpetual license.

An example below is just a quick creation using data from my database using dynamic data, pulling in data from two different areas of my app but showing on the same scale.

3 Likes

Thanks for sharing @StevenM!

Thanks @StevenM

I’m really excited at giving this a go on Friday when I am back at my desk.

I’ve given up on Google charts and Am charts .

Have you managed to get this working with a multiple series Line chart?
Cheers

No, I haven’t tried that yet. There may be some limitations due to the way Bubble pulls in the data. Looking at this page: https://www.highcharts.com/docs/chart-concepts/series you may be able to pull in data points in a list.

Hi @StevenM SteveM

This looks like its really going to fit my needs and It is the best solution so far! But i just cant get the chart to show? I have followed your instructions from the above step by step in detail. Please see below.

The example is of a very simple pie chart

<script>
  $(function () {  
     Highcharts.chart('container', {
     chart: {
		type: 'pie'
	},
	plotOptions: {
		pie: {
			'allowPointSelect': true,
			'cursor': true,
			'showInLegend': true,
			'dataLabels': {
				'enabled': false
			}
		}
	},
	colors: [
		'#2b5175',
		'#434348',
		'#90ed7d',
		'#f7a35c',
		'#8085e9',
		'#f15c80',
		'#e4d354',
		'#2b908f',
		'#f45b5b',
		'#91e8e1'
	],
	xAxis: {
		type: 'category'
	},
	series: [
		{
			index: 0,
			name: 'Count',
			data: [
				[
					'Reportable Evnet',
					6
				],
				[
					'Complaint',
					7
				]
			]
		}
	]
                          });
                    });
</script>

Is there anything obvious I have missed?

Do i include this in the Page HTML Header?
<script src="https://code.highcharts.com/highcharts.js"></script>

Thanks in advance

Yes, it needs this in your page header.

high chart

Thanks @SteveM

I have copied the script to the page header, but it’s still not showing? I Have taken it right back to the basics and trying to show the chart on the First chart page following there instructions, ( https://www.highcharts.com/docs/getting-started/your-first-chart ) but I even cannot get that to show?

Once get one chart displayed I know ill be away. So So close now! Any ideas?

You have probably not give it a large enough div to show.

try this and notice the <div></div>

<div id="container" style="width:100%; height:600px;">
<script>
  $(function () {  
     Highcharts.chart('container', {

 chart: {
		type: 'pie'
	},
	plotOptions: {
		pie: {
			'allowPointSelect': true,
			'cursor': true,
			'showInLegend': true,
			'dataLabels': {
				'enabled': false
			}
		}
	},
	colors: [
		'#2b5175',
		'#434348',
		'#90ed7d',
		'#f7a35c',
		'#8085e9',
		'#f15c80',
		'#e4d354',
		'#2b908f',
		'#f45b5b',
		'#91e8e1'
	],
	xAxis: {
		type: 'category'
	},
	series: [
		{
			index: 0,
			name: 'Count',
			data: [
				[
					'Reportable Evnet',
					6
				],
				[
					'Complaint',
					7
				]
			]
		}
	]
     });
});
</script>
</div>

Hi Steve

Ok so it getting stranger? The bigger <div> made it work but only the code on the ‘Your First Chart’ page

When I enter the code from my own chart is not showing even though it looks perfect.

<div id="container" style="width:100%; height:600px;">
<script> 
  $(function () { 
    var myChart = Highcharts.chart('container', {
  chart: {
		type:'pie'
	},
        plotOptions: {
	pie: {
			'allowPointSelect': true,
			'cursor': true,
			'showInLegend': true,
			'dataLabels': {
				'enabled': false
			}
		}
	},
	colors: [
		'#2b5175',
		'#434348',
		'#90ed7d',
		'#f7a35c',
		'#8085e9',
		'#f15c80',
		'#e4d354',
		'#2b908f',
		'#f45b5b',
		'#91e8e1'
	],
	xAxis: {
		type: 'category'
	},
	series: [
		{
			index: 0,
			name: 'Count',
			data: [
				[
					'Reportable Evnet',
					6
				],
				[
					'Complaint',
					7
				]
			]
		}
	] 
</script>
</div>

Where do i go from here? is it somthing im doing when I remove the ( " )

Cheers

From the code you posted looks like you are missing the closing brackets just before the script.

Basically the way this works is that the closing brackets must match the open brackets to hold the different bits of the code. If you check out my example and your code you will see its missing the two closing brackets.

    });
});
</script>
</div>

Perfect!! It’s working!! I’m sorry if that was painful for you!!!

Thanks So much SteveM your A champ!!

I just can’t wait to dive into the data points now!!!

I wish I could buy you a beer!!

1 Like

@StevenM Thanks for sharing your success with HighCharts! I think this will help me achieve my charting goals too, but I am having issues getting Bubble data into the chart. Can you post an example of how you integrated dynamic data into the HTML? Thanks!

You can use Dynamic data and replace the hard-coded numbers with your own query. It’s not obvious and easy to miss, but if you double-click in the HTML area or until you see the insert dynamic data label and then you can just add in your own data. See attached image as example.

HighCharts

Note: there are limitations on what you can do with this, basically because of the way you have to format the data to pull it out of Bubble.

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.