Subversion Repositories php-qbpwcf

Rev

Rev 23 | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<html>
        <div id="donut" style="width:300px;height:300px;">
        </div>
</html>

<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/pie.js" type="text/javascript"></script>

<script>

/*
global donut var
*/      
var donut;

/*
 * change total issued label
 */
function changeLabel(chart)
{       
        title=chart.dataItem.title;
        value=chart.dataItem.value;
        donut.clearLabels();
        donut.addLabel(0,117,value,"center","34","#000000",0,1.0,false);
        donut.addLabel(0,160,title,"center","11","#000000",0,1.0,true);
}

/*
 * restore total issued label
 */
function restoreLabel(chart)
{       
        triggerBy=chart.type;
        title='restore label';
        value='restore Value';
        donut.clearLabels();
        donut.addLabel(0,117,value,"center","34","#000000",0,1.0,false);
        donut.addLabel(0,160,title,"center","11","#000000",0,1.0,true);
}

//donut data
donutData=
[
        {
        "title":"current",
        "value":100
        },
        {
        "title":"online",
        "value":50
        },
        {
        "title":"email",
        "value":40
        }
]

//make & show donut             
donut=AmCharts.makeChart("donut",
{
        "type": "pie",
        "theme": "none",
        "addClassNames": true,
        "balloonText": "<div style='font-size:36px;text-align:center'>[[percents]]%</div><div style='font-size:16px;'>[[title]]: <b>[[value]]</b></div>",
        "balloon": 
        {
                "fillAlpha": 1,
                "showBullet": true,
                "fixedPosition": false
        },
        "colors":
        [
                "#CCCCCC",
                "#9FCD61",
                "#4FB7E3"
        ],
        "allLabels":
        [
                {
                        "text": 100,
                        "align": "center",
                        "bold":false,
                        "x": -3,
                        "y": 117,
                        "size": 34
                },
                {
                        "text": "total issued",
                        "align": "center",
                        "bold": true,
                        "y": 160,
                        "size": 11
                }
        ],
        "dataProvider":donutData,                                                                          
        "titleField": "title",
        "valueField": "value",
        "labelRadius": -120,
        "radius": "42%",
        "innerRadius": "55%",
        "labelText": "",
        "creditsPosition": "bottom-left"
});
donut.addListener("rollOverSlice",changeLabel);
donut.addListener("rollOutSlice",restoreLabel);
        
</script>