Multi-series PHP chart working, Cannot get format correct to use ajax to refresh

[P.A.Trick]

I have a multi-series stacked column chart working with php. The chart gets the data from my localhost database, does a complicated query to perform some mathematics to the data, populates another table, then uses the new table data to render a fusionchart. All of this works if I run the php as a stand alone in my browser by just rendering the chart in the php file.

Now I want to wrap this with ajax to make the chart live as the data updates without the need to hit the refresh button in the web browser.

There is a tutorial in fusioncharts for an ajax app, but it is for a simple chart, not a stacked chart. I cannot seem to get the "echo $jsonEncodedData" in my php file to render a chart in the ajax app. I know I am completely missing something in the app.

app-lightchart_data-testing.js

utilization_data.php

lightchart_data-testing.php

lightchart_data-testing.html

[Prerana]

Hello,

Thanks for the query.

 

Please refer the sample link given below for the stacked column chart using PHP and data is getting fetched using ajax call.

https://www.dropbox.com/s/jtpy457k08aoidt/stackedcolumn_plot_mysql_jquery.zip?dl=0

 

By referring the above sample, please try to implement the multi-series stacked column in the same manner.

 

Hope this will help.

[P.A.Trick]

Yes, I have tried this in several different examples from your support team, but it does not work as given. The echo outputs from the php in the sample and in my php are both in the correct json format. I can take either echo and render them directly with fusioncharts.

In the provided sample, I get the ajax error message alert. When I use the same method to my application, i do not get the alert, but i also do not render a chart.

The problem must lie in the ajax app, or I am missing something in my js/ folder to allow jquery to work properly. I changed the file paths in the sample to match my file directory.

The database works, and the php query and echo work.

Is there a simple method to test the jquery is working properly?

[Prerana]

Hello,

Please let me know, what error you are getting in console so that we can assist you further.

[P.A.Trick]

The error that appears from the fusionchart sample is "Ajax??????????!"

I do not get an error from MY code. I just do not get a chart rendered. I only get the "Your fustionchart will render here" message on the page.

[Prerana]

Hello,

Please check the browser console, and let us know about the error showing over there.

[HMJasmi]

I followed 

https://www.dropbox.com/s/jtpy457k08aoidt/stackedcolumn_plot_mysql_jquery.zip?dl=0

 

I added App.js 

$(function(){
      $.ajax({
        url: 'http://localhost/Data.php',
        type: 'GET',
        success : function(data) {
                categories = (data.categories);
                dataset = (data.dataset);
          var chartProperties = {
            "caption": "Eye Contact Bar Chart",
            "xAxisname": "Attempt",
            "yAxisName": "Time (In Seconds)",
            "numberPrefix": "",
            "plotFillAlpha": "80",

            //Cosmetics
            "paletteColors": "#0075c2,#1aaf5d",
            "baseFontColor": "#333333",
            "baseFont": "Helvetica Neue,Arial",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "showBorder": "0",
            "bgColor": "#ffffff",
            "showShadow": "0",
            "canvasBgColor": "#ffffff",
            "canvasBorderAlpha": "0",
            "divlineAlpha": "100",
            "divlineColor": "#999999",
            "divlineThickness": "1",
            "divLineIsDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
            "usePlotGradientColor": "0",
            "showplotborder": "0",
            "valueFontColor": "#ffffff",
            "placeValuesInside": "1",
            "showHoverEffect": "1",
            "rotateValues": "1",
            "showXAxisLine": "1",
            "xAxisLineThickness": "1",
            "xAxisLineColor": "#999999",
            "showAlternateHGridColor": "0",
            "legendBgAlpha": "0",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "legendItemFontSize": "10",
            "legendItemFontColor": "#666666"
        },
        
          apiChart = new FusionCharts({
            type: 'mscolumn2d',
            renderAt: 'chart-container',
            width: '550',
            height: '350',
            dataFormat: 'json',
            dataSource: {
                "chart": chartProperties,
                "categories": categories,
                "dataset": dataset,                 
                }
        });
          apiChart.render();
        }
      });
    });

Also I added this html file

<!DOCTYPE html>
<html>
</body>
    <div id="chart-container">Chart will render here</div>
    <script src="jquery/jquery-3.1.1.min.js"></script>
    <script src="jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
    <script src="js/fusioncharts.charts.js"></script>
    <script src="App.js"></script>    
</body>    
</html>

What I am getting from Data.php is 

{"categories":[{"category":[{"label":""},{"label":""},{"label":""}]}],"dataset":[{"seriesName":"Is Eye Contact","data":[{"value":"10.01"},{"value":"5.02"},{"value":"10.21"}]},{"seriesName":"Not Eye Contact","data":[{"value":"3.04"},{"value":"4.34"},{"value":"5.32"}]}]}

After all of this the chart is not rendering

I coppied  the above JSON  object (and I removed the first and the last curly bracket) to the normal html sample (available at https://www.fusioncharts.com/dev/chart-guide/multi-series-charts/creating-multi-series-charts.html) and it worked completely fine.

 

How can I match the json object with what is required by the chart?

(I am not a computer engineering student :'))

Edited February 15, 2018 by HMJasmi

[Prerana]

Hello,

Please let us know, are you getting any error while rendering the chart?

[HMJasmi]

Hello

I got it solved by fixing the app.js

I was missing

async: false,

data: {}, 

dataType: "json",

[Prerana]

Hello,

Glad to know that the issue has been solved.

Happy FusionCharting