Home forums Report Bugs graph duplication

This topic contains 6 replies, has 3 voices, and was last updated by  praveen67084 5 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #11323

    praveen67084
    Member

    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

    #11324

    Sanjoy
    Moderator

    Praveen,

    We are unable to find the issue. Can you please create a fiddle. So, that we can look into it.

    #11325

    praveen67084
    Member

    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>

    #11328

    Vishwas R
    Keymaster

    Praveen,

    Here are solutions to have same charts in morethan one div by passing same chart-options. Check these solution 1 and solution 2.

    #11329

    praveen67084
    Member

    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.

    #11334

    Sanjoy
    Moderator

    Hi,

    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.

    #11426

    praveen67084
    Member

    Thank you, Sanjoy for giving your time and solution. now its working fine.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.