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>
Related
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 want to update my Tooltip in my canvas js Chart without reloading the whole chart.
let arr = this.graph_arr;
let a = [];
let b = [];
arr.map((val) => {
val.data.map((val2) => {
b.push({
x: new Date(val2.date),
y: val2.revenue,
cn: val2.check_in,
rp: val2.rev_par,
arr: val2.avrr,
adr: val2.avg_daily_rate,
date: moment(val2.date).format('Do, MMMM'),
day: moment(val2.date).format('dddd')
})
})
a.push({
type: "spline",
name: val.channel_img.split('.')[0].toUpperCase(),
markerSize: 1,
showInLegend: true,
dataPoints: b,
label: val.channel_img,
})
b = [];
})
let chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
axisY2: {
valueFormatString: "1'%'"
},
axisY: {
suffix: "%"
},
axisX: {
gridThickness: 1,
valueFormatString: "DD/MMM"
},
legend: {
cursor: "pointer",
itemclick: this.toogleDataSeries
},
toolTip: {
shared: false,
content: this.selected == 'arr' ?
`<div style='\"'width: 210px;'\"'>ARR: {arr}, date: {date} </div>` :
this.selected == 'adr' ?
`<div style='\"'width: 210px;'\"'>ARR: {arr}, date: {date] </div>` : null,
cornerRadius: '8'
},
data: a
});
chart.render();
I have this Custom Tooltip. I want to change data in it from a dropdown without reloading. Currently I am using ternary operator and reloading chart. I want to change Tooltip content without reloading when user select from dropdown.
You can programmatically show toolip by using showAtX method. Below is an example:
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Show Tooltip based on dropdown"
},
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();
var xVal = document.getElementById("xVal");
//Pass dataPoints as option to drop-down
for(var i=0; i<chart.options.data[0].dataPoints.length;i++){
var xValOption = document.createElement("option");
xValOption.text = chart.options.data[0].dataPoints[i].x = chart.options.data[0].dataPoints[i].x;
xVal.appendChild(xValOption);
}
xVal.addEventListener( "change", showTooltip);
//
function showTooltip(e){
if(xVal.value)
chart.toolTip.showAtX(Number(xVal.value));
else
chart.toolTip.hide();
}
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 80%; float: left"></div>
<div style="float: right; width: 15%">
Show Tooltip for <select id="xVal">
<option>Select</option>
</select>
</div>
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/
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
I would like to print canvas.js chart using javascript.
The printing code.
when I click print button, the printing popup from browser will show up with printing preview nothing.
How can i resolve this problem??
var html = "<html>";
html += document.getElementById("chartContainerInPT").innerHTML;
html += "</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
html code
<div id="chart_divInPT" class="chart">
<div id="chartContainerInPT" style="height: 300px; width: 100%;"></div>
</div>
<button class="btn save" type="button" style="float: right;" id="printInPT">Print</button>
js
var chart = new CanvasJS.Chart(
"chartContainerInPT",
{
theme : "theme1",
title : {
text : ""
},
data : [ {
type : "column",
dataPoints : [
{
label : "Attempted",
y : chapterWiseResult['noOfAttempt']
},
{
label : "Correct",
y : chapterWiseResult['noOfCorrect']
},
{
label : "Wrong",
y : wrong
},
{
label : "Unattempted",
y : unattempted
},
]
} ]
});
How can I print chart in browser?
As solution you can save your canvas as image
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;
Updated 2021
Canvas.js chart now added the print(in pdf,png,jpg)formats feature.
enable the export option as below
title: {
text: "Alarm Statistics",
},
**exportEnabled: true**,// enable print option for the chart
data: [{...},{...}]
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Chart with export feature enabled",
},
exportEnabled: true,
axisX:{
minimum: -900,
interval: 100,
},
data: [
{
type: "area",
fillOpacity: .4,
lineThickness: 3,
dataPoints: [
{ x: -100, y: 71 },
{ x: -200, y: 55 },
{ x: -300, y: 50 },
{ x: -400, y: 65 },
{ x: -500, y: 105, markerType: "circle", markerSize: 9, markerColor: "brown", indexLabel: "Highest" },
{ x: -600, y: 68 },
{ x: -700, y: 28 },
{ x: -800, y: 34 },
{ x: -900, y: 14}
]
}
]
});
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>