CODEWITHSUNDEEP
phpjavascripthtmlmysqlamcharts
engineerKev
engineerKev

Reputation: 335

AmCharts with MySQL

I've been working, for quite sometime, on creating a graph using dynamic data. I am following this tutorial

http://blog.amcharts.com/2011/03/amcharts-javascript-tutorials-part-2.html

I have a php file, that works, and successfully queries the MYSQL server I've set up, and creates a text file.

for the time being, I only have 16 entries in my database, however, I have a second java program that clears my schema and repopulates it whenever it is executed....so the data won't stay the same all the time.

In my text file the format of my data is as follows:

seconds,threads\n

I am keeping track of my machine's total active threads.

Using the data in the my text file, the total number of active threads, and AmCharts, I am trying to create a graph. However, it just doesn't seem to be working. I've meticulously gone through my code, but can't seem to figure out why it doesn't work. However, when I make a graph with static data, it works...beautifully I might add.

So my question is, what am I doing wrong? Or what do you guys think the problem is?

this is my html code:

<html>
 <head>
<meta http-equiv="Content-Type" content ="text/html; charset = utf-8">
<title>Active Threads</title>
<script src="js\amcharts.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
    /*var chartData = [{ country: "USA", visits: 4252 },
                { country: "China", visits: 1882 },
                { country: "Japan", visits: 1809 },
                { country: "Germany", visits: 1322 },
                { country: "UK", visits: 1122 },
                { country: "France", visits: 1114 },
                { country: "India", visits: 984 },
                { country: "Spain", visits: 711 },
                { country: "Netherlands", visits: 665 },
                { country: "Russia", visits: 580 },
                { country: "South Korea", visits: 443 },
                { country: "Canada", visits: 441 },
                { country: "Brazil", visits: 395 },
                { country: "Italy", visits: 386 },
                { country: "Australia", visits: 384 },
                { country: "Taiwan", visits: 338 },
                { country: "Poland", visits: 328}];

        window.onload = function() {
            var chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "country";
            chart.margingTop = 15;
            chart.marginLeft = 55;
            chart.marginRight = 15;
            chart.margingBottom = 80;
            chart.angle = 30;
            chart.depth3D = 15;

            var catAxis = chart.categoryAxis;
            catAxis.gridCount = chartData.length;
            catAxis.labelRotation = 90;

            var graph = new AmCharts.AmGraph();
            graph.balloonText = "[[category]]: [[value]]";
            graph.valueField = "visits"
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 0.8;
            chart.addGraph(graph);

            chart.write('chartContainer');
    }*/

    var chart; 
    var dataProvider;

    window.onload = function(){
        createChart();
        loadCSV("secondsAndThreads.txt");
    }
    function loadCSV(file){
        if (window.XMLHttpRequest){
            var request = new XMLHttpRequest();
        }
        else {
            var request = new ActiveXObject('Microsoft.XMLHTTP');
        }

        request.open('GET', file, false);
        request.send();
        parseCSV(request.responseText);
    }
    function parseCSV(data){
        data = data.replace (/\r\n/g, "\n");
        data = data.replace (/\r/g, "\n");
        var rows = data.split("\n");
        dataProvider = [];
        for (var i = 0; ; i < rows.length; i++){
            if(rows[i]){
                var column = rows[i].split(",");

                var seconds = column[0];

                var threads = column[1];

                var dataObject = {seconds:seconds, threads:threads};

                dataProvider.push(dataObject);
            }
        }
        alert(column);
        chart.dataProvider = dataProvider;

        chart.validateData();
    }
    function createChart(){
        chart = new AmCharts.AmSerialChart();

        chart.categoryField = "seconds";

        var graph = new AmCharts.AmGraph();

        graph.valueField = "threads";

        graph.type = "column";

        chart.addGraph(graph);

        chart.write('chartdiv');
    }
</script>

   </head>
      <body style="background-color: #EEEEEE">
    <div id = "chartdiv" style= "width:900px; height:500px; background-    color:#FFFFFF"></div>
  <br>
  <br>
 </body>
 </html>

I have commented out the graph with static data(that works), and the non-comment portion(the second part) is the one that refuses to work. The html file, the style.css file , and php file, that queries my database, all sit in this directory.

C:\wamp\www\amCharts\amcharts

The .js file is in this directory

C:\wamp\www\amCharts\amcharts\js

I am using wamp, and opening the html file in chrome. Finally, the dynamic data is NOT the same as the data of the static chart. The static data, of the countries, was the same data the AmCharts tutorial used. I think that's all the relevant information; so if you guys could help me out, I would really appreciate it.

Upvotes: 1

Views: 6393

Answers (1)

user3496946
user3496946

Reputation:

Just make an php file which returns this(or the content in that style):

var chartData = [{ country: "USA", visits: 4252 },
                { country: "China", visits: 1882 },
                { country: "Japan", visits: 1809 },
                { country: "Germany", visits: 1322 },
                { country: "UK", visits: 1122 },
                { country: "France", visits: 1114 },
                { country: "India", visits: 984 },
                { country: "Spain", visits: 711 },
                { country: "Netherlands", visits: 665 },
                { country: "Russia", visits: 580 },
                { country: "South Korea", visits: 443 },
                { country: "Canada", visits: 441 },
                { country: "Brazil", visits: 395 },
                { country: "Italy", visits: 386 },
                { country: "Australia", visits: 384 },
                { country: "Taiwan", visits: 338 },
                { country: "Poland", visits: 328}];

and include it into the file where is the armcharts plugin.

Upvotes: 1

Related Questions