Sankalp Jain
Sankalp Jain

Reputation: 3

Amchart not getting displayed when using dataloader from a function

I am calling the return of a function to amchart dataloader. The function is called on the click of a button. and the chart is also called on the click of that button. But the issue is that I am not getting the chart.

 function myFunction() {
              var edited = "[{";
                for(var i=0;i<3;i++) {
              var one = document.getElementById("testid"+i).value;
              var two =  document.getElementById("testavg"+i).value;
              edited += '"'+"Test_Id"+'":"'+one+'",'+'"Test_Average"'+':'+two+'},{';
                }
              edited = edited.slice(0,-2);
              edited += "]";
              alert(edited);
              return edited;  
              }


            function charts(){
            var chartDataa = myFunction();  
            var chart = AmCharts.makeChart( "chartdiv", {
                  "type": "serial",
                  "theme": "light",
                  "dataProvider": chartDataa,
                  "valueAxes": [ {
                    "gridColor": "#FFFFFF",
                    "gridAlpha": 0.2,
                    "dashLength": 0
                  } ],
                  "gridAboveGraphs": true,
                  "startDuration": 1,
                  "graphs": [ {
                    "balloonText": "[[category]]: <b>[[value]]</b>",
                    "fillAlphas": 0.8,
                    "lineAlpha": 0.2,
                    "type": "column",
                    "valueField": "Test_Average"
                  } ],
                  "chartCursor": {
                    "categoryBalloonEnabled": false,
                    "cursorAlpha": 0,
                    "zoomable": false
                  },
                  "categoryField": "Test_Id",
                  "categoryAxis": {
                    "gridPosition": "start",
                    "gridAlpha": 0,
                    "tickPosition": "start",
                    "tickLength": 20
                  },
                  "export": {
                    "enabled": true
                  }
                });
  }

The chart that I am getting right now looks like this

Upvotes: 0

Views: 149

Answers (1)

Robbert
Robbert

Reputation: 713

Your function myFunction returns a JSON string. amCharts dataProvider prop needs an array of objects (a JS object, not a JSON string). Try changing your myFunction to a function that creates an array with data object in it. (I'd also suggest to rename it into something more descriptive). Here's how you could do it:

function getChartData() {
          var dataprovider = [];
          for(var i = 0; i < 3; i++) {

            dataprovider.push({
              "Test_Id": document.getElementById("testid"+i).value,
              "Test_Average": document.getElementById("testavg"+i).value
            });

          }

          return dataprovider; 
}


function charts(){
        var chartData = getChartData();  
        var chart = AmCharts.makeChart( "chartdiv", {
              "type": "serial",
              "theme": "light",
              "dataProvider": chartData,
              "valueAxes": [ {
                "gridColor": "#FFFFFF",
                "gridAlpha": 0.2,
                "dashLength": 0
              } ],
              "gridAboveGraphs": true,
              "startDuration": 1,
              "graphs": [ {
                "balloonText": "[[category]]: <b>[[value]]</b>",
                "fillAlphas": 0.8,
                "lineAlpha": 0.2,
                "type": "column",
                "valueField": "Test_Average"
              } ],
              "chartCursor": {
                "categoryBalloonEnabled": false,
                "cursorAlpha": 0,
                "zoomable": false
              },
              "categoryField": "Test_Id",
              "categoryAxis": {
                "gridPosition": "start",
                "gridAlpha": 0,
                "tickPosition": "start",
                "tickLength": 20
              },
              "export": {
                "enabled": true
              }
            });
}

You could also keep you code the way it is, and change the last line of your myFunction to: return JSON.parse(edited);

Upvotes: 1

Related Questions