how to render chart based on different id?

Question

<body>
<div id="container" style="display: none"></div>
<button id="canvas" onClick="myFunc(this.id);">Canvas</button>
<button id="highchart" onClick="myFunc(this.id);">HighChart</button>
<script type="text/javascript">
var type='';
function myFunc(id)
        {
            type+=id;
            console.log(type);
        }
if(type!=''){
$(document).ready(function(){
Highcharts.setOptions(Highcharts.theme);
$.ajax
({
    type:'post',
    url:'data.php',
    success:function(response)
    {

        var res= JSON.parse(response);
        //console.log(res.day); //console.log(res.amount);
        DrawHigh(res);
        if(type=='canvas'){
            DrawCanvas($('#container').highcharts(),res);
        } else { $('#container').show(); }
    }
   });

  });
  }
    function DrawCanvas(chart,data) {
    EXPORT_WIDTH = 1000;
    var render_width = EXPORT_WIDTH;
    var render_height = render_width * chart.chartHeight / chart.chartWidth

    // Get the cart's SVG code
    var svg = chart.getSVG({
        exporting: {
            sourceWidth: chart.chartWidth,
            sourceHeight: chart.chartHeight
        }
    });

    // Create a canvas
    var canvas = document.createElement('canvas');
    canvas.height = render_height;
    canvas.width = render_width;
    document.body.appendChild(canvas);

    // Create an image and draw the SVG onto the canvas
    var image = new Image;
    image.onload = function() {
        canvas.getContext('2d').drawImage(this, 0, 0, render_width, 
   render_height);
        };
    image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
  }


    function DrawHigh(data)
    {
    Highcharts.chart('container', {
        xAxis: {
          categories: data.day, 
          title: {
              enabled: true,
              text: '<b>Purchase</b>',
              style: {
                  fontWeight: 'normal'
                    }
            }
         },
       legend: {
          enabled: false
            },
        credits: {
          enabled: false
            },
      series: [{
          data: data.amount,
           }]
     });
   }
  </script>
  </body>

In this code, I am trying to display data using two different chart rendering type canvas and high chart. So there is two function here draw canvas and draw the high chart. I want when I click on button 'canvas' then draw canvas function called and when clicking on button 'high chart' then draw high chart function run but In this code when I click on any button no function is called?

The code seems fine. can you check ajax is working fine on network tab? — Thamaraiselvam, Aug 17 '17 at 10:25
ya code is working fine but it is not displaying any chart on web — Anjana Choudhary, Aug 17 '17 at 10:32
if you remove if condition then it working fine and by default giving me high chart function output. but i want to render data if i click on one of this button. — Anjana Choudhary, Aug 17 '17 at 11:09
Refer this : https://stackoverflow.com/questions/10638059/javascript-debugging-line-by-line-using-google-chrome — Thamaraiselvam, Aug 17 '17 at 11:09
What is `type` there? I think it should be like `response.type` — Thamaraiselvam, Aug 17 '17 at 11:11
In type one of id value is going like if i click on canvas button then type is canvas. — Anjana Choudhary, Aug 17 '17 at 11:15
When the page is load type is empty and button is there on page but when I click on that button, it is not loading again. — Anjana Choudhary, Aug 17 '17 at 11:20

score 0 · Accepted Answer · answered Aug 17 '17 at 11:55

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="http://code.highcharts.com/4.0.4/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/4.0.4/modules/exporting.js"></script>

<style type="text/css">
    #div-chart {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

</style>


<body>
<div id="container" style="display: none"></div>
<button id="canvas" onClick="myFunc(this.id);">Canvas</button>
<button id="highchart" onClick="myFunc(this.id);">HighChart</button>
<script type="text/javascript">

$(document).ready(function(){
    Highcharts.setOptions(Highcharts.theme);
});

function myFunc(id)
{
    type = '';
    type = id;

    if(!type)
        return false

    makeAjax(type);
}

function makeAjax(type) {
    $.ajax ({
        type:'post',
        url:'testing.php',
        success:function(response) {
            var res= JSON.parse(response);
            //console.log(res.day); //console.log(res.amount);
            DrawHigh(res);
            if(type=='canvas'){
                DrawCanvas($('#container').highcharts(),res);
                $('#container').hide();
            } else {
                $('#container').show();
                $('canvas').remove();
            }
        }
    });
}

function DrawCanvas(chart,data) {
    EXPORT_WIDTH = 1000;
    var render_width = EXPORT_WIDTH;
    var render_height = render_width * chart.chartHeight / chart.chartWidth

    // Get the cart's SVG code
    var svg = chart.getSVG({
        exporting: {
            sourceWidth: chart.chartWidth,
            sourceHeight: chart.chartHeight
        }
    });

    // Create a canvas
    var canvas = document.createElement('canvas');
    canvas.height = render_height;
    canvas.width = render_width;
    document.body.appendChild(canvas);

    // Create an image and draw the SVG onto the canvas
    var image = new Image;
    image.onload = function() {
        canvas.getContext('2d').drawImage(this, 0, 0, render_width,
   render_height);
        };
    image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
}

function DrawHigh(data) {

     $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Purchase',
            align: 'center'
        },
        subtitle: {
            text: ' '
        },
        xAxis: {
            categories: data.days,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount (Millions)'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Purchase',
            data: data.amount,
        }]
    });

}
  </script>
  </body>

Above code works as you need. there was few problems. There is no function called Highcharts.chart

you should not called $(document).ready(function() when inside the function.

First format the code to right aligment and try to use the breakpoints so you can find the problem quickly.

how to render chart based on different id?

1 Answers1