Forum Academy Marketplace Showcase Pricing Features

Chart Plugin: chart.js 2.0

Hello there fellows,

I´ve not heard anything yet from the Bubble team.

Any of you did?

Nope, nothing yet. Really hoping for this feature soon!

I’ve been using google charts with a lot of success. I just used the embed HTML function. pretty seemless…

3 Likes

@aliandrihab any way you could share screenshots or a public link to your app? I’d love to see your use case. Are you using data from within Bubble, or is it from Google Sheets?

@emmanuel is your team still working on this? Grouping data in charts would be so so helpful!

2 Likes

@aliandrihab yes, could you share with us the use case? The first question I made myself is the same as @jordan.shotwell - how you handle the data? Tks!

Hi all - have just posted an update on plugin here:

3 Likes

Hi @edwardbutcher nice job with the chart plugin, I was playing with it and wondering, can we use it in bubble if the data is not written directly but it’s sum of differents elements of your table ??

For example if your table are :

James 5
Siobhan 7
Macey 11
Rupert 6
Cheryl 2
James 3
Macey 2
Cheryl 9

So without creating a new table, showing
James 8
Siobhan 7
Macey 13
Rupert 6
Cheryl 11

Thank you for your reply.
Regards,

hi @lise.nicolas yes - the Premium version will help you achieve that.

It has got some reporting / rollup functionality that will allow you to group and sum, average, or do cumulative addition to your data set.

So it would do exactly as you have outlined above. A similar use case might be if you have several transactions / things happening on the same day but you want to just show total activity each day, over time. That would also be possible

You might have seen from the other thread that we are waiting on the Bubble team to activate Premium plugins in the Bubble store. The last update was that this is in progress.

Will the premium version’s grouping stuff allow for plotting when you don’t have a field of type “number” on the data type?

For example, if I have a “Bookings” data type, I don’t want to store and manually create workflows to increment a “Total” field value. Would rather build a chart by referencing Current Person’s Bookings:count

Possible today in free version? Or “tomorrow” in Premium?

It won’t work purely off of non-number data type @daniel3 - you will need to make some change to your database but don’t necessarily need workflows (although the method you mentioned above would also work).

My suggestion would be to add a number field to your booking Thing, and set the default value to 1.

You would then use the group and sum feature to plot your chart - no workflows needed.

@edwardbutcher Thank you for your feedback I will wait for the premium version so ! I hope bubble will release the premium plugins soon

Hey guys,

So what i did is use code from google’s charts and placed my data in whenever I defined the variable.

Here is the code which basically sums up scores based on catagory and date.

so this:

becomes this:

and is plotted like this:

to do this the code that is used is:

Blockquote

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>




<script>
    let scores = [5, 5, 2, 1];
    let categories = ["Catagory1","Catagory2","Catagory1","Catagory2"];
    let dates = ["July 11, 17 11:20 AM","July 11, 17 11:20 AM","July 10, 17 5:26 PM","July 10, 17 5:26 PM"];

    function uniq_fast(a) {
        var seen = {};
        var out = [];
        var len = a.length;
        var j = 0;
        for(var i = 0; i < len; i++) {
            var item = a[i];
            if(seen[item] !== 1) {
                seen[item] = 1;
                out[j++] = item;
            }
        }
        return out;
    }

    let uniqueCategory = uniq_fast(categories).sort();
    let uniqueDate =uniq_fast(dates);


    let i = 0;

    let bars = [];

    scores.forEach(function(element) {
        bars[i] = {
            score: element,
            category: categories[i],
            date: dates[i]
        };
        i++;            
    }, this);

    let totalScores = 0;

    let finalObject = [];

    let googleCategory = [];
    googleCategory.push('categories');
    googleCategory = googleCategory.concat(uniqueCategory);
    googleCategory.push({ role: 'style' });

    let googleDate = [];
    googleDate.push(googleCategory);

    let dateArray = [];

    for(let j=0; j<uniqueDate.length; j++) {
        dateArray = [];
        dateArray.push(uniqueDate[j]);
        for (let k=0; k<uniqueCategory.length; k++) {
            for(let l=0; l<bars.length; l++) {
                if(uniqueCategory[k] == bars[l].category) {
                    if(uniqueDate[j] == bars[l].date) {
                        totalScores += bars[l].score;
                        // console.log(bars[l].score);
                    }
                    // 
                }
            }
            dateArray.push(totalScores);
            finalObject[finalObject.length] = uniqueDate[j] + " - " + uniqueCategory[k] + " - " + totalScores;
            // console.log(uniqueCategory[k] + " - " + uniqueDate[j] + " - " + totalScores);
            totalScores = 0;

            // dateArray.push('red');
        }
        dateArray.push('');
        googleDate.push(dateArray);
    }

</script>


    <script type="text/javascript">

    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

        var data = google.visualization.arrayToDataTable([
            googleDate[0],
            googleDate[1],
            googleDate[2],
            googleDate[3],
        ]);


        // Set chart options
        var options = {'title':'How Much scores you made in',
                    'width':600,
                    'height':400,
                    legend: { position: 'top', maxLines: 3 },
                    bar: { groupWidth: '50%' },
                    isStacked: true,
                    bars: 'horizontal',
                    series: {
                        0:{color:'#5b9bd5'},
                        1:{color:'#ed7d31'},
                        2:{color:'#a5a5a5'},
                        3:{color:'#ffc000'},
                        4:{color:'#4472c4'}
                        }
                    };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
    </script>
</head>
<body>


    <!--Div that will hold the pie chart-->
<div id="chart_div"></div>


</body>
> Blockquote

I place this code in an HTML element and change the items for let var - XXX , XXX becomes my bubble data using join with “,” for text

WITH THAT SAID

@edwardbutcher plugin amCharts LOOKS like it can do this (@edwardbutcher can you confirm?)

If so I would not have done it this way,… it was an absolute pain. The html editor and getting the data in the right format was not fun…

IF amCharts can do this. then that’s the way to go. I would wait for the premium and do it that way. That’s what I plan on doing. Just hope they can get it out in the next couple of days

Let me know if something is unclear

Hey @aliandrihab yes amCharts plugin will be able to handle this.
Great job with that workaround - I fiddled with Google Charts for a long time before accepting that I would need to build this plugin, and you got a lot further than I did.

So the group and sum features are going to be in the paid version? Right now, after doing as you suggested and adding a number field that defaults to 1, I can’t use the Thing’s Number’s:sum in the Series Plot (complains that it’s looking for a list of numbers, and this is a number).

1 Like

Thought helpful for you to see this in action @aliandrihab - I have built something along the same lines as your example: https://amcharts.bubbleapps.io/version-test/category_test using the Premium tool.

Descriptions included, but basically the first one stacks the Transactions by Buyer - but still uses Sum aggregation as some buyers conducted multiple transactions on the same day. Also shown in the first chart is Average aggregation of a Lead Time value that is attributed to each Transaction.

Second chart is similar but this time I have ignored who the Buyer was and just Summed all Transactions for the period. I have also used the Plugin to generate a Cumulative value of Transactions over time.

1 Like

Hi @daniel3 sorry for confusion - my solution was referring to a fix that you can apply using the plugin - by included a Field on your Thing with a default value of 1 you would not need any workflows to do sum / rollup charts.

In your post you mentioned using workflows and creating new Things to store your rollup information - it was this that I was saying would work. I have implemented this on several of my Apps. It is pretty straightforward… as long as you know exactly what you want to capture at the outset - making changes later on becomes hard as the stored values are not dynamic.

Can you share your implementation of google charts in a public app? thanks

I’m trying to use amchart but it’s giving me these errors @edwardbutcher

ReferenceError: AmCharts is not defined
    at pushData (eval at p.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:11197), <anonymous>:40:31)
    at Object.instance.data.drawPie (eval at p.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:11197), <anonymous>:36:4)
    at fn_bubble_data (eval at p.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:11197), <anonymous>:56:17)
    at eval (eval at p.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:11197), <anonymous>:171:56)
    at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:29468
    at A (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:23417)
    at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:29424
    at e._run_if_not_destroying (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:90:19142)
    at e.run_me (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:101:29203)
    at t (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:101:31006)22:55:52amChartsSerial ATypeError: Cannot read property 'length' of null
    at fn_bubble_data (eval at p.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:11197), <anonymous>:18:52)
    at eval (eval at p.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:11197), <anonymous>:171:56)
    at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:29468
    at A (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:23417)
    at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:29424
    at e._run_if_not_destroying (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:90:19142)
    at e.run_me (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:101:29203)
    at new e (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:101:28472)
    at Object.ze.autorun (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:101:28258)
    at e.autorun (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:90:18955)
    at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:99:28873
    at t (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/76e5bdc72ba053e980c0b8341de689c3a7a1d394d6c3f5bc6ff455a7736b28d2/xfalse:90:12090)

If you paste a link to your editor (and open it up in settings) or send it to me in a private message then I will take a look


@edwardbutcher