Home forums Using CanvasJS Multiseries column charts

Tagged: , ,

This topic contains 37 replies, has 8 voices, and was last updated by  Vishwas R 10 months, 1 week ago.

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

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

    #15940

    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.

    #15950

    Tanguy,

    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

    #15951

    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.

    #20502

    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://canvasjs.com/assets/script/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://canvasjs.com/assets/script/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>

    #20519

    @katie,

    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

    #21186

    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.

    #21189

    Sankalp,

    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.