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>
Related
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 want to design a chart like in the foto. The problem is, that I don't know how to put some labels in the bar! Also I don't want to show up the axes. And I also want to put the numbers like variables, because this chart is a result of a calculation of my calculator, is this possible?
<html>
<body>
<div id="chartContainer" style="height: 370px; width: 100;"></div>
</body>
<script>
//--------------------------------------CHART---------------
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Das können Sie beim Widerspruch einer Lebensversicherung herausholen:",
fontFamily: "arial black",
fontColor: "#695A42"
},
axisX: {
display: false,
interval: 1,
intervalType: "year"
},
axisY:{
display: false,
valueFormatString:"$#0bn",
gridColor: "#B6B1A8",
tickColor: "#B6B1A8"
},
toolTip: {
shared: false
},
data: [{
type: "stackedColumn",
showInLegend: true,
color: "#134d59",
name: "Q1",
dataPoints: [
{ y: 6.75, x: new Date(2010,0) },
{ y: 8.57, x: new Date(2011,0) },
{ y: 10.64, x: new Date(2012,0) }
]
},
{
type: "stackedColumn",
showInLegend: true,
name: "Q2",
color: "#e53011",
dataPoints: [
// { y: 6.82, x: new Date(2010,0) },
{ y: 9.02, x: new Date(2011,0) },
// { y: 11.80, x: new Date(2012,0) }
]
},
{
type: "stackedColumn",
showInLegend: true,
name: "Q3",
color: "#92c13f",
dataPoints: [
// { y: 7.28, x: new Date(2010,0) },
// { y: 9.72, x: new Date(2011,0) },
{ y: 13.30, x: new Date(2012,0) }
]
}]
});
chart.render();
function toolTipContent(e) {
var str = "";
var total = 0;
var str2, str3;
for (var i = 0; i < e.entries.length; i++){
var str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\"> "+e.entries[i].dataSeries.name+"</span>: $<strong>"+e.entries[i].dataPoint.y+"</strong>bn<br/>";
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<span style = \"color:DodgerBlue;\"><strong>"+(e.entries[0].dataPoint.x).getFullYear()+"</strong></span><br/>";
total = Math.round(total * 100) / 100;
str3 = "<span style = \"color:Tomato\">Total:</span><strong> $"+total+"</strong>bn<br/>";
return (str2.concat(str)).concat(str3);
}
}
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</html>
https://jsfiddle.net/c74wtx5n/
For giving labels inside bars you need to append following in your data set.
indexLabel:"{y} $",
indexLabelPlacement: "inside",
For hiding axis and its labels add following in axis options
gridThickness: 0,
lineThickness: 0,
labelFormatter: function(e){
return "";
},
tickLength: 0,
I have modified your Jsfiddle, Here is the link to your solution
If you want to learn more about canvasJs customization go here.
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 just ask a question which was basically I was having a problem of z-index which got resolved now. But there is now another problem which I am facing as when I am clicking back button it is working in IE rather it is opening location of the folder where the particular file exists. Is there a special way to go back to an initial position in IE.
My fiddle is at this location -
fiddle link
Anyway I posting my code -
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!-- <link type='text/css' rel="stylesheet" href='style.css' /> -->
<style>
#chartContainerpie{
position: absolute;
top: 130px;
left: 0px;
}
#chartContainer{
position: absolute;
top: 0px;
left: 0px;
}
#link {
visibility : hidden;
top : 0px;
left : 0px;
position:relative;
z-index:100;
}
</style>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "My First Chart in CanvasJS"
},
backgroundColor: "transparent",
data: [{
click: function(e){
anotherchart();
},
// Change type to "doughnut", "line", "splineArea", etc.
type: "doughnut",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainerpie", {
backgroundColor: "transparent",
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
indexLabelFontSize: "14px",
type: "pie",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
}
function anotherchart () {
document.getElementById("chartContainerpie").innerHTML = "";
document.getElementById("chartContainer").innerHTML = "";
document.getElementById("link").style.visibility = "visible";
// alert( e.dataSeries.type+ ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );
var chart = new CanvasJS.Chart("chartContainernew", {
backgroundColor: "transparent",
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
indexLabelFontSize: "14px",
type: "doughnut",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
}
</script>
</head>
<body>
<div>
<div id="chartContainerpie" style="height: 188px; width: 100%;"></div>
<div id="chartContainer" style="height: 400px; width: 100%; "></div>
</div>
<div>
<a id="link" href="">Back</a>
<div id="chartContainernew" style="height: 400px; width: 100%; "></div>
</div>
<div>
</div>
</body>
</html>
In IE, empty HTML HREF leads to directory listing. For further information, you can refer this link.
Meanwhile you can use
<a id="link" href='#' onclick='location.reload(true); return false;'>Back</a>
This will refresh the page and you will get your old chart back.
But there are better ways to do this. Since you are placing one div on another, you can always place one more hidden div which you can show on click while hiding original 2 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