0

I am trying to create a chart using Chart.js that shows the tracked usage over time. I gather all of my chart information into arrays that I now want to use with my chart. The only problem is that I am not sure how to do it. I have included my variables and for loop so show that information is being populated correctly. I have also included my data information with comments of where I want to put each of the Arrays.

These are my variables and how I am create my array:

//variables to use 
var ArrayForDailyUsage = [];
var ArrayForTotalUsage = [];
var theTotalUsageSoFar = 0;
var ArrayForTheDate = [];
var ArrayForHoldingTheUsageInformation = [];
var usageplan = 1024;

This is how I set up my data for a line graph:

var data = {
    labels: //This is where I want to add ArrayForTheDate[]
        ["Aug 1", "Aug 2", "Aug 3", "Aug 4", "Aug 5"],

    datasets: [{
            label: "Usage Plan",
            fillColor: "rgba(255,255,255,0.2)", //adds the color below the line
            strokeColor: "rgba(224,0,0,1)", //creates the line
            pointColor: "rgba(244,0,0,1)", //gets rid of the circle
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: //this is where I want to add my ArrayForHoldingTheUsageInformation[]
                [usageplan, usageplan, usageplan, usageplan, usageplan]
        }, {
            label: "Overall Usage",
            fillColor: "rgba(48,197,83,0.2)",
            strokeColor: "rgba(48,197,83,1)",
            pointColor: "rgba(48,197,83,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(48,197,83,1)",
            data: //this is where I want to add ArrayForTotalUsage[] 
                [15, 25, 45, 70, 80]
        }, {
            label: "Daily Usage",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: //this is where I want to add ArrayForDailyUsage[]
                [15, 10, 20, 25, 10]
        }
    ]
};    

In case you were wondering, this is how I add my chart

var maxUsage = 1024;
var maxSteps = 5;

var myLineChart = new Chart(ctx).Line(data, {
    pointDot: false,
    scaleOverride: true,
    scaleSteps: maxSteps,
    scaleStepWidth: Math.ceil(maxUsage / maxSteps),
    scaleStartValue: 0
});

Why can I not do: labels:ArrayOfDates[];

Is there a simple way to add my arrays to my chart data? How do I approach this? Thank you in advance! Please let me know if I was unclear or if you have any questions!!!

1 Answer 1

1

is it that you just want to use the arrays you declare in the setup of your data? If so you can just reference them directly

var data = {
    labels: ArrayForTheDate,

    datasets: [{
            label: "Usage Plan",
            fillColor: "rgba(0,0,0,0.2)", //adds the color below the line
            strokeColor: "rgba(224,0,0,1)", //creates the line
            pointColor: "rgba(244,0,0,1)", //gets rid of the circle
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: ArrayForHoldingTheUsageInformation
        }, {
            label: "Overall Usage",
            fillColor: "rgba(48,197,83,0.2)",
            strokeColor: "rgba(48,197,83,1)",
            pointColor: "rgba(48,197,83,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(48,197,83,1)",
            data: ArrayForTotalUsage
        }, {
            label: "Daily Usage",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: ArrayForDailyUsage
        }
    ]
};

here is a fiddle usign some data to show it working http://jsfiddle.net/leighking2/35o54t2L/

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.