We Keep Coding

Hide label on xAxis in Line-Chart in canvas Html5

I am implementing line chart and I want to hide x'Axis label from line chart. I putted scaleFontSize: 0, , Than x'Axis and Y'axis labels are hide. But I want to hide only x'Axis label.
var lineOptions = {
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Number - Tension of the bezier curve between points
bezierCurveTension : 0.4,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius : 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Re-draw chart on page resize
responsive: true,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% 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>"
};
var lineData = {
labels: data,
datasets: [
{
pointHighlightStroke: "rgba(151,187,205,1)",
data: []
}
]
};
var getElement = document.getElementById("departuresChart2");
var ctx = getElement.getContext("2d");
$scope.myNewChart = new Chart(ctx).Line(lineData, lineOptions);
I am taking reference from http://www.chartjs.org/docs/#line-chart-introduction.
I want to hide only A'axis label.I have seen one link in stackoverflow Remove x-axis label/text in chart.js. But still I am not able to fixed. Thanks

You have to set scale.xLabels property of your chart (instance), to an empty array - [] (hides x-axis gridlines), or $scope.myNewChart.scale.xLabels.map(e => '') (shows x-axis gridlines), to hide x-axis labels.
Example
var lineOptions = {
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.4,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill: true,
//Boolean - Re-draw chart on page resize
responsive: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% 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>"
};
var lineData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var getElement = document.getElementById("departuresChart2");
var ctx = getElement.getContext("2d");
myNewChart = new Chart(ctx).Line(lineData, lineOptions);
myNewChart.scale.xLabels = []; //or set -> myNewChart.scale.xLabels.map(e => '');
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="departuresChart2"></canvas>

C# MVC5 View dynamically filled Chart.js dont show up

I am trying to implement a chart of the chart.js library into my view. However, i am not able to display the chart as desired.
The particular part in my razor view:
<div class="col-md-8">
<p class="text-center">
<strong>Energy Consumption and Production: 1 Jan, 2016 - 30 Jul, 2016</strong>
</p>
<div class="chart-responsive">
<canvas id="trendChart" width="800" height="400"></canvas>
</div> #*/.chart-responsive*#
My Javascript code regarding the line chart:
$(function () {
var datachart = {
labels: [],
datasets: [
{
label: "Consumption",
backgroundColor: "rgba(215,220,67,0.3)",
borderColor: "rgba(220,220,220,0.7)",
borderWidth: 1,
hoverBackgroundColor: "rgba(220,220,220,1)",
hoverBorderColor: "rgba(220,220,220,0.5)",
data: []
},
{
label: "Production",
backgroundColor: "rgba(90,193,208,0.3)",
borderColor: "rgba(151,187,205,0.7)",
borderWidth: 1,
hoverBackgroundColor: "rgba(151,187,205,1)",
hoverBorderColor: "rgba(151,187,205,0.5)",
data: []
}
]
};
var trendChartOptions = {
//Boolean - If we should show the scale at all
showScale: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: false,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.3,
//Boolean - Whether to show a dot for each point
pointDot: false,
//Number - Radius of each point dot in pixels
pointDotRadius: 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a color
datasetFill: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>",
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
//Boolean - whether to make the chart responsive to window resizing
responsive: true
};
$.getJSON("/AdminLte/GetData", function (data) {
$.each(data, function (i, item) {
datachart.labels.push(item._DATE);
datachart.datasets[0].data.push(item.CONSUMPTION);
datachart.datasets[1].data.push(item.PRODUCTION);
})
});
var ctx = new Chart(document.getElementById("trendChart").getContext("2d")).Line(datachart, trendChartOptions);
});
And my controller method for dynamically filling the data:
public ContentResult GetData()
{
List<MeterDataTrendViewModel> meterDataTrend = new List<MeterDataTrendViewModel>();
var result =
from s in db.MeterDatas.ToList()
group s by new { s._DATE } into g
select new
{
read_date = g.Key._DATE,
CONSUMPTION = g.Sum(x => Convert.ToInt64(x.CONSUMPTION)),
PRODUCTION = g.Sum(x => Convert.ToInt64(x.PRODUCTION))
};
foreach(var res in result)
{
MeterDataTrendViewModel mdv = new MeterDataTrendViewModel();
mdv._DATE = res.read_date;
mdv.CONSUMPTION = res.CONSUMPTION.ToString();
mdv.PRODUCTION = res.PRODUCTION.ToString();
meterDataTrend.Add(mdv);
}
return Content(JsonConvert.SerializeObject(meterDataTrend), "application/json");
}
I`ve already debugged my js code and the data and labels array is filled correctly therefore my controller action is called. But there is only one datetime string displayed vertically so i guess it´s maybe aligned to the y-axis?
I can also fill the chart with static data and it´s displayed correctly. I cant figure out why my dynamic data isn´t displayed the right way.

I've managed to resolve this problem on my own with the following modifications.
$.getJSON("/AdminLte/GetData", function (data) {
$.each(data, function (i, item) {
chartlabels[i] = item._DATE;
cons[i] = item.CONSUMPTION;
prod[i] = item.PRODUCTION;
})
var ctx = new Chart(document.getElementById("trendChart").getContext("2d")).Line(datachart, trendChartOptions);
});
});

How to use values coming in ws.onmessage event into another function

I am working on web socket related project.In following snippet I am getting the data coming from the server. I want to use the this data(in str variable) into another function. Kindly suggest any solution. Thank you in advance.
/*ON RECEIVING MESSAGES VIA WEBSOCKET FROM THE SERVER***/
ws.onmessage = function (event) {
var mySpan = document.getElementById("messageGoesHere");
var mySpan2 = document.getElementById("messageGoesHere2");
var str = event.data;
var array = str.split('|');
mySpan.innerHTML = parseInt(array[2])
mySpan2.innerHTML = parseInt(array[3]);
};
$(function () {
//Here I want to print the data
// and I can easily use this data to my chart
var areaChartData = {
//labels: ["January", "February", "March", "April", "May", "June", "July"],
labels: ["10", "20", "30", "40", "50", "60", "100"],
datasets: [{
label: "Digital Goods",
fillColor: "rgba(60,141,188,0.9)",
strokeColor: "rgba(60,141,188,0.8)",
pointColor: "#3b8bba",
pointStrokeColor: "rgba(60,141,188,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(60,141,188,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
var areaChartOptions = {
showScale: true,
scaleShowGridLines: false,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.3,
//Boolean - Whether to show a dot for each point
pointDot: false,
//Number - Radius of each point dot in pixels
pointDotRadius: 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a color
datasetFill: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% 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>",
//Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//Boolean - whether to make the chart responsive to window resizing
responsive: true
};
//-------------
//- LINE CHART -
//--------------
var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
alert(lineChartCanvas);
var lineChart = new Chart(lineChartCanvas);
var lineChartOptions = areaChartOptions;
lineChartOptions.datasetFill = false;
lineChart.Line(areaChartData, lineChartOptions);
});

Do you mean something like this?
var mySpan = document.getElementById("messageGoesHere");
var mySpan2 = document.getElementById("messageGoesHere2");
function myCallback(event) {
var str = event.data;
var array = str.split('|');
mySpan.innerHTML = parseInt(array[2])
mySpan2.innerHTML = parseInt(array[3]);
};
/*ON RECEIVING MESSAGES VIA WEBSOCKET FROM THE SERVER***/
ws.onmessage = myCallback;

Chart Js Cannot read property 'length' of undefined

Using Chart js I am trying to pull data from Ajax call to supply to the Chart.
I found a few other postings where people have suggested delaying the canvas load but nothing has seemed to work. Currently this is the what I have below and the error that I get is
$(function () {
GetChartData();
function GetChartData() {
$.ajax({
url: ajaxURL,
method: 'GET',
dataType: 'json',
success: function (d) {
//-------------
//- BAR CHART -
//-------------
var barChartData = d;
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
// console.log(datajson);
//barChartData.datasets[1].fillColor = "#00a65a";
//barChartData.datasets[1].strokeColor = "#00a65a";
//barChartData.datasets[1].pointColor = "#00a65a";
var barChartOptions = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
//scaleBeginAtZero: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke: true,
//Number - Pixel width of the bar stroke
barStrokeWidth: 2,
//Number - Spacing between each of the X value sets
barValueSpacing: 5,
//Number - Spacing between data sets within X values
barDatasetSpacing: 1,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>",
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to make the chart responsive
responsive: true,
maintainAspectRatio: true
};
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
}
});
}
});
UPDATE HERE SHOWING HOW NON AJAX WORKS
The below code is taking the results of the Ajax get request (which I got from dumping it to the console) and creating a "hard coded" version of the same thing. The only thing that should technically be different is one has the data loaded at time of the page and the second the data is loaded very briefly after.
var chartData = {
"labels": [
"April"
],
"datasets": [
{
"label": "Not Sure What to Put Here",
"fillColor": "#662B60",
"strokeColor": "#662B60",
"pointColor": "#662B60",
"pointStrokeColor": "#662B60",
"pointHighlightFill": "#662B60",
"pointHighlightStroke": "#662B60",
"data": [
1
]
},
{
"label": "Not Sure What to Put Here",
"fillColor": "#88B56E",
"strokeColor": "#88B56E",
"pointColor": "#88B56E",
"pointStrokeColor": "#88B56E",
"pointHighlightFill": "#88B56E",
"pointHighlightStroke": "#88B56E",
"data": [
1
]
},
{
"label": "Not Sure What to Put Here",
"fillColor": "#48CA2B",
"strokeColor": "#48CA2B",
"pointColor": "#48CA2B",
"pointStrokeColor": "#48CA2B",
"pointHighlightFill": "#48CA2B",
"pointHighlightStroke": "#48CA2B",
"data": [
0.83
]
}
]
};
//-------------
//- BAR CHART -
//-------------
var barChartData = chartData;
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
//barChartData.datasets[1].fillColor = "#00a65a";
//barChartData.datasets[1].strokeColor = "#00a65a";
//barChartData.datasets[1].pointColor = "#00a65a";
var barChartOptions = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
//scaleBeginAtZero: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke: true,
//Number - Pixel width of the bar stroke
barStrokeWidth: 2,
//Number - Spacing between each of the X value sets
barValueSpacing: 5,
//Number - Spacing between data sets within X values
barDatasetSpacing: 1,
multiTooltipTemplate: "<%=datasetLabel%>: <%= value + ' %' %>",
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to make the chart responsive
responsive: true,
maintainAspectRatio: true
};
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
Update
I changed from the min version of chart.js to the full version so I could see where exactly it was erroring out at.
Here is the image from chrome console

The problem is that when your code executes, the canvas has not been created yet.
You should wrap your code inside a function and assign that function to window.onload event. You can see the sample code below.
window.onload = function() {
var ctx = document.getElementById("myChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "2015",
data: [10, 8, 6, 5, 12, 8, 16, 17, 6, 7, 6, 10]
}]
}
})
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>

Found the answer,
The Ajax results has to be parsed first.
resulting fix
var barChartData = JSON.parse(d);

running the following worked for me:
window.onload = function () {
}

For other users who have this problem, make sure your container canvas element exists, when called upon.

You may try putting the Chart.JS script tag and other custom JS scripts just before the end of **<**/body> tag.

It looks like you're using an object that doesn't exist, well at least I cant see it, datasets. I can only see length being called on this object, unless there's missing code?
I can see you assign d to barChartData
var barChartData = d;
So, you might want to replace the instances of datasets with barChartData.

It's an old question but, I had this issue as well and in my case my data was length = 0. I solved this just adding a validation before calling the the graph:
if (barChartData.length > 0)
{
objChart = Morris.Bar({....
}

Adding a Title to a Chart.js line graph

I'm trying to use fillText to draw on a chart.js canvas after it is rendered and it will not work. The best I can do is change the font of the chart. Here is my code.
var options = {
//Boolean - If we show the scale above the chart data
scaleOverlay: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: null,
//Number - The value jump in the hard coded scale
scaleStepWidth: null,
//Number - The scale starting value
scaleStartValue: null,
//String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth: 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels: true,
//Interpolated JS string - can access value
scaleLabel: "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily: "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize: 12,
//String - Scale label font weight style
scaleFontStyle: "normal",
//String - Scale label font colour
scaleFontColor: "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill: true,
//Boolean - Whether to animate the chart
animation: false,
//Number - Number of animation steps
animationSteps: 60,
//String - Animation easing effect
animationEasing: "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete: null
}
Chart Data labels and points are arrays.
var chartData = {
labels: labels,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: points
}
]
}
var ctx = $("#" + item.logon).get(0).getContext("2d");
var chart = new Chart(ctx).Line(chartData, options);
This is done with JSON data and after the call I have:
$("canvas").each(function (i, item) {
var context = $(this).get(0).getContext("2d");
context.textBaseline = 'top';
context.fillText('Test', 0, 0);
});
The graphs just load normally without any text. If I use the context.font then all of the labels on each canvas is changed. I have turned off loading animation. Any ideas?

Instead of drawing on the canvas, I simply add a label around the element
<label for = "idOfCanvas">
Your Label<br />
<canvas></canvas>
</label>

You'd need to add the title with specifics in your options section and ensure display is set to true. Something like so:
options: {
title: {
display: true,
text: 'Name of Your Line Chart'
}
}
Here's a link to the Chartjs documentation

In the option add this parameter
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"