2

I want to draw a graph on my page and would like to use Charts.js. The Documentation on

http://www.chartjs.org/docs/

says that the Chars I want to create needs an Array of Labels like this: 

var data = {

    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,59,90,81,56,55,40]
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : [28,48,40,19,96,27,100]
        }
    ]
}

  1. Question: How do I create such a Array?

  2. Question: How can I fill this array with the Input of a Textfield?

Thanks! Jan

Improve this question
1
  • 1
    You create the array by writing it like this in JavaScript… how else do you want to create it? Do you have the data coming from somewhere? How exactly would your textfield look like, i.e., what should users enter? Commented Nov 24, 2013 at 12:16

2 Answers 2

Reset to default
1

A1) The way you have written is the right way to create arrays in javascript

A2) Suppose you have a textfield with id='month'. You can access its value like this:

var month = document.getElementById('month').value

Next you can create an array var label = []; and add the data from the text field by pushing in the array. i.e label.push(month)

Once you have populated the array for label, you can assign this array to property labels of your data object.

Similarly to assign values to data, create an array var values = []; var values2 = []; Now populate the values and values2 array by pushing values into it.

var label = [];
var values = []; 
var values2 = [];
var month = document.getElementById('month').value;  
//keep on doing this for all input fields
label.push(month)
//similarly push data into values and values2.
//Now build your structure for chart as follows:
var data = {

    labels : label,
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : values
        },
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            data : values2
        }
    ]
}

Here label , values and values2 are the arrays you got from your textfields. Hope this helps.

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

3 Comments

Different case as in? I just gave an example for the labels array, so the user can proceed further to solve his query.
Yes this is how the user has to proceed, but user seems like a beginner, we have to help
As far my knowledge, First where have to define the structure and then start push the elements, wait I 'll post one example
0

define something like this{

data = {
        label:""
        fields: [],     
};

push the value

data.fields.push({
        label: "label", 
        value: "your constructed value"
        });
Improve this answer

Comments

Your Answer

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