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);
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With