My labels aren't appearing after redrawing the chart


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Sudarshan on 4th November 2017
Hi Richard,

  I am generating bar chart with drop down on change action bar,pie and line charts if i selected bar chart it's drawing bar then i changed into pie it's drawing pie chart then i select bar chart it's drawing but labels are not showing.I did not understand why i checked bar object properties it's showing labels but it's not drawing.Help me with a post example link and i request you to please copy the below code in html page and run it in browser i can't post a link.
/////////////-------------------------
here is my code
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script src="RGraph/RGraph.common.core.js"></script>
     <script src="RGraph/RGraph.common.dynamic.js"></script>
     <script src="RGraph/RGraph.common.tooltips.js"></script>
     <script src="RGraph/RGraph.bar.js"></script>
     <script src="RGraph/RGraph.drawing.background.js"></script>
     <script src="RGraph/RGraph.line.js"></script>
     <script src="RGraph/RGraph.pie.js"></script>
</head>
<body>
  <div class="col-sm-12 col-md-12">
         <select id="chart_type" onchange="generateChart();" class="form-control">
           <option>Line</option>
           <option>Bar</option>
           <option>Pie</option>
           <option>AreaLine</option>
         </select>
     </div>
     <div class="col-sm-12 col-md-12" id="dsname">
         <label class="radio-inline"><input type="radio" onclick="generateChart();" value="ds1" name="optradio" checked>DS 1</label>
         <label class="radio-inline"><input type="radio" onclick="generateChart();" value="ds2" name="optradio">DS 2</label>
         <label class="radio-inline"><input type="radio" onclick="generateChart();" value="ds3" name="optradio">DS 3</label>
     </div>
     <div id = "chart_div">
                     <canvas id= "chart_canvas" height="750" width="250">[No canvas support]</canvas>
                 </div>
     <script type="text/javascript"> function generateChart()
             {
                var chart_type = $( "#chart_type" ).find( "option:selected" ).text();
                var ds_name = $("#dsname input[type='radio']:checked").val();
                $("#chart_canvas").remove();
                $("#chart_div").append('<canvas id="chart_canvas">[No canvas support]</canvas>');
                $("#chart_canvas_rgraph_domtext_wrapper").remove();
                 //document.getElementById('chart_canvas_rgraph_domtext_wrapper')
                 var can = document.getElementById('chart_canvas');
                     RGraph.ObjectRegistry.Clear(can);
               
              
               var dataset1 = [10,20,30,40,50,60,70,80,90,100];
               var dataset2 = [100,90,80,70,60,50,40,30,20,10];
               var dataset3 = [100,20,80,60,50,40,70,30,90,10];
               var data =[];
               if(ds_name == "ds1")
                 data = dataset1;
               else if(ds_name == "ds2")
                  data = dataset2;
               else
                  data = dataset3;
               var labels = [1,2,3,4,5,6,7,8,9,10]
               var tooltips = ['a','b','b','d','e','f','g','h','j','k']
               if(chart_type=="Line")
                 lineChart(data,labels,tooltips)
               else if(chart_type=="Bar")
                 barChart(data,labels,tooltips)
               else if(chart_type=="Pie")
                 pieChart(data,labels,tooltips)
               else
                 Arealine(data,labels,tooltips)
             }

             function barChart(data,labels,tooltips){
                 console.log(data,labels,tooltips)
                 var bar= new RGraph.Bar({
                     id: 'chart_canvas',
                     data: data,
                     options: {
                         labels: [1,2,3,4,5,6,7,8,9,10],
                         tooltips: tooltips
                     }
                 }).draw();
                 console.log(bar.properties)
             }
             function lineChart(data,labels,tooltips){
                 new RGraph.Drawing.Background({
                 id: 'chart_canvas',
                 options: {
                     gutterLeft: 55,
                     gutterRight: 35,
                     gutterTop: 35,
                     gutterBottom: 35,
                     backgroundGridAutofitNumvlines:48,
                     backgroundGridAutofitNumhlines: 20,
                     backgroundGridColor: '#eee'
                 }
             }).draw();

             new RGraph.Line({
                 id: 'chart_canvas',
                 data: data,
                 options: {
                     labels: labels,
                     tooltips: tooltips,
                     gutterLeft: 55,
                     gutterRight: 35,
                     gutterBottom: 35,
                     gutterTop: 35,
                     title: 'A basic line chart',
                     backgroundGridColor: '#aaa',
                     backgroundGridDashed: true,
                     textAccessible: true,
                     scaleZerostart: true,
                     labelsOffsety: 5
                 }
             }).draw();
             }
             function pieChart(data,labels,tooltips){
                 //var labels = ['Monday', 'Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];

                 console.log(data,labels,tooltips)

                 new RGraph.Pie({
                     id: 'chart_canvas',
                     data: data,
                     options: {
                         tooltips: tooltips,
                         labels: labels,
                         labelsSticksList: true,
                         shadow: false,
                         strokestyle: 'rgba(0,0,0,0)',
                         exploded: 0
                     }
                 }).roundRobin();
             }
             function Arealine(data,labels,tooltips){
                 var line = new RGraph.Line({
                 id: 'chart_canvas',
                 data: data,
                 options: {
                     labels: labels,
                     gutterLeft: 75,
                     gutterRight: 55,
                     filled: true,
                     fillstyle: ['#C2D1F0'],
                     colors: ['#3366CB'],
                     shadow: false,
                     tickmarks: null,
                     numxticks: 0,
                     backgroundGridVlines: false,
                     backgroundGridBorder: false,
                     noxaxis: true,
                     textSize: 16,
                     textAccessible: true
                 }
             }).draw();
             }

            
   </script>
</body>
</html>
Posted by Richard on 4th November 2017
Hi there,

Instead of removing the canvas from the DOM and recreating it you should .reset() it instead like the page below does:

www.rgraph.net/tests/canvas.bar/mixed.html

Richard

Add a reply




« Back to message list