I want to create a Line chart with multiple datasets dynamically in the chart.js library.
I am able to assign the data dynamically. But I want to create the datasets itself dynamically. I saw the link below:
How to add the elements dynamically from the html table for chart.js
and tried this :
var datasetValue = [];
for (var j = 0; j < count; j++) {
datasetValue[j] = [
{
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)' ,
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}]
}
var mydata = {
datasets : datasetValue
}
Here the count value is 3 and I want to display the 3 lines in the chart and the count value will vary. Even though the chart line color and title will be the same, I want to display the line first and will change the rest once this is solved.
I tried to access the data like so :
alert("Datasets:"+mydata.datasets[0].data);
It should show the data of the first dataset but it's showing undefined.
However in the below case:
var mydata1 = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [95,53,99,73,27,82,40],
title : "2014"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [35,43,59,31,50,66,55],
title : "2013"
}
]
}
alert("Datasets:"+mydata1.datasets[0].data);
I am able to get the data of first dataset. Could anyone please give me the solution?
I think you are looking for something like the following solution.
http://jsfiddle.net/5m63232a/
var datasetValue = [];
var count = 10;
for (var j=0; j<count; j++) {
datasetValue[j] = {
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)',
title :'2013',
data : [Math.round(Math.random() * 100),Math.round(Math.random() * 100)-10]
}
}
var mydata = {
datasets : datasetValue
}
alert("Datasets: "+mydata.datasets[0].data);
Create service to fetch json formt like :
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
Then add following javascript code
var j = [];
$.ajax({
type: 'GET',
url: 'http://' + window.location.host.toString() + "/path",
dataType: 'json',
success: function (data) {
j = data;
},
async: false
});
var chartData = {
labels: j.labels,
datasets: j.datasets
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(chartData, {
responsive: true,
animation: true,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= datasetLabel %> - <%=value %>"
});
}
Related
I'm trying to create a very simple chart using chart.js. But I don't get why it's not working. Here is what I tried so far. I'm using the 2.4 version. Thanks
Fiddle: https://jsfiddle.net/8zb4nr44/
Html
<div id="wasted-budget-chart">
<canvas width="500" height="150" id="wasted-budget-chart-canvas"/>
</div>
Js:
var options = {
responsive: true,
maintainAspectRatio: false,
datasetStrokeWidth : 3,
pointDotStrokeWidth : 4,
tooltipFillColor: "rgba(0,0,0,0.8)",
tooltipFontStyle: "bold",
};
var ctx = document.getElementById('wasted-budget-chart-canvas').getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(151,187,205,0.7)');
gradient.addColorStop(1, 'rgba(151,187,205,0)');
var data = {
type:'line',
labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
datasets: [
{
fillColor : gradient, // Put the gradient here as a fill color
strokeColor : "#ff6c23",
pointColor : "#fff",
pointStrokeColor : "#ff6c23",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ff6c23",
data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
}]
,
options: options
};
new Chart(ctx,data);
If you are going to pass the data in as one big object, you need to nest "data" one more time inside it, like this:
var data = {
type:'line',
data: { // add this here, and its closing brace of course
labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
datasets: [
{
fillColor : gradient, // Put the gradient here as a fill color
strokeColor : "#ff6c23",
pointColor : "#fff",
pointStrokeColor : "#ff6c23",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ff6c23",
data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
}]
},
options: options
};
I have gotten a line chart to work on a regular page. I have another page where I am using the same code, except the page is called via ajax. The chart is not appearing on the page that is called by ajax. Here is my code:
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Line(lineChartData, {
responsive: true
});
</script>
How do I get the chart to appear on a page loaded by ajax?
You DOM may not be ready as soon as your AJAX has completed. Try wrapping the Chart initialization in something that checks if the DOM is ready, like so
var interval = setInterval(function(){
var canvas = document.getElementById("canvas");
if (canvas) {
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Line(lineChartData, {
responsive: true
});
clearInterval(interval)
}
}, 100)
Also, you might want to ensure that your ajaxComplete function is actually getting called.
I'm trying to make charts of my analytics data using chart.js. Here's a JSFiddle example.
Currently it is with default sample data. What I want to do is something like this, with infinite scrolling from left to right:
How can I implement that behavior here?
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
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 : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
Chart.js came up with their official plugin to this
Recently I started a project with rails backend and ember js, however I find the documentation on both together is difficult to find or quite ambiguous, however I have parts of my app working perfectly.
Now, I decided to code a google line chart in an ember component. With ember inspector, it tends to throw an error on localhost:3000/#/chart currently the error:
Uncaught Error: <Sample.ChartView:ember526> Handlebars error: Could not find property 'chart' on object (generated chart controller)
So, here's my code for the relevant files:
assets/javascript/components/chart_component.js:
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 : [51,10,18,58,65,95,87]
},
{
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]
}
]
};
var data2 = {
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 : [51,10,18,58,65,95,87]
},
{
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]
}
]
};
Sample.LineChartComponent = Ember.Component.extend({
tagName: 'canvas',
attributeBindings: ['width', 'height'],
width: '480',
height: '360',
data: null,
didInsertElement: function() {
var ctx = this.get('element').getContext("2d");
var myNewChart = new Chart(ctx).Line(this.get('data'));
}
});
javascripts/routes/chart_route:
Sample.ChartRoute = Ember.Route.extend({
model: function(){
return Ember.Object.create({
modelOne: data,
modelTwo: data2
});
}
});
Where I'm calling the chart component.. javascripts/templates/chart.handlebars
<h2>Chart one</h2>
{{chart data= model.modelOne}}
<h2>Chart two</h2>
{{chart data= model.modelTwo}}
As for the naming convention:
Components must have a dash in their name. So blog-post is an
acceptable name, but post is not. This prevents clashes with current
or future HTML element names, and ensures Ember picks up the
components automatically.
http://emberjs.com/guides/components/defining-a-component/
As far as I see, you called your component simply "charts", that might be the problem.
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]
}
]
}
Question: How do I create such a Array?
Question: How can I fill this array with the Input of a Textfield?
Thanks!
Jan
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.
define something like this{
data = {
label:""
fields: [],
};
push the value
data.fields.push({
label: "label",
value: "your constructed value"
});