Am trying to get chartin web page according to the graph value. but

Question

<script type="text/javascript">
 $(document).ready(function (){
myFunc();

  });

  function myFunc(){

 if (document.getElementById('graph').value=10){

var chartData = [{"category":"Payment Details", "value1":10, "value2":90}];


var chart = AmCharts.makeChart("chartdiv", {
    "theme": "light",
    "type": "serial",
    "depth3D":100,
    "angle":30,
    "autoMargins":false,
    "marginBottom":100,
    "marginLeft":350,
    "marginRight":300,
    "pathToImages": "images/",
    "dataProvider": chartData,
    "valueAxes": [{
        "stackType": "100%",
        "gridAlpha": 0
    }],
    "graphs": [{
        "type":"column",
        "topRadius":1,
        "columnWidth":1,
        "showOnAxis":true,
        "lineThickness": 2,
        "lineAlpha": 0.5,
        "lineColor": "#FFFFFF",
        "fillColors": "#8d003b",
        "fillAlphas": 0.8,
        "valueField": "value1"
    },{
        "type":"column",
        "topRadius":1,
        "columnWidth":1,
        "showOnAxis":true,
        "lineThickness": 2,
        "lineAlpha": 0.5,
        "lineColor": "#cdcdcd",
        "fillColors": "#cdcdcd",
        "fillAlphas": 0.5,
        "valueField": "value2"
    }],

    "categoryField": "category",
    "categoryAxis": {
        "axisAlpha": 0,
        "labelOffset":40,
        "gridAlpha":0
    }
   });}

   else if (document.getElementById('graph').value=20){

  var chartData = [{"category":"Payment Details", "value1":20, "value2":80}];


var chart = AmCharts.makeChart("chartdiv", {
    "theme": "light",
    "type": "serial",
    "depth3D":100,
    "angle":30,
    "autoMargins":false,
    "marginBottom":100,
    "marginLeft":350,
    "marginRight":300,
    "pathToImages": "images/",
    "dataProvider": chartData,
    "valueAxes": [{
        "stackType": "100%",
        "gridAlpha": 0
    }],
    "graphs": [{
        "type":"column",
        "topRadius":1,
        "columnWidth":1,
        "showOnAxis":true,
        "lineThickness": 2,
        "lineAlpha": 0.5,
        "lineColor": "#FFFFFF",
        "fillColors": "#8d003b",
        "fillAlphas": 0.8,
        "valueField": "value1"
    },{
        "type":"column",
        "topRadius":1,
        "columnWidth":1,
        "showOnAxis":true,
        "lineThickness": 2,
        "lineAlpha": 0.5,
        "lineColor": "#cdcdcd",
        "fillColors": "#cdcdcd",
        "fillAlphas": 0.5,
        "valueField": "value2"
    }],

    "categoryField": "category",
    "categoryAxis": {
        "axisAlpha": 0,
        "labelOffset":40,
        "gridAlpha":0
    }
   });
 } 
  </script>
 <form:form method="GET" modelAttribute="xyz" action="xyz.htm" >
    <c:forEach items="${payouts}" var="payout" >
                        <tr>
     <input type="hidden" name="graph" id = "graph" value  
   ="${payout.graph}"/>     
 </tr>          

Am trying to get a cylindrical chart in jsp using the graph value. but the chart is not displaying the value=20. only if case is executing even the graph value is 20

please suggest how to get the chart in jsp on th basis of the graph value

Answer 1

I had used the below statement. and it worked fine for me.

   if (document.getElementById('graph').value==10){....}