I'll add a chart to my site, but if I do that, I've nothing from result. I use ChartJS as external library.
Here is my code:
var randomScalingFactor = function(){
return Math.round(Math.random()*100)
};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/src/Chart.Bar.js" type="application/javascript"></script>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
and a JS Fiddle
What I'm doing wrong?
Here is a working JS Fiddle: https://jsfiddle.net/qb2opyd8/3/
What I´ve done:
Used https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
Changed the JS Fiddle config to No wrap - in <body>
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.
Hi I am trying to show value from database in a javascript chart.
I tried ecoing the whole script, but it doesnt work.
Here is my code. Any clue on how to do that?
<body>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
</script>
</body>
I want to control these values:
labels : ["January","February","March","April","May","June","July"],
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
For this you need to pass JSON string as parameter to JavaScript function which will have associative array like month: scaling factor as key value pair. then in the function you can parse JSON string and fetch required data and pass to chart function.
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 %>"
});
}
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