I am using a chart in my page using chart.js I have on my x axis dates while on my y axis values(cost). I want to keep the line chart continue its value until there is a change and have coded for that. Here is the output
In this as marked if the value is same I have dots plotted. I have an option to remove all dots but I want to remove dots if the value is same as previous.(there is no change). I would like to know if this is doable. If please guide me how to go for it?
Its not the same as marked for being duplicate...
I want them to be true or flse based on value. If value is zero or same as previous then dont display dot
HERE IS MY CODE
as.dashboard = {};
as.dashboard.adjustWidgetsHeight = function () {
var maxHeight = 0;
$(".panel-widget .panel-heading").height('auto');
$(".panel-widget .panel-heading").each(function () {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(".panel-widget .panel-heading").height(maxHeight);
};
as.dashboard.initChart = function () {
var data = {
labels: dayss,
//Number - Tension of the bezier curve between points
bezierCurveTension : 0.4,
datasets: [
{
label: "Machine costs History",
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)",
bezierCurve : false,
data: costVariations
}
, {
label: "My third dataset", // This ONE IS DUMMY IT HELPS IN
// SOLVING OVERLAPPING TOOL TIPS
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
responsive: true,
maintainAspectRatio: false,
tooltipTemplate: "<%if (value!=0){%><%= value %> <%= units %> <%}%>",
multiTooltipTemplate: "<%if (value!=0){%><%= value %> <%= units %> <%}%>",
});
};
$(document).ready(function () {
as.dashboard.adjustWidgetsHeight();
as.dashboard.initChart();
});
...
for (var i = 1; i <= data.datasets[0].data.length - 1; i++)
if (data.datasets[0].data[i - 1] === data.datasets[0].data[i])
myChart.datasets[0].points[i].display = false;
where myChart is your chart object
Fiddle - http://jsfiddle.net/3tok57dL/
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