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();
}
Source: stackoverflow.com
Related Query
- Chart JS Dynamic number of datasets
- Chart.js: summing number of items in active/shown datasets on yAxes of pie chart
- How to push a variable number of datasets to a chart data, without the _observer "magic"_ (using vuecharts.js)?
- Limit labels number on Chart.js line chart
- Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- ChartJS - Line Chart with different size datasets
- Line chart with large number of labels on X axis
- Chartjs - show elements in all datasets on hover using bar chart
- Chart JS, Choose different Y-axis for different datasets
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- ChartJS bar chart fixed width for dynamic data sets
- chart js with angular2 loading dynamic data only after zoomin
- Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one
- Chart.js plotting two json datasets on a line chart
- Chart JS dynamic chart
- Using unknown number of datasets in Chart.js
- Multiple bubble chart datasets for chartjs
- ChartsJS make number in middle for only one chart
- Dynamic line chart with chart.js and PHP
- Chart.js Radar chart multiple datasets
- Set minimum number of steps in line chart
- change stroke line color in chart according to datasets in react native
- ChartJS update chart with multiple datasets
- ChartJs - Round borders on a doughnut chart with multiple datasets
- Chart.js - Connect two datasets in a line chart at same y value
- Using two JSON objects to make Chart.JS Bar Chart Dynamic in Typescript / Angular
- How to make dynamic chart using Vue component with chart-js
- creating a dynamic number of charts using chart.js using angular
- Chartjs dynamic chart return both x & y axis undefined
More Query from same tag
- How to make dynamic chart with the next view? What libraries allows to customise exactly this like in my design?
- Can individual bubbles in a chartjs bubble chart have labels?
- Highlight background on a single hour with chart.js and annotations
- Cannot change the color of column chart according to its value
- Doughnut chart updates with twice the data
- Getting String array from node js to ejs
- What are these line-boxes called in Chart.js, and how do I turn them off?
- Mapping issue on Chart Js Bar Chart
- Set labels from array
- how to highlight a specific area on chartjs line chart
- Chart.js line chart display decimal values on Y axis
- How to make the last item on the chart js active?
- chartjs-plugin-dragdata isn''t working with scatter charts
- chartjs radar glowing edges effect
- Chartjs inner separation
- chartjs update() not updating
- Changing the Y axis unit in Chartjs
- chart.js streaming data plugin data format or config error
- Chartkick-vue bar chart - "horizontalBar" is not a registered controller
- Chart.JS how to change order of y-axis
- Chart.Mvc colliding with System.Web.Helpers.Chart
- Align doughnut/pie charts vertically in the container
- Disable background chart on chartjs
- How to retrieve the instance of a chart that is not global
- Is there a JavaScript Method/ Function to loop Objects via Keys into a array?
- ng2charts using borderColor with array value
- chartjs removing/redrawing canvas, graph not responsive
- How to remove the x-axis showing up for the bottom?
- Chart.js 2 - Always display only some tooltips in bubble chart
- Chartjs: how can i create a graph with multiple jsons files?