Thank you, Sanjoy for giving your time and solution. now its working fine.
Thank you Vishwas R. Its working.
But the problem is one graph is on web page which is coming perfectly but another one is coming on Pop-Up but its not taking full width.
you check this by this url http://www.pfyidev.apikdd.com/product
At the bottom of this web page one graph is coming fine but another one when you click on Price Alert then is show a popup where the next graph show but it not take full width. can you tell me why its not take full width.
i don’t know how to create fiddle so i paste my code here. Please check this and reply as soon as possible. My code is….
Problem is it show only one graph but i want the same graph at two places.
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript” src=”js/canvasjs.min.js”></script>
<script type=”text/javascript”>
window.onload = function () {
CanvasJS.addColorSet(“blackline”,
[//colorSet Array
“#000000”
]);
var chart = new CanvasJS.Chart(“chartContainer”,
{
colorSet: “blackline”,
theme: “theme1”,
animationEnabled: true,
axisX: {
valueFormatString: “MMM-YYYY”,
interval:1,
intervalType: “month”,
lineColor:”#000″,
labelFontSize: 13,
labelFontColor: “#000″,
lineThickness:1,
gridColor:”#e4e4e4″,
gridThickness:”1”
},
axisY:{labelFormatter: function (e) {
return “Rs.” + CanvasJS.formatNumber(e.value, “#,#00″);
},
lineColor:”#9d9d9d”,
lineThickness:2,
labelFontSize: 13,
labelFontColor: “#000″,
gridColor:”#e4e4e4″,
gridThickness:”1″,
interval:5000,
viewportMinimum: 15000,
viewportMaximum: 45000,
includeZero: false
},
toolTip:{
borderColor:”#000″,
fontStyle:”normal”,
borderThickness:1,
cornerRadius:0
},
data: [
{
type: “line”,
toolTipContent: “In {x},<br/>Product price was <span style=’\”‘color: #ec5a5a;’\”‘>Rs.{y}</span>”,
lineThickness: 1,
markerSize: 8,
markerColor:”#ec5a5a”,
dataPoints: [
{ x: new Date(2015, 03, 1), y: 38000 },
{ x: new Date(2015, 04, 1), y: 36000 },
{ x: new Date(2015, 05, 1), y: 33000 },
{ x: new Date(2015, 06, 1), y: 32000 },
{ x: new Date(2015, 07, 1), y: 32000 },
{ x: new Date(2015, 08, 1), y: 30000 },
{ x: new Date(2015, 09, 1), y: 29000 },
{ x: new Date(2015, 10, 1), y: 25000 },
{ x: new Date(2015, 11, 1), y: 25500 },
{ x: new Date(2016, 00, 1), y: 29000 },
{ x: new Date(2016, 01, 1), y: 33000 },
{ x: new Date(2016, 02, 1), y: 32000 },
{ x: new Date(2016, 03, 1), y: 27000 }
]
}
]
});
chart.render();
}
</script>
<script type=”text/javascript” src=”canvasjs.min.js”></script></head>
<body>
<div id=”chartContainer” style=”height: 360px; width: 100%;”></div>
<br/><br/>
<div id=”chartContainer” style=”height: 360px; width: 100%;”></div>
</body>
</html>