Home forums Using CanvasJS Multiseries column charts

Tagged: , ,

Viewing 8 posts - 31 through 38 (of 38 total)
  • Author
  • #15938

    I just changed the interval becuase if I changed the format, all the values would be changed. Thanks again!!


    Why do I have June when the month is 05 in the new Date format? I’m struggling in PHP to take 1 away from every month in order to get the accurate month on the graphe, any idea? My regex did `XXXX, XX – 1, XX’ rather than directly having -1 in the number…

    (My regex : preg_replace('/^(\\d+)-(\\d+)-(\\d+)$/', '\\1, \\2 - 1, \\3 - 1', $point['date_value']))
    PS: It does the same to the days because there is the same problem.



    In JavaScript Month starts from 0 (January) and ends at 11(December). So while displaying they are incremented by 1.

    Also, please go through this link for subtracting days from date.

    Indranil Deo,
    Team CanvasJS


    That’s what I used, thanks.

    I can officially say that my work is done and that it is thanks to you too, so here is my last thanks : thank you.

    Tanguy, a french amateur programmer.


    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 –


    //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();
    // 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

    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script&gt;
    <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”&gt;
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script&gt;
    <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script&gt;

    <div id=”chartContainer” style=”height: 75%; max-width: 80%; margin:0px auto;”></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script&gt;


    window.onload = function () {

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    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: {
    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; ?>]

    function toggleDataSeries(e) {
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    else {
    e.dataSeries.visible = true;





    Can you kindly share jsfiddle or sample project along with sample data over google-drive or onedrive reproducing the issue you are facing so that we can understand your scenario better and help you out?

    Vishwas R
    Team CanvasJS


    sir this project is not working, the chart is not getting displayed. The file index.php is not a php file as it does not contain php tags only. Please tell a way to sort this out.



    It seems to be working fine. Can you kindly check if you have imported database and updated database username, password in service.php accordingly? Also can you kindly check the Browser Console for any errors?

    Considering this as duplicate of your other post. So am closing this post.

    Vishwas R
    Team CanvasJS

Viewing 8 posts - 31 through 38 (of 38 total)

You must be logged in to reply to this topic.