<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>    
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
<script  src="../../../dhtmlxForm/codebase/dhtmlxform.js"></script>    
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxDataView/codebase/dhtmlxdataview.css">
<script  src="../../../dhtmlxDataView/codebase/dhtmlxdataview.js"></script>
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxChart/codebase/dhtmlxchart.css">
<script  src="../../../dhtmlxChart/codebase/dhtmlxchart.js"></script>
<script type="text/javascript" src="../../codebase/datastore.js"></script>
 
 
<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
<div id="gridbox3" style="width:600px; height:70px; background-color:white;"></div>
<input type="button" value="save" onclick="myform.save()"><hr>
<div id="gridbox2" style="width:600px; height:270px; background-color:white;"></div>
<div id="gridbox4" style="width:600px; height:70px; background-color:white;"></div>
<input type="button" value="save" onclick="myform2.save()">
<br><hr><br>
<div id="gridbox5" style="width:600px; height:270px; background-color:white;"></div>
<script>
var data = new dhtmlXDataStore({
    url: "../common/data/data.json",
    datatype: "json";
});
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../../../../../codebase/imgs/");
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Count,Name");
mygrid.setColumnIds("Maintainer,Version");
mygrid.init();
mygrid.sync(data);
var formData = [{
    type: "label",
    label: "Selected record"
}, {
    type: "input",
    name: "Maintainer",
    value: "",
    labelWidth: 100,
    label: "Maintainer"
}, {
    type: "input",
    name: "Version",
    value: "",
    labelWidth: 100,
    label: "Version"
}];
myform = new dhtmlXForm("gridbox3", formData);
myform.bind(mygrid);
 
data2 = new dhtmlXDataView({
    container: "gridbox2",
    type: {
        template: "<span class='dhx_strong'>#Maintainer#</span>#Package# <span class='dhx_light'>#Version#</span>",
        template_edit: "<textarea class='dhx_item_editor' bind='obj.Maintainer'>",
        height: 35;
    },
    edit: true;
});
data2.sync(data);
var formData2 = [{
    type: "label",
    label: "Selected record"
}, {
    type: "input",
    name: "Maintainer",
    value: "",
    labelWidth: 100,
    label: "Maintainer"
}, {
    type: "input",
    name: "Package",
    value: "",
    labelWidth: 100,
    label: "Package"
}];
myform2 = new dhtmlXForm("gridbox4", formData2);
myform2.bind(data2);
 
var barChart1 = new dhtmlXChart({
    view: "bar",
    container: "gridbox5",
    value: function(obj) {
        return obj.Maintainer.length;
    },
    yAxis: {
        start: 0,
        end: 100,
        step: 20
    }
});
barChart1.sync(data);</script>