Login to Ask a Question or Reply
You must be logged in to post your query.
Home › Forums › Report Bugs › graph duplication
graph duplication
- This topic has 6 replies, 3 voices, and was last updated 8 years, 4 months ago by
praveen67084.
-
June 8, 2016 at 2:19 pm #11323
I make a graph and it works perfectly but when i placed the same graph in another place in a same page then its not working, means graph show only at one place not both place; both divs are placed in same web page. Please help me as soon as possible. Thank you
June 8, 2016 at 2:55 pm #11324Praveen,
We are unable to find the issue. Can you please create a fiddle. So, that we can look into it.
June 9, 2016 at 10:03 am #11325i 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>
June 9, 2016 at 11:32 am #11328Praveen,
Here are solutions to have same charts in morethan one div by passing same chart-options. Check these solution 1 and solution 2.
June 9, 2016 at 1:53 pm #11329Thank 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/productAt 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.
June 9, 2016 at 7:49 pm #11334Hi,
In this case chart is rendering before container size set. To solve this you can call render method once the Price Alert button is been clicked. We are doing the same in our gallery using jQuery UI Dialog for popup.
June 22, 2016 at 10:19 am #11426Thank you, Sanjoy for giving your time and solution. now its working fine.
You must be logged in to reply to this topic.