Home forums Using CanvasJS Bar chart showing nothing

This topic contains 2 replies, has 2 voices, and was last updated by  ajazurrahman 4 months, 2 weeks ago.

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

    ajazurrahman
    Member

    Hello Js Gurus,

    Following is my json file

    [{“ond”:1,”maxspend”:64778,”minspend”:6477},
    {“ond”:2,”maxspend”:61528,”minspend”:6152},
    {“ond”:3,”maxspend”:56503,”minspend”:5650},
    {“ond”:4,”maxspend”:55721,”minspend”:5572},
    {“ond”:5,”maxspend”:5455,”minspend”:5455},
    {“ond”:6,”maxspend”:54215,”minspend”:5421},
    {“ond”:7,”maxspend”:52928,”minspend”:5292},
    {“ond”:8,”maxspend”:67091,”minspend”:4895},
    {“ond”:9,”maxspend”:46924,”minspend”:4692},
    {“ond”:10,”maxspend”:4356,”minspend”:4356}

    ]

    I am trying to draw a chart from above data using following code. Will appreciate help on this.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function() {

    var dataPoints = [];
    var dataPoints1= [];
    var highlow=[];

    var chart = new CanvasJS.Chart(“top_destinations”, {
    animationEnabled: true,
    theme: “light2”,
    dataPointWidth: 20,
    title: {
    text: “YTD Top Destinations”,
    fontSize: 15,
    },
    axisY: [
    {

    labelFormatter: function ( e ) { return e.value; },
    } ] ,
    axisX: [
    {

    labelFormatter: function ( e ) { return e.value; },
    }
    ],
    data: [{
    type: “column”,
    axisYindex: 0,
    yValueFormatString: “#,### Units”,
    dataPoints: dataPoints
    }
    ]
    });

    function addData(data) {
    for (var i = 0; i < data.length; i++) {
    highlow=[];
    highlow[0]=data[i].minspend ;
    highlow[1]=data[i].maxspend ;
    dataPoints.push({
    x:i,
    y:highlow

    });
    }

    chart.render();

    }

    $.getJSON(“top_destinations_high_low.json”, addData);

    }
    </script>
    </head>
    <body>
    <div id=”top_destinations” style=”height: 150px; width: 100%;”></div>
    <script src=”https://canvasjs.com/assets/script/jquery-1.11.1.min.js”></script>
    <script src=”https://canvasjs.com/assets/script/jquery.canvasjs.min.js”></script>
    </body>
    </html>

    #18959

    Suyash Singh
    Participant

    @ajazurrahman,

    We observe that you are passing an array as y-value to a column chart. Since Column Chart accepts a single numeric y-value, you can either use one of the values from your highlow array or change the chart type to Range Column Chart as in this jsfiddle.

    If this doesn’t suit your requirements can you please create a sample jsfiddle or
    give us a pictorial representation so that we can understand your requirements better and help you out?

    ___
    Suyash Singh
    Team CanvasJS

    #18969

    ajazurrahman
    Member

    Many thanks Suyash for help . Yes it was a silly mistake. I have to create a rangechart.

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

You must be logged in to reply to this topic.