FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Bar chart showing nothing

Bar chart showing nothing

Viewing 3 posts - 1 through 3 (of 3 total)
  • January 29, 2018 at 12:36 am #18956

    ajazurrahman

    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://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
</body>
</html>
    January 29, 2018 at 10:28 am #18959

    Suyash Singh

    @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

    January 29, 2018 at 7:57 pm #18969

    ajazurrahman

    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.