ChartJS: Bar chart with axis ticks wider than categories - javascript

I'm using ChartJS to display a timeseries as a bar chart. Is there some way to separate the tick resolution on the x axis from the width of the bars?
The snippet below demonstrates the problem; it is showing hourly data over one week. Because options.scales.xAxes[0].time.unit is set to day, the tick marks appear one per day but the bars are also one day wide. Setting the unit to hour makes the bars the right width but leads to hundreds of tick marks on the x axis and makes the labels unreadable.
Is there some way to have the best of both?
const RANGE = (a,b) => Array.from((function*(x,y){
while (x <= y) yield x++;
})(a,b));
labels = [];
for(var ii = 0; ii < 170; ii++) {
labels.push((1483228800 + ii * 3600) * 1000);
}
var canvas = document.getElementById('chart'),
ctx = canvas.getContext('2d'),
startingData = {
labels: labels,
datasets: [
{
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: RANGE(1, 170),
label: 'Data'
},
]
},
options = {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
}
}]
}
};
// Reduce the animation steps for demo clarity.
var myLiveChart = new Chart(ctx, {
type: 'bar',
data: startingData,
options: options
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
</head>
<body>
Hello, world.<br>
<canvas id="chart" width="500" height="300"></canvas>
</body>
</html>

The property unitStepSize might be what you are looking for.
Here is a JSFiddle with a example
As per the documentation:
The number of units between grid lines.

Related

How to change highcharts radius according to data

i have data comprised of both positive and negative values which are to be displayed in a chart. i
am trying to display data in such a way that data point of positive values is greater than that of negative values.
the following is my code
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="demochart"></div>
<button id="update"> Update</button>
<script>
Highcharts.chart('demochart', {
chart: {
type: 'scatter'
},
xAxis: {
categories: [0, 10, 20, 30, 40, 50, 60, 70, 80]
},
series: [{
name: 'Temperature',
data: [15, 50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, 76.5]
}]
},function(chart){
$('#update').click(function(){
var data = chart.series[0].data;
var new_array = [];
new_array = data;
console.log(new_array);
for(var i = 0; i < new_array.length; i++){
console.log("For: "+ new_array[i].y);
if(new_array[i].y > 0){
new_array[i].y = "{y:"+ new_array[i] +",marker: {radius: 10}}"
console.log("If: "+ new_array[i].y);
}else{
new_array[i].y = "{y:"+ new_array[i] +",marker: {radius: 4}}"
console.log("Else: "+ new_array[i].y);
}
}
chart.series[0].setData(new_array);
})
});
</script>
</body>
</html>
When i click the update button, the size of data point value radius has to be changed.
Can this scenario will work ?
You can simply use the update method for points that meet your condition and change marker options. For performance reasons, it is better to set redraw parameter to false and redraw the chart after loop to avoid redrawing on every iteration.
Highcharts.chart('container', {
...
}, function(chart) {
$('#update').click(function() {
var points = chart.series[0].points;
points.forEach(function(point) {
if (point.y > 0) {
point.update({
marker: {
radius: 10
}
}, false);
}
});
chart.redraw();
})
});
Live demo: http://jsfiddle.net/BlackLabel/jznums3L/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Point#update
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw

Trying to update background color on chart.js

can someone help me with fixing the colors of my chart, it seems that it does not accepting the details included on it
HTML
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>Live Updating Chart.js</h1>
<canvas id="myChart" width="800" height="700"></canvas>
</body>
</html>
JS
$(document).ready(function(){
var count = 10;
var data = {
labels : ["1","2","3","4","5", "6", "7", "8", "9", "10"],
datasets : [
{
// backgroundColor: '#8bd600',
// fillColor : "rgba(220,220,220,0.5)",
// strokeColor : "rgba(220,220,220,1)",
// pointColor : "rgba(220,220,220,1)",
// pointStrokeColor : "#fff",
data : [0]
},
{
backgroundColor: '#8bd600',
pointBackgroundColor: '#8bd600',
borderWidth: 1,
borderColor: '#ffffff',
data : [28,48,40,19,96,87,66,97,92,85]
}
]
}
// this is ugly, don't judge me
var updateData = function(oldData){
var labels = oldData["labels"];
var dataSetA = oldData["datasets"][0]["data"];
var dataSetB = oldData["datasets"][1]["data"];
labels.shift();
count++;
labels.push(count.toString());
var newDataA = dataSetA[9] + (20 - Math.floor(Math.random() * (41)));
var newDataB = dataSetB[9] + (20 - Math.floor(Math.random() * (41)));
dataSetA.push(newDataA);
dataSetB.push(newDataB);
dataSetA.shift();
dataSetB.shift();
};
var optionsAnimation = {
//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 : 20,
//Number - The value jump in the hard coded scale
scaleStepWidth : 10,
//Number - The scale starting value
scaleStartValue : 0
}
// Not sure why the scaleOverride isn't working...
var optionsNoAnimation = {
animation : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : 1,
//Number - The value jump in the hard coded scale
scaleStepWidth : 1,
//Number - The scale starting value
scaleStartValue : 0
}
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var optionsNoAnimation = {animation : false}
var myNewChart = new Chart(ctx);
myNewChart.Line(data, optionsAnimation);
setInterval(function(){
updateData(data);
myNewChart.Line(data, optionsNoAnimation)
;}, 750
);
});
I am trying to get this design
the problem occurs on the background color not accepting the black
You could check the running version of it here https://codepen.io/thisisasample001/pen/NgKKJm
Since, there is no native way of changing the background color of chart in ChartJS, hence, you would have to do some css styling to accomplish so ...
#myChart {
background-color: #22293d;
}
additionally, if you want the graph­'s fill color to match chart­'s background color then, you need to set datasetFill property to false in your chart options ...
var optionsNoAnimation = {
datasetFill: false,
...
}
Here is the working demo on JSFiddle

show maximum labels in chart.js

I am creating a project using JavaScript. In my project i am integrating google charts, In my chart i want to show only five labels.I don't know how can i do this.Here is code:
var N = 10;
// Array filled with N values at '0'
var zero_array = [];
for (i = 0; i < N; i++)
zero_array.push(0);
// The data of the chart, describe the differents sets of data you want with points, colors...
var data = {
labels: zero_array,
datasets: [
{
showXLabels: 5,
label: zero_array, // Name of the line
data: zero_array, // data to represent
// The following makes the line way less ugly
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)",
}
]
};
// We wait for everything to be loaded
window.onload = function main() {
// Get the context of the canvas
var ctx = document.getElementById("line_example").getContext("2d");
// Create the Chart object
var line_example_chart = new Chart(ctx).Line(data);
// Used for the labels on the X axis
var label_idx = 1;
// Function to execute to remove then add a new random value to the chart
function rand_value() {
// Generate a random integer
var rand_val = Math.floor(Math.random() * 100);
// Remove the point at the far left of the chart
line_example_chart.removeData();
// Add the random value at the far right of the chart
line_example_chart.addData([rand_val], label_idx++);
}
// Run rand_value() every 2 seconds
window.setInterval(rand_value, 2000);
}
plunker link:
https://plnkr.co/edit/fat6hRS4lFnAEjoiSORW?p=preview
please help.
Looking at your code, just change N to 5:
var N = 5;
https://plnkr.co/edit/eJP4G6bYuGB5NaYvcQGX?p=preview
Please update below line and you can see only 5 nodes in your chart
var N = 5;

Remove axis on IDD chart

I'm trying to visualize a time series using IDD. How can I remove the X axis that indicates float values from the chart and leave only time stamps?
Here is my code:
var timeSeriesChart = InteractiveDataDisplay.asPlot("chart");
var timeSeriesData = JSON.parse('{\
"times":["2016-03-28 16:00","2016-03-28 17:00","2016-03-28 18:00"],\
"time_locations":[0.6,1.2,1.8],\
"values":[3.0, 4.0, 5.0]}');
timeSeriesChart.polyline("Time series",
{
y: timeSeriesData.values,
x: false,
stroke: "rgb(89,150,255)",
thickness: 3
});
timeSeriesChart.addAxis("bottom", "labels", {
labels: timeSeriesData.times,
ticks: timeSeriesData.time_locations
});
see the chart
Try
var numAxis = timeSeriesChart.getAxes("bottom");
numAxis[0].remove();
To remove existing axis before adding your labeled axis.
And after you add your labeled axis, attach grid lines to this new axis:
var gridLines = $('#chart > div[data-idd-plot="grid"]');
var grid = timeSeriesChart.get(gridLines[0]);
grid.xAxis = timeAxis.axis;

Drawing line chart in chart.js placing dots only when value changes

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/

Categories