How to create these visuals

Robert Granlund
Robert Granlund used Ask the Experts™
on
jQuery Animation to build a visual display.  I want to build a visual display from info/data in my DB but I am not 100% certain on where to start.  It is just visual display but I need to calculate the results of data from my DB.  My question is, where would you start in developing this visual and what skills should be needed to complete this?  Any input is welcome.
I query the DB for results and that will be a few figures.  How would you translate those figures into graphics?  CSS? jQuery? SVG?
How To
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Likely some Javascript library which produces SVG charts.

Just do a view source on the page + likely you'll find the library name.

If you can't figure it out, post the URL where you pulled the above info + likely someone else can help.

Also take a look at https://developers.google.com/chart/ as a starting point.

Tip: There are several projects right now which provide real-time chart updates, by using a combo of server side + client side processing using AJAX to round trip only SVG updates, so only updates are applied to SVG images.

Some of these projects are generating massively fast, real time, chart updates.

If this type of code seems like a match for your application, be sure to dig into researching these projects.

Good starting point is search through GitHub for real time charting + graphing projects.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I would look at chart.js (https://www.chartjs.org/samples/latest/charts/bar/vertical.html)

It is a popular library that provides a wide variety of charting options.

You can see it being used in this popular dashboard theme AdminLTE (https://adminlte.io/themes/AdminLTE/index2.html)

Author

Commented:
@julian
Have you used this?  How long is it to implement?  I have approximately 6 queries of data to be extracted from the DB.  What do you think the user level should be?  Meaning does this require an advanced or moderate skillset?
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Yes I have - implementation time is variable depending on what you want to do. You still have to do the calculation to produce the data for the charts but after that it is fairly simple to setup.

I have used both Chart.js on its own and with the AdminLTE template - although the latter is not a dependency - it just incorporates the Chart library.

Chart has many examples and a wide following so there is a lot of documentation on this - but if you are stuck post a question and PM me and I will be more than happy to help.

Author

Commented:
@julian, when you have a chart, what would you say is the best way to bring in data on line #10  via PHP from a MySQL and replace the data with PHP variables?

I need to Query the DB and obtain multiple results and then Replace the DATA with the individual results.

<script>
 <script>
            var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true
                            }
                        }]
                    }
                }
            });
            

            </script>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You can take a look at this sample https://gist.github.com/dancameron/18ad7e46399406259323

Having looked at that though I think maybe have a look at the C3 (based on D3) library as well - I just finished answering some questions on that and it has some very nice options - from what I can tell it is much easier to update dynamically.

Take a look at this sample I created for the question  http://www.marcorpsa.com/ee/t3515.html
Data sets are updated by the drop down at the top of the chart.

You can find more on C3 here https://c3js.org/

Author

Commented:
Thanks, this chart js is great and I have been able to bend it to my needs.  There are still some modification aspects that are difficult, like getting at specific CSS but all is good. Thanks for the recommendation.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial