Home › Forums › Chart Support › Multiseries column charts › Reply To: Multiseries column charts

April 30, 2018 at 5:36 pm #20502

katie

Hi there, does anybody know why my bars arent showing up on my bar chart? All data is showing up, even when hovered over where the bars should be. Completely confused, can anybody please help?

Katie A

MY CODE –

<?php

//Database connection (localhost,username,password,databasename)

$con = mysqli_connect("localhost", "katie", "katie", "movies");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
else
// Print connection successful if no error
{
echo "Connection still Successful </br>";
}


// Select all fields from the database
$sql = "SELECT * FROM TABLE_1";
//$sql = "SELECT * FROM 'TABLE 1' WHERE Movie Title =Star Wars:TheForceAwakens";
$result = mysqli_query($con, $sql);

//echo var_dump($result);
// Check if database is not empty if not print data of each row

// create array
$emparray = array();
while($row = mysqli_fetch_assoc($result))
	{
		$chart_gross .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Gross"]. "'},";
		$chart_votes .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Votes"]. "'},";
	
	
		$chart_data .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Votes"]. "'},";
    }



//Close database connection
mysqli_close($con);
?>
<html>
 <head>
			 
  
  <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  <title> 2015 Movie Title Gross and Votes</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	 
 </head>
 <body>
	 	 <div id="chartContainer" style="height: 75%; max-width: 80%; margin:0px auto;"></div>
         <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
	 
	 
	<script>	
		
		
		window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Movie Title Votes and Gross, 2015"
	},	
	axisY: {
		title: "Votes",
		titleFontColor: "#4F81BC",
		lineColor: "#4F81BC",
		labelFontColor: "#4F81BC",
		tickColor: "#4F81BC"
	},
	axisY2: {
		title: "Gross",
		titleFontColor: "#C0504E",
		lineColor: "#C0504E",
		labelFontColor: "#C0504E",
		tickColor: "#C0504E"
	},	
	toolTip: {
		shared: true
	},
	legend: {
		cursor:"pointer",
		itemclick: toggleDataSeries
	},
	data: [
		{
		type: "column",
		name: "Gross",
		legendText: "Gross",
		showInLegend: true, 
		dataPoints:[<?php echo $chart_gross;?>]
	},
	{
		type: "column",	
		name: "Votes",
		legendText: "Votes",
		axisYType: "secondary",
		showInLegend: true,
		dataPoints:[ <?php echo $chart_votes; ?>]
	}]
});
chart.render();

			
function toggleDataSeries(e) {
	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else {
		e.dataSeries.visible = true;
	}
	chart.render();
}
		}


		
		
		
</script>

 </body>
</html>