jQWidgets Forums

jQuery UI Widgets › Forums › Chart › not possible to redraw chart after emptying chart container div

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  ivailo 9 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    not possible to redraw chart after emptying chart container div Posts
  • June 4, 2015 at 2:47 am not possible to redraw chart after emptying chart container div #71983

    rtessler
    Participant

    press draw chart, the chart is drawn
    press clear chart, the chart container div is emptied
    press draw chart again, the chart is not drawn even though the container div still exists

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>jqxChart Column Series Example</title>
    <link rel=”stylesheet” href=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../js/libs/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/jqxdraw.js”></script>
    <script type=”text/javascript” src=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/jqxchart.core.js”></script>
    <script type=”text/javascript” src=”../js/libs/jqwidgets-ver3.8.0/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare chart data as an array
    var source = [{ Country: “Spain”, GDP: Math.random() * 100, DebtPercent: 10, Debt: 1 }];

    var dataAdapter = new $.jqx.dataAdapter(source);
    // prepare jqxChart settings

    function drawChart()
    {
    var settings = {
    title: “Economic comparison”,
    description: “GDP and Debt in 2010”,
    //showLegend: true,
    enableAnimations: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    xAxis:
    {
    dataField: ‘Country’,
    gridLines: { visible: true },
    valuesOnTicks: false
    },
    colorScheme: ‘scheme01’,
    columnSeriesOverlap: false,
    seriesGroups:
    [
    {
    type: ‘column’,
    valueAxis:
    {
    visible: true,
    unitInterval: 5000,
    title: { text: ‘GDP & Debt per Capita($)<br>’ }
    },
    series: [
    { dataField: ‘GDP’, displayText: ‘GDP per Capita’, labels: {visible: true, angle: -90} },
    { dataField: ‘Debt’, displayText: ‘Debt per Capita’, labels: {visible: true, angle: -90} }
    ]
    }
    ]
    };
    // setup the chart
    $(‘#chartContainer’).jqxChart(settings);
    }

    $(“.drawChart”).click(function(e) {

    console.log(“draw chart”);
    drawChart();
    });

    $(“.clearChart”).click(function(e) {

    console.log(“clear chart”);
    $(‘#chartContainer’).empty();
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’chartContainer’ style=”width:850px; height:500px;”>
    </div>

    draw chart
    clear chart
    </body>
    </html>

    June 4, 2015 at 6:13 am not possible to redraw chart after emptying chart container div #71991

    ivailo
    Participant

    Hi rtessler,

    Maybe is better to change only the visibility of the chart after the first initialization.

    Look at the demo.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.