score:2

Accepted answer

following matt2's suggestion i ended up with this solution.

this is the working script:

function loadprojectactivitygraph(projectref, startdate, enddate)
{
var xmlhttp = new xmlhttprequest();

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readystate == 4 && xmlhttp.status == 200)
        {
        document.getelementbyid("projectactivitygraph").innerhtml = xmlhttp.responsetext;

        //get the value of the graph labels form input
        var graphlabelstring = document.forms.graphdata.graphlabels.value;

        //turn the value of the above into an array
        var graphlabelarray = graphlabelstring.split(","); 

        //get the value of the total number of datasets inputs
        var graphtotaldatasets = parseint(document.forms.graphdata.totaldatasets.value);

        //create an array used to generate the different colours for the graph
        //this array has 15 colours so can handle a max of 15 datasets
        //colour order is red green blue orange purple cyan black dark green dark blue light blue yellow, dark purple dark red light grey dark grey
        var graphcolourarray = ['#ff0000', '#00ff00', '#0000ff', '#ffd400', '#ff00ff', '#00ffff', '#000000', '#008620', '#001a9f', '#0096ff', '#dccf00', '#8d0088', '#890101', '#beb4b4', '#686868'];

        var graphdatasetsarray = [];

        for (i=0; i < graphtotaldatasets; i++)
        {
        var dataarray = document.forms.graphdata['graphdatasetvalues'+i].value.split(","); 
        graphdatasetsarray[i] = 
                            {
                            label: document.forms.graphdata['graphdatasetlabel'+i].value,
                            data: dataarray, 
                            fill: false, 
                            bordercolor: graphcolourarray[i], 
                            backgroundcolor: graphcolourarray[i],
                            pointbackgroundcolor: '#ffffff', 
                            tension: 0,
                            }   
        }

        //set the graph configuration values
        var linechartconfig = {
                    type: 'line',
                data: {
                labels: graphlabelarray,
                datasets: graphdatasetsarray
                    }
            };


        var ctx = document.getelementbyid("projectactivitygraphcanvas").getcontext("2d");
        window.myline = new chart(ctx, linechartconfig);
        window.myline.update();

        }
    }
    xmlhttp.open("get", "projectmanagement/hoursmanagement_ajax/response_projectactivitygraph.asp?projectref="+projectref+"&startdate="+startdate+"&enddate="+enddate, true);
    xmlhttp.send();

}


Related Query

More Query from same tag