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.
@exception-rambler 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!
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.
Use the example on this page to become familiar with the process and the syntax: Your first chart | Highcharts
Then signup for the cloud free version.
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).
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.
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>
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.
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.
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!!
@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.
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.
This topic was automatically closed after 70 days. New replies are no longer allowed.