Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Having problems with Chart.js "extra options"

I'm trying to make a graph with HTML5, stumbled upon Chart.js that seemed to be perfect, got it working right away and fiddled around with the core options and got exactly what I want. I then went to the documentation site: http://www.chartjs.org/docs/ and looked at the "line graph options" section, and tried to add some of my own to further design my graph.

Here is a JsFiddle of my graph (http://jsfiddle.net/Skylights/j8Ah3/) ...and a comment where the "extra" options just do absolutely nothing...I have no idea what I'm doing wrong..where I should be placing those extra options to get them working.

I think I've missed something with adding or allowing options.

//Visitors Graph

var lineChartData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    datasets: [{
        fillColor: "rgba(0,0,0,0)",
        strokeColor: "rgba(197,115,30,1)",
        pointColor: "#c5731e",
        pointStrokeColor: "#c5731e",
        data: [65, 59, 90, 81, 56, 55, 40],

        // A few random options that don't work...
        scaleFontColor : "#f00",
        datasetStrokeWidth : 5,

    }, {
        fillColor: "rgba(0,0,0,0)",
        strokeColor: "rgba(197,171,30,1)",
        pointColor: "#c5ab1e",
        pointStrokeColor: "#c5ab1e",
        data: [28, 48, 40, 19, 96, 27, 100]
    }]
}

// Draw Visitors Graph Line
var myLine = new Chart(document.getElementById("visitors-graph").getContext("2d")).Line(lineChartData);
like image 911
Justin Seals Avatar asked Dec 06 '22 06:12

Justin Seals


1 Answers

You're adding those to the wrong sub-object; the options are supposed to be passed as the second argument, like so:

var lineChartData = {
    ...
};

var options = {
    scaleFontColor: "#f00",
    datasetStrokeWidth: 5
};

var myElement = document.getElementById("visitors-graph").getContext("2d");

var myLine = new Chart(myElement).Line(lineChartData, options);

Demo: http://jsfiddle.net/tG7tc/

like image 141
Asad Saeeduddin Avatar answered Dec 08 '22 19:12

Asad Saeeduddin