I'm trying to change the fill color between a few data points e.g. between point 1,2 is black, and between point 3-5 is red.
An example is with amCharts: http://www.amcharts.com/demos/line-with-changing-color/
I have tried changing the fillColor property of a point but all that seems to do is just change the fill color of the dot.
var chart = new Chart(ctx).LineWithLine(data, options);
chart.datasets[0].points[0].fillColor = "purple";
chart.datasets[0].points[1].fillColor = "purple";
chart.datasets[0].points[2].fillColor = "purple";
chart.update();
If I change the fill color in the options however, I see the fill color of the chart changes as expected. Am I using the wrong property or is there a bug in the library?
JS Fiddle: https://jsfiddle.net/hdnu4bpa/
p/s: This question only changes the colour of the dot, which is not what I want.
The fill color is for the entire series and not for areas between points.
However, since you don't have tooltips (you had tooltipEvents set to an empty array), you can achieve what you want using 3 different series and the fact that Chart.js does not plot null values.
Different fillColors for a Line
Here's what its going to look like
We make 3 series (you could do this programmatically if your data and ranges are dynamic - that's more of a JavaScript question than a Chart.js one though)
var data = {
labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
datasets: [{
data: [12.5, 3.1, null, null, null],
fillColor: "rgba(151,205,187,0.2)",
strokeColor: "rgba(151,205,187,1)",
pointColor: "rgba(151,205,187,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,205,187,1)",
}, {
data: [null, 3.1, 3.3, 4.2, null],
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: [null, null, null, 4.2, 15.5],
fillColor: "rgba(205,151,187,0.2)",
strokeColor: "rgba(205,151,187,1)",
pointColor: "rgba(205,151,187,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(205,151,187,1)",
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var options = {
showTooltips: false,
datasetFill: true,
}
var chart = new Chart(ctx).Line(data, options);
I've just adapted the code from your fiddle to show the relevant bits (it would work equally well with your LineWithLine extension)
You can rearrange the series if you want a certain color to come up on top at the junctions (-10m and -2m in your data). The later series' color takes precedence.
Fiddle - https://jsfiddle.net/kurtybra/
Related
I'm hoping I can add markup to each dataset individually so that I can change the colors with css.
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["(1)","(2)","(3)","(4)","(5)"],
datasets: [
{
label: "Food Chart",
fillColor: "#000066",
strokeColor: "transparent",
pointColor: "red",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: calcChart(),
}
]
}
var options = {
scaleShowHorizontalLines: true,
barValueSpacing : 5,
scaleBeginAtZero : true,
barValueSpacing : 25
}
var myBarChart = new Chart(ctx).Bar(data,options);
Since Chart.js and Canvasjs both use the canvas element to draw the charts you can't interact with the elements using CSS.
If you want to use custom CSS to the chart elements you will need to use a SVG library like highcharts.
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
};
The chart js v2 is overlapping with is there a way to move the labelString of scaleLabel further down so that it does not overlap.Please view the screen shot marked in yellow and red part.
Part of the code is as following
scales: {
xAxes: [{
display: true,
ticks: {
autoSkip: false,
autoSkipPadding: 20
},
scaleLabel: {
display: true,
labelString: "ProductName(ProductName)"
}
}],
There are two possible solutions to your problem:
1: This is for a line chart, but can easily tailored to a bar chart.
The legend is part of the default options of the ChartJs library. So
you do not need to explicitly add it as an option.
The library generates the HTML. It is merely a matter of adding that
to the your page. For example, add it to the innerHTML of a given DIV.
(Edit the default options if you are editing the colors, etc)
<div>
<canvas id="chartDiv" height="400" width="600"></canvas>
<div id="legendDiv"></div>
</div>
<script>
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "The Flash's Speed",
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: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "Superman's Speed",
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: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var myLineChart = new Chart(document.getElementById("chartDiv").getContext("2d")).Line(data);
document.getElementById("legendDiv").innerHTML = myLineChart.generateLegend();
</script>
2: Adding a legend template in chart options
You'll also need to add some basic css to get it looking ok.
//legendTemplate takes a template as a string, you can populate the template with values from your dataset
var options = {
legendTemplate : '<ul>'
+'<% for (var i=0; i<datasets.length; i++) { %>'
+'<li>'
+'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
+'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
+'</li>'
+'<% } %>'
+'</ul>'
}
//don't forget to pass options in when creating new Chart
var lineChart = new Chart(element).Line(data, options);
//then you just need to generate the legend
var legend = lineChart.generateLegend();
//and append it to your page somewhere
$('#chart').append(legend);
Either of these two options will work.
In your case the legend code will look something like this
(Assuming you already have a BarChart Generated)
<div id="legendDiv"></div>
document.getElementById("legendDiv").innerHTML = BarChart.generateLegend();
Then use css to format the legend however you would prefer (including adding spacing between the legend in the chart)
I am working on a code with an API. I need to create a line chart for these things called tickets. I need to call the information for them from the API. It has the ticket ID, date, and description. For the labeling, I have four weeks of the month. If I don't call it for every week, the chart won't show up. However, when I do this, instead of the information on a chart popping up, an alert does with all of the information for each week.
var lineChartData = {
labels: ["Week 1","Week 2","Week 3","Week 4"],
datasets: [{
label: "Tickets",
fillColor: "rgba(100,200,244,0.2)",
strokeColor: "rgba(100,200,244,1)",
pointColor: "rgba(200,255,255,.7)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [$.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}), $.get("http://velocity.data.wpengine.com:3000/tickets/", function(data){ alert(JSON.stringify(data));}).fail(function() {alert("FAIL");}) ] };
If you need the full code (this has CSS, HTML, and the JavaScript), click here.
$.get does not evaluate to a return value like a normal function call.
When the data is received from http://velocity.data.wpengine.com:3000/tickets/, your callback function gets called. In your case that is
function(data){ alert(JSON.stringify(data));}
You have access to the returned data inside this callback function. And you're just alerting it. Which is why you simply get an alert alone. You need to move your chart drawing code into this call back function. Something like
window.onload = function () {
$.get("http://velocity.data.wpengine.com:3000/tickets/list/", function(data){
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(100,200,244,0.2)",
strokeColor: "rgba(100,200,244,1)",
pointColor: "rgba(200,255,255,.7)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: data,
},
{
label: "My Second dataset",
fillColor: "rgba(100,200,244,0)",
strokeColor: "rgba(100,200,244,0)",
pointColor: "rgba(200,255,255,0)",
pointStrokeColor: "rgba(255,255,255,0)",
pointHighlightFill: "#rgba(255,255,255,0)",
pointHighlightStroke: "rgba(220,220,220,0)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
};
var ctx1 = document.getElementById("chart1").getContext("2d");
window.myLine = new Chart(ctx1).Line(lineChartData, {
showScale: false,
pointDot: true,
responsive: true
});
var ctx2 = document.getElementById("chart2").getContext("2d");
window.myLine = new Chart(ctx2).Line(lineChartData, {
responsive: true
});
....
When I'm using an array to fill in my line chart it's kinda doing something odd.
I noticed when I add 7 new points it works properly like this:
But when I add 8(or more) new points instead of 7 the result is this:
below you can find my code:
<script>
var arrayGegevens = <?php echo json_encode($array); ?>;
var data =
{
labels: [],
datasets: [
{
label: "Machine activity",
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: []
}]
};
var ctx = document.getElementById("canvas2").getContext("2d");
var myLineChart = new Chart(ctx).Line(data,
{
bezierCurve: false,
animation: false
});
for(i = 0; i < 8; i++) // 8 should be arrayGegevens.Length (=20)
{
myLineChart.addData([arrayGegevens[i]['MachineStatus']], arrayGegevens[i]['Time']);
}
</script>
So am I doing something wrong or is this a bug?
Seems like the problem was with the length of the labels (2015-3-24 14:55:00). I substringed them down to 14:55 and now I can fit way more of them in 1 line chart!