Anjana Choudhary Anjana Choudhary - 3 months ago 23
Ajax Question

how to render chart based on different id?

enter image description here

<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?

Answer Source
<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.