Forum Academy Marketplace Showcase Pricing Features

Chart Plugin: chart.js 2.0

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

@edwardbutcher First, great work on the plugin. Very impressed with the free version. I do have a question. Can this plugin, free or premium sum up data entered by date by month? For example, I’m work on a project where data is entered each day (ideally) but from a data analysis perspective, I’d like to view all the entries as a sum by month as opposed by day. Does that make sense?

@TechieInAK yes, you can roll up by month and year in the current Premium version, with support for week coming soon. See amCharts plugin [Premium now Live] and this video tutorial.

3 Likes

Thanks! Works like a charm, exactly what I was looking for.

@edwardbutcher Any ideas on why this doesn’t display a chart?


A problem with Bubble’s chart is that it won’t accept a list of numbers, it will only accept a list of things.
Does your chart have the same limitation?

I can only see one chart element on the page and it renders my end… although it does take some time - likely due to the workflows that you are running. I think there is an opportunity to restructure your data potentially to simplify those workflows - if you were able to assign users an age range on registration then it would be simpler to roll your figures up. And you could consider using the group and merging features of the premium which would sum all values that share the same category value (e.g. some number field from all users in the 20-29 range).

Anyway - this is the output my end - do you not see the same?

2017-08-24_10-25-23

Right, I see it now. I’m not used to having to allow scripts on my Bubble apps; forgot that yours has to call home. The search that produces the data is just really slow.

1 Like

Is there any movement on charting for Bubble??

3 Likes

Reviving this thread… I have a few clients with reporting interfaces and we’re doing pretty well with the current chart element. The only inconvenience we keep running into is the lack of a fixed Y-Axis on the bar/line charts. It makes comparing charts rather difficult if the data is all on different scales.

Is there any way we can control over the max value for Y-Axis?

A use case is a survey application I’m working on where scores range from 0-200. Surveys are given every month (X-Axis) over multiple metrics (separate charts). We’d want admins and participants to see results across all metrics according to the same 200 scale. Right now, if a participant scored max of 100 in one metric and then max 200 in another, then the chart’s scale looks the same when they’re actually very different values (the 100 bar should appear half the height of the 200 bar when charts are side by side).

This is just one use case, but I hope it helps illustrate the need!

I agree , I would say scaling is an issue for the chart plugin

Also another issue edit the data point shape/color from the property editor.

1 Like

I’m not far off releasing a free version of Chart Tools that will allow for this

2 Likes

We are using a few chart plugins but go with custom chart.js more and more. It’s quite straightforward to implement and gives you all the customization options. The only issue to overcome is to make sure to your data is structured in a way it can easily be inserted into the chart. But there are some solutions for that too :slight_smile:

If you want to go that route, here are some starters to get a responsive chart. (example is a scatter chart but it works with all charts, you just need to restructure the dataset a bit)

On the page, we have an html element:

And then run a javascript workflow with the chart script:

What you’re after is highlighted in yellow, the ‘ticks’ options, where you set the min and max values for your axis ticks.

6 Likes

@vincent56 Thanks again for the example. I’m using your method here for a bar chart, but I’m not having any luck making the chart responsive. Every time the window size changes the chart disappears. Has anyone had any experience dealing with responsive charts when implementing in this way?