3

I have to generate a pie chart in application. So I tried this.

var il = document.getElementById("il").value;

var ir = document.getElementById('ir').value;
var iw = document.getElementById('iw').value; <script>
var pie = new d3pie("pieChart",{
        alert('hello');
    "header": {
        "title": {
            "fontSize": 22,
            "font": "verdana"
        },
        "subtitle": {
            "color": "#999999",
            "fontSize": 10,
            "font": "verdana"
        },
        "titleSubtitlePadding": 12
    },
    "footer": {
        "color": "#999999",
        "fontSize": 11,
        "font": "open sans",
        "location": "bottom-center"
    },
    "size": {
        "canvasHeight": 206,
        "canvasWidth": 450,
        "pieInnerRadius": "60%",
        "pieOuterRadius": "70%"
    },
    "data": {
        "content": [
            {
                "label": "Incidents Logs",
                "value": this.il,
                "color": "#38A4DD"
            },
            {
                "label": "Incidents resolved",
                "value":this.ir,
                "color": "#FFC400"
            },
            {
                "label": "incidentsWip",
                "value": this.iw,
                "color": "#B39DDB"
            }
        ]
    },
    "labels": {
        "outer": {
            "format": "none",
            "pieDistance": 32
        },
        "inner": {
            "format": "value"
        },
        "mainLabel": {
            "font": "verdana"
        },
        "percentage": {
            "color": "#e1e1e1",
            "font": "verdana",
            "decimalPlaces": 0
        },
        "value": {
            "color": "#e1e1e1",
            "font": "verdana"
        },
        "lines": {
            "enabled": true,
            "color": "#cccccc"
        },
        "truncation": {
            "enabled": true
        }
    },
    "tooltips": {
        "enabled": true,
        "type": "placeholder",
        "string": "{label}: {value}, {percentage}%",
        "styles": {
            "fontSize": 20
        }
    },  
    "effects": {
        "pullOutSegmentOnClick": {
            "effect": "linear",
            "speed": 400,
            "size": 8
        }
    }
});

</script>

However, I need to update data dynamically in charts. So i tried taking hidden input fields in html like this

<input id="il" type="hidden" value="<?php echo $data['incidentslogs'];  ?>" /> <input id="ir" type="hidden" value="<?php echo $data['incidentsresolved']; ?>" />          <input id="iw" type="hidden" value="<?php echo $data['incidentswip']; ?>"  />

I tried calling those hidden values using document.GetElementById().value , but dont know how to insert those values inside d3pie(). Please help.

rgk
  • 800
  • 1
  • 11
  • 32

0 Answers0