How to pass values dynamically to a chart

Question

I am building an app that has a dashboard with a graphical representation of data. It's a template. I want the values to be dynamic on the chart, i.e. I want use php to pass the values to the chart.

The problem is that values are set in a '.js' file. How can i pass values from the database to the file in order to display them?

Please help

this is my html

<!-- Chart Widget -->
                                <div class="widget">
                                    <div class="widget-content border-bottom">
                                        <span class="pull-right text-muted"><?php  echo htmlentities(date("Y")); ?></span>
                                        Last Year's Data
                                    </div>
                                    <div class="widget-content border-bottom themed-background-muted">
                                        <!-- Flot Charts (initialized in js/pages/readyDashboard.js), for more examples you can check out http://www.flotcharts.org/ -->
                                        <div id="chart-classic-dash" style="height: 393px;"></div>
                                    </div>
                                    <!--
                                    <div class="widget-content widget-content-full">
                                        <div class="row text-center">
                                            <div class="col-xs-4 push-inner-top-bottom border-right">
                                                <h3 class="widget-heading"><i class="gi gi-wallet text-dark push-bit"></i> <br><small>$ 41k</small></h3>
                                            </div>
                                            <div class="col-xs-4 push-inner-top-bottom">
                                                <h3 class="widget-heading"><i class="gi gi-cardio text-dark push-bit"></i> <br><small>17k Sales</small></h3>
                                            </div>
                                            <div class="col-xs-4 push-inner-top-bottom border-left">
                                                <h3 class="widget-heading"><i class="gi gi-life_preserver text-dark push-bit"></i> <br><small>3k+ Tickets</small></h3>
                                            </div>
                                        </div>
                                    </div>-->
                                </div>

And then this code triggers the '.js' file

 <script>$(function(){ ReadyDashboard.init(); });</script>

And then this is the javascript snippet

 var chartClassicDash    = $('#chart-classic-dash');

            // Data for the chart
            var dataEarnings        = [[1,  2300], [2, 2300], [3, 3200], [4, 2500], [5, 4200], [6, 3100], [7, 3600], [8, 2500], [9, 4600], [10, 3700], [11, 4200], [12, 5200]];
            var dataSales           = [[1, 850], [2, 750], [3, 1500], [4, 900], [5, 1500], [6, 1150], [7, 1500], [8, 900], [9, 1800], [10, 1700], [11, 1900], [12, 2550]];
            var dataTickets         = [[1, 130], [2, 330], [3, 220], [4, 350], [5, 150], [6, 275], [7, 280], [8, 380], [9, 120], [10, 330], [11, 190], [12, 410]];

            var dataMonths          = [[1, 'Jan'], [2, 'Feb'], [3, 'Mar'], [4, 'Apr'], [5, 'May'], [6, 'Jun'], [7, 'Jul'], [8, 'Aug'], [9, 'Sep'], [10, 'Oct'], [11, 'Nov'], [12, 'Dec']];

            // Classic Chart
            $.plot(chartClassicDash,
                [
                    {
                        label: 'Sales',
                        data: dataEarnings,
                        lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
                        points: {show: true, radius: 5}
                    },
                    {
                        label: 'Deposits',
                        data: dataSales,
                        lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
                        points: {show: true, radius: 5}
                    },
                    {
                        label: 'Withdrawal',
                        data: dataTickets,
                        lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
                        points: {show: true, radius: 5}
                    }
                ],
                {
                 colors: ['#5ccdde', '#454e59', '#ffffff'],
                        //colors: ['#5ccdde', '#deb25c', '#de815c'],

                    legend: {show: true, position: 'nw', backgroundOpacity: 0},
                    grid: {borderWidth: 0, hoverable: true, clickable: true},
                    yaxis: {show: false, tickColor: '#f5f5f5', ticks: 3},
                    xaxis: {ticks: dataMonths, tickColor: '#f9f9f9'}
                }
            );

I want to dynamically control these values

// Data for the chart
            var dataEarnings        = [[1,  2300], [2, 2300], [3, 3200], [4, 2500], [5, 4200], [6, 3100], [7, 3600], [8, 2500], [9, 4600], [10, 3700], [11, 4200], [12, 5200]];
            var dataSales           = [[1, 850], [2, 750], [3, 1500], [4, 900], [5, 1500], [6, 1150], [7, 1500], [8, 900], [9, 1800], [10, 1700], [11, 1900], [12, 2550]];
            var dataTickets         = [[1, 130], [2, 330], [3, 220], [4, 350], [5, 150], [6, 275], [7, 280], [8, 380], [9, 120], [10, 330], [11, 190], [12, 410]];

Thanks once again

To give you a great answer, it might help us if you have a glance at [ask] if you haven't already. It might be also useful if you could provide a [mcve]. — Mat, Nov 11 '16 at 12:31

score 2 · Answer 1 · answered Nov 11 '16 at 11:54

Please post your code, it is easy to help you, and it's simple to pass values to javascript variables through php, below is my sample code to pass dyanamic data comming from database to barchart. It is for your reference not complete code

<script type="text/javascript">      
google.charts.setOnLoadCallback(drawChart);
imagepath_comparison="";
function drawChart() {
var data = google.visualization.arrayToDataTable([<?=$data;?>]);
var options = {
title: 'GRAPH ANALYSIS',
vAxis: {title: "SUBJECTS"},
hAxis: {
title: "MARKS"

}
};

</script>

score 1 · Answer 2 · answered Nov 12 '16 at 00:10

1

ZingChart has a very compatible plugin for retrieving data and uploading it using php!

We also have several examples to help you better understand compatability

php and AJAX example

MySQL example

ZingChart php wrapper

php dashboard

php demo1

php demo2

answered Nov 12 '16 at 00:10

nardecky

2,623
8
18

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

If you want to pass data from a database to a dynamic chart, you have to use AJAX. I'd try it with jQuery AJAX.

Have a look at this: Passing data from php to Jquery

Do you have any code snippets? We may help you out, if you're not familiar with ajax.

edited May 23 '17 at 12:17

Community

1
1

answered Nov 11 '16 at 11:48

Matt Backslash

764
1
8
20

score 0 · Answer 4 · answered Nov 11 '16 at 11:58

in your php:

$sql8 = "SELECT marca, COUNT(*) as cnt, DATE_FORMAT(entra, '%m/%d/%Y') FROM equipos " . "where entra between now() - interval 30 day and now() GROUP BY marca ORDER BY marca";

   // execute SQL query and get result

    $sql_result = mysql_query($sql8)
            or die("Couldn't execute query.");

in your script:

data: [

<?php while($row = mysql_fetch_array($sql_result)){ ?>

{

    marca: '<?php echo $row['marca']; ?>',

    cnt: '<?php echo $row['cnt']; ?>',

},

<?php } ?>],

score 0 · Answer 5 · answered Nov 16 '16 at 08:19

0

Thanks everyone, I simply used AJAX to pass the values too the JavaScript file.

answered Nov 16 '16 at 08:19

How to pass values dynamically to a chart

5 Answers5