Home Forums Chart Support Bar chart showing nothing

Bar chart showing nothing

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

    Hello Js Gurus,

    Following is my json file



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

    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[0]=data[i].minspend ;
    		highlow[1]=data[i].maxspend ;
    $.getJSON("top_destinations_high_low.json", addData);
    <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://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>


    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


    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.