Home forums Using CanvasJS Chart not displaying

This topic contains 2 replies, has 2 voices, and was last updated by  Sunil Urs 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #9762

    sajinaboo
    Member

    Hi,

    I have a chart that is developed using canvas js. I have used AJAX method for passing the values and the values are passed successfully… But the problem is that the Chart is not showing in the page… I have an array of values that are to passed into the data points, But I don’t know the correct format… The pieces of the sample code is given below… Any help will be appreciated…

    $(function() {
            $("[id*=rbtnZone]").click(function() {
                var row = $(this).closest('tr');
                var branchId = $(row).find('[id*=hfBranchId]').val();
                var rbtlSales = $("#<%= rbtlSales.ClientID%>");
                var selectedValue = rbtlSales.find("input:checked").val();
                
                $.ajax({
                    url: '<%=ResolveUrl("Corporate/Sales.aspx/GetZoneData") %>',
                    data: "{'rbtlSales':'" + selectedValue + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function(data) {
                        var labels = [];
                        var datas = [];
                        var dpoints = [];
                        var lpoints = [];
                        $.each(data.d, function(i, item) {
                            var l = item.split('-')[0];
                            var d = item.split('-')[1];
                            var dd = d | 0;
                            labels.push(l);
                            datas.push(dd);
                            var lblmsg = "Total Sales : Rs. " + eval(datas.join('+'));
                            document.getElementById('<%=lblTotal.ClientID %>').innerHTML = lblmsg;
                        });
                        dpoints.push(datas);
                        alert(dpoints);
                        lpoints.push(labels);
                        var jlpoints = JSON.stringify(lpoints);
                        alert(jlpoints);
                        var dp = [];
                        for (var item in jlpoints) {
                            dp.push(jlpoints);
                        }
                        alert(dp);
                        var chart = new CanvasJS.Chart("chartContainer", {
                            title: {
                                text: lblmsg
                            },
                            animationEnabled: true,
                            axisX: {
                                intervel: 1000,
                                gridThickness: 0,
                                labelFontSize: 10,
                                labelFontStyle: "normal",
                                labelFontWeight: "normal"
                            },
                            axisY2: {
                                interlacedColor: "rgba(1,77,101,.2)",
                                gridColor: "rgba(1,77,101,.1)"
    
                            },
                            data: [
    			            {
    			                type: "bar",
    			                name: "ZoneSalesData",
    			                showLegend: true,
    			                axisYType: "primary",
    			                color: "#014D65",
    			                dataPoints: dp
    			            }
    			            ]
                        });
                    }
                });
                chart.render();
            });
        });
    #9767

    sajinaboo
    Member

    No one???

    #9774

    Sunil Urs
    Keymaster

    sajinaboo,

    If you can provide us a sample json data, we can try to figure out the problem.


    Sunil Urs

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

You must be logged in to reply to this topic.