I'm using CanvasJS to create a stacked bar chart by week. Our weeks start on Saturday, but CanvasJS seems to default to weeks starting on Sunday. Thus, the labels for this chart start on 11/3 rather than 11/2 as I need.
I found this post on the CanvasJS forum which suggests that setting minimum and maximum might help, but when I tried that, it merely shifted the plot area (as you'd expect), but the labels still reflect Sundays, not Saturdays
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Evening Sales of a Restaurant"
},
axisX: {
intervalType: "week",
interval: 1
},
data: [
{
type: "stackedBar",
dataPoints: [
{ x: new Date("11/2/2019"), y: 71 },
{ x: new Date("11/9/2019"), y: 55},
{ x: new Date("11/16/2019"), y: 50 },
{ x: new Date("11/23/2019"), y: 65 },
{ x: new Date("11/30/2019"), y: 95 }
]
},
{
type: "stackedBar",
dataPoints: [
{ x: new Date("11/2/2019"), y: 20 },
{ x: new Date("11/9/2019"), y: 35},
{ x: new Date("11/16/2019"), y: 30 },
{ x: new Date("11/23/2019"), y: 45 },
{ x: new Date("11/30/2019"), y: 25 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
From CanvasJS:
It’s not possible to control the starting point of label, as of now.
We will reconsider this behaviour in future releases.
https://canvasjs.com/forums/topic/how-to-label-axisx-by-week-starting-on-saturday/
Related
I am trying to program a isotopic pattern calculator and want do visualize the resulting pattern, which should look something like this:
[isotopic pattern][1]
Therefore, I thought about using a bar chart and chart.js. However, all examples I've found do have months or years for labeling the x-axis. But I would need a "normal" x-axis as used for the scattering chart type so that the bars are included there in between numbers and not always directly above the label.
Can this be done using chart.js (or an alternative)?
Thanks,
celdri
[1]: https://i.stack.imgur.com/Jqtl8.png
You can make the scale a linear scale and just provide the x and y as coordinates.
var options = {
type: 'bar',
data: {
datasets: [{
label: 'Nice label',
data: [{
x: 10,
y: 5
}, {
x: 13,
y: 3
}, {
x: 20,
y: 8
}, {
x: 22,
y: 15
}],
backgroundColor: 'pink'
}]
},
options: {
scales: {
x: {
type: 'linear',
ticks: {
maxTicksLimit: 4
},
grid: {
display: false
}
},
y: {
grid: {
display: false
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
I've tried to place an UIElement / ChartMarkerXY on a chart where the animations are disabled.
Unfortunately, the UIElement / ChartMarkerXY was not in the right position on the first render.
However, when we do an another render (eg: when you put the mouse on the chart for show the AutoCursor), it has been moved to the right position.
I noticed that when the animations are enabled, the first frame of the animation put the UIElement / ChartMarkerXY at the same position.
Currently, I have a workaround for prevent this: chart.engine.renderFrame(0,0)
Demonstration of the bug
You can find in the snippet an example that reproduce the bug:
const {
AxisPosition,
AxisTickStrategies,
emptyLine,
lightningChart,
Point,
UIElementBuilders,
emptyFill
} = lcjs;
const dataSeries = [
{ x: -5, y: 0 },
{ x: 2, y: -5 },
{ x: 5, y: 6 },
{ x: 8, y: 12 },
{ x: 12, y: -12 }
];
const chart = lightningChart().ChartXY({
container: 'chart',
});
chart.setAnimationsEnabled(false);
chart.addLineSeries().add(dataSeries);
chart.addUIElement(UIElementBuilders.TextBox, {
x: chart.getDefaultAxisX(),
y: chart.getDefaultAxisY()
})
.setText('My Text')
.setPosition({ x: 0, y: 0 });
.lcCanvas {
width: 500px;
height: 300px;
}
<script src="https://unpkg.com/#arction/lcjs#3.1.0/dist/lcjs.iife.js"></script>
<h2>Example of the bug</h2>
<div id="chart" class="lcCanvas"></div>
Bug reports should be sent to support#lightningchart.com instead of posting here.
-- Snekw
Bug report sent.
Currently, the workaround I found is chart.engine.renderFrame(0,0).
This will force the re-render of the chart, and put the marker at the right position.
Here, a snippet of how implement the workaround.
const {
AxisPosition,
AxisTickStrategies,
emptyLine,
lightningChart,
Point,
UIElementBuilders,
emptyFill
} = lcjs;
const dataSeries = [
{ x: -5, y: 0 },
{ x: 2, y: -5 },
{ x: 5, y: 6 },
{ x: 8, y: 12 },
{ x: 12, y: -12 }
];
const chart = lightningChart().ChartXY({
container: 'chart',
});
chart.setAnimationsEnabled(false);
chart.addLineSeries().add(dataSeries);
chart.addUIElement(UIElementBuilders.TextBox, {
x: chart.getDefaultAxisX(),
y: chart.getDefaultAxisY()
})
.setText('My Text')
.setPosition({ x: 0, y: 0 });
chart.engine.renderFrame(0, 0); // Workaround: Add this for force the re-render
.lcCanvas {
width: 500px;
height: 300px;
}
<script src="https://unpkg.com/#arction/lcjs#3.1.0/dist/lcjs.iife.js"></script>
<h2>Workaround</h2>
<div id="chart" class="lcCanvas"></div>
I am using a CanvasJs chart. The chart is working fine. The Chart is taking time to load. I wanted to show a loading image until the chart loads. CanvasJs charts have no defined attributes for this. Any help is appreciated.
Html:
JS:
chart = CanvasJS.Chart("chartContainer1", {});
You can add loader-image(gif) or some text within the chart-container div so that image/text is shown in the div till the chart is initialized.
setTimeout(function(){
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Basic Column Chart"
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}
]
});
chart.render();
},2000);
img{
display: block;
margin: auto;
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;">
<img src="https://i.imgur.com/fXUIBfi.gif" alt="Chart will Render Here..."/>
</div>
I' am using http://canvasjs.com/ to make a chart for my website. I want to create a dynamic dataPoints using the for loop. The dataPoints will be used a variable to the canvasjs function to plot the chart. Below are my sample data and my code.
Sample:
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}
My current code
This code doesn't throw any error. All I see on the screen is just white area. All the values are passed correcting. I' am guess its the way I have structured the DataPoints. Please help.
DataPoints = [];
for (year = 1; year <= years; year++){
inflatedClosing = $('#lookup-table-preserved #row-' + year + ' .inflated-closing').text();
if( year === years ){
DataPoints.push({x: year, y: inflatedClosing});
} else {
DataPoints.push({x: year, y: inflatedClosing});
}
}
It should look like this
Here you have a working example with all the info you give:
var DataPoints = [], years = 3;
for (var year = 1; year <= years; year++){
var inflatedClosing = parseInt($('#lookup-table-preserved #row-' + year + ' .inflated-closing').text(), 10);
DataPoints.push({x: year, y: inflatedClosing, label : year});
}
//console.log(DataPoints);
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Title"
},
animationEnabled: true,
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "line",
dataPoints: DataPoints
}
]
});
chart.render();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="lookup-table-preserved">
<ul id="row-1">
<li class="inflated-closing">50</li>
</ul>
<ul id="row-2">
<li class="inflated-closing">100</li>
</ul>
<ul id="row-3">
<li class="inflated-closing">200</li>
</ul>
</div>
<div id="chartContainer" style="height: 300px; width: 100%; margin-top: 20px;"></div>
i have a values in date time format. I want to show the time on x-axis instead of date.
{"dateTime":"2016-03-16
07:09:41","value":"41.0"},{"dateTime":"2016-03-16
07:09:43","value":"43.0"},{"dateTime":"2016-03-16
07:09:45","value":"45.0"},{"dateTime":"2016-03-16
07:09:47","value":"47.0"},{"dateTime":"2016-03-16
07:09:49","value":"49.0"},{"dateTime":"2016-03-16
07:09:51","value":"51.0"},{"dateTime":"2016-03-16
07:09:53","value":"53.0"},{"dateTime":"2016-03-16
07:09:55","value":"55.0"},{"dateTime":"2016-03-16
07:09:57","value":"57.0"},{"dateTime":"2016-03-16
07:09:59","value":"59.0"},{"dateTime":"2016-03-16
07:10:01","value":"1.0"},{"dateTime":"2016-03-16
07:10:03","value":"3.0"},{"dateTime":"2016-03-16
07:10:05","value":"5.0"},{"dateTime":"2016-03-16
07:10:07","value":"7.0"},{"dateTime":"2016-03-16
07:10:09","value":"9.0"},{"dateTime":"2016-03-16
07:10:11","value":"11.0"},{"dateTime":"2016-03-16
07:10:13","value":"13.0"},{"dateTime":"2016-03-16
07:10:15","value":"15.0"},{"dateTime":"2016-03-16
07:10:17","value":"17.0"},{"dateTime":"2016-03-16
07:10:19","value":"19.0"},{"dateTime":"2016-03-16
07:10:21","value":"21.0"},{"dateTime":"2016-03-16
07:10:23","value":"23.0"},{"dateTime":"2016-03-16
07:10:25","value":"25.0"},{"dateTime":"2016-03-16
07:10:27","value":"27.0"},{"dateTime":"2016-03-16
07:10:29","value":"29.0"},{"dateTime":"2016-03-16
07:10:31","value":"31.0"},{"dateTime":"2016-03-16
07:10:33","value":"33.0"},{"dateTime":"2016-03-16
07:10:35","value":"35.0"},{"dateTime":"2016-03-16
07:10:37","value":"37.0"},{"dateTime":"2016-03-16
07:10:39","value":"39.0"},{"dateTime":"2016-03-16
07:10:41","value":"41.0"},{"dateTime":"2016-03-16
07:10:43","value":"43.0"},{"dateTime":"2016-03-16
07:10:45","value":"45.0"},{"dateTime":"2016-03-16
07:10:47","value":"47.0"},{"dateTime":"2016-03-16
07:10:49","value":"49.0"},{"dateTime":"2016-03-16
07:10:51","value":"51.0"},{"dateTime":"2016-03-16
07:10:53","value":"53.0"},{"dateTime":"2016-03-16
07:10:55","value":"55.0"},{"dateTime":"2016-03-16
07:10:57","value":"57.0"},{"dateTime":"2016-03-16
07:10:59","value":"59.0"},{"dateTime":"2016-03-16
07:11:01","value":"1.0"},{"dateTime":"2016-03-16
07:11:03","value":"3.0"},{"dateTime":"2016-03-16
07:11:05","value":"5.0"},{"dateTime":"2016-03-16
07:11:07","value":"7.0"},{"dateTime":"2016-03-16
07:11:09","value":"9.0"},{"dateTime":"2016-03-16
07:11:11","value":"11.0"},{"dateTime":"2016-03-16
07:11:13","value":"13.0"},{"dateTime":"2016-03-16
07:11:15","value":"15.0"},{"dateTime":"2016-03-16
07:11:17","value":"17.0"},{"dateTime":"2016-03-16
07:11:19","value":"19.0"},{"dateTime":"2016-03-16
07:11:21","value":"21.0"},{"dateTime":"2016-03-16
07:11:23","value":"23.0"},{"dateTime":"2016-03-16
07:11:25","value":"25.0"},{"dateTime":"2016-03-16
07:11:27","value":"27.0"},{"dateTime":"2016-03-16
07:11:29","value":"29.0"},{"dateTime":"2016-03-16
07:11:31","value":"31.0"},{"dateTime":"2016-03-16
07:11:33","value":"33.0"},{"dateTime":"2016-03-16
07:11:35","value":"35.0"},{"dateTime":"2016-03-16
07:11:37","value":"37.0"},{"dateTime":"2016-03-16
07:11:39","value":"39.0"}
Currently i am using canvas js chart.
<script src="/public/javascript/canvasjs.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Date Time Formatting"
},
axisX:{
valueFormatString: "hh:mm:ss" ,
labelAngle: -50
},
axisY: {
valueFormatString: "#,###"
},
data: [
{
type: "area",
color: "rgba(0,75,141,0.7)",
dataPoints: [
{ x: new Date(07,11,35), y: 0},
{ x: new Date(07,11,29), y: 20 },
{ x: new Date(07,10,53), y: 30 },
{ x: new Date(07,10,31), y: 10}
]
}
]
});
chart.render();
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
its shows only 12.00:00. Please help how can i show the time on x-axis