<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
<script src="../common/testdata.js"></script>
<script type="text/javascript">
var chart1,chart2,chart3;
window.onload = function(){
    chart1 =  new dhtmlXChart({
        view:"radar",
        container:"chartContainer1",
        value:"#companyA#",
        preset:"area",
        xAxis:{
            template:"#month#",
            lineColor:"#A5A5A5"
        }
    });
    chart1.parse(companies,"json");
    chart2 =  new dhtmlXChart({
        view:"radar",
        container:"chartContainer2",
        value:"#companyA#",
        preset:"line",
        xAxis:{
            template:"#month#",
            lineColor:"#A5A5A5"
        }
    });
    chart2.addSeries({
        value:"#companyB#",
        line:{
            color:"#66cc00"
        },
        item:{
            color:"#ffffff",
            borderColor:"#66cc00"
        }
    });
    chart2.parse(companies,"json");
    chart3 =  new dhtmlXChart({
        view:"radar",
        container:"chartContainer3",
        value:"#companyA#",
        preset:"point",
        xAxis:{
            template:"#month#",
            lineColor:"#A5A5A5"
        },
        yAxis:{
            lineShape:"arc"
        }
    });
    chart3.parse(companies,"json");
}
</script>
 
<table>
    <tr>
        <td>
             <div id="chartContainer1" style="width:350px;height:250px;border:1px solid #A4BED4;clear:left"></div>
        </td>
        <td>
             <div id="chartContainer2" style="width:350px;height:250px;border:1px solid #A4BED4;clear:left"></div>
        </td>
        <td>
             <div id="chartContainer3" style="width:350px;height:250px;border:1px solid #A4BED4;clear:left"></div>
        </td>
    </tr>
</table>