Home Forums Chart Support Multiple Chart on one page issue rendering

Multiple Chart on one page issue rendering

Viewing 4 posts - 1 through 4 (of 4 total)
  • #23117

    I’ve got two charts created on separate pages. The data is pulled in from a mysqli query and I’m using the $.getJSON function.

    pages:
    top_airlines.php
    top_aircraft.php

    I can get each page to render independently, however, I cannot get them to run when I try to include them on the index.php page.

    My chart code is:

    TOP AIRLINES:
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script&gt;
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script&gt;
    <script src=”http://globe-trekking.com/vg/includes/js/jquery.canvasjs.min.js”></script&gt;

    <script type=”text/javascript”>
    window.onload = function () {
    CanvasJS.addColorSet(“blueShades2”,
    [//colorSet Array
    “#074b83”,
    “#085a9d”,
    “#0a69b7”,
    “#0b78d1”,
    “#0c87eb”,
    “#2196f3”,
    “#4daaf6”,
    “#79bff8”,
    “#a6d4fa”,
    “#d2eafd”
    ]);

    $(document).ready(function () {
    $.getJSON(“http://globe-trekking.com/vg/charts/top_airlines_data.php&#8221;, function (result) {

    var chartAirlines = new CanvasJS.Chart(“top_10_airlines_chart”, {
    animationEnabled: false,
    colorSet: “blueShades2”,
    toolTip:{content: “{name}”},
    data: [
    {
    type: “bar”,
    indexLabelFontSize: 22,
    dataPoints: result
    }
    ]
    });

    chartAirlines.render();
    });
    });
    }
    </script>

    <div id=”top_10_airlines_chart” style=”width: 100%; height: 300px;”></div>

    TOP AIRCRAFT:
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script&gt;
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script&gt;
    <script src=”http://globe-trekking.com/vg/includes/js/jquery.canvasjs.min.js”></script&gt;

    <script type=”text/javascript”>

    window.onload = function () {
    CanvasJS.addColorSet(“blueShades”,
    [//colorSet Array
    “#074b83”,
    “#085a9d”,
    “#0a69b7”,
    “#0b78d1”,
    “#0c87eb”,
    “#2196f3”,
    “#4daaf6”,
    “#79bff8”,
    “#a6d4fa”,
    “#d2eafd”
    ]);

    $(document).ready(function () {

    $.getJSON(“http://globe-trekking.com/vg/charts/top_aircraft_data.php&#8221;, function (result) {

    var chartAircraft = new CanvasJS.Chart(“top_10_airplanes_chart”, {
    animationEnabled: false,
    colorSet: “blueShades”,
    toolTip:{content: “{name}”},
    data: [
    {
    type: “bar”,
    indexLabelFontSize: 22,
    dataPoints: result
    }
    ]
    });

    chartAircraft.render();
    });
    });
    }
    </script>

    <div id=”top_10_airplanes_chart” style=”width: 100%; height: 300px;”></div>

    My Index page I’m using:

    <?php include($_SERVER[‘DOCUMENT_ROOT’].’/vg/charts/top_airlines.php’); ?>
    <?php include($_SERVER[‘DOCUMENT_ROOT’].’/vg/charts/top_aircraft.php’); ?>

    Only one of them will render. Removing one will allow the other to render….

    #23144

    @cronk005,

    The issue seems to happen due to overriding of window.onload event. Changing it to jQuery ready / load should work fine in your case. Please find the sample project here. Please refer this stackoverflow thread for more info.
    Multiple PHP Bar Charts in a Page

    PS: dataPoints are hardcoded in sample-project as AJAX requests (php-service-http://globe-trekking.com/vg/charts/top_aircraft_data.php) gave 404 Not Found Error.


    Vishwas R
    Team CanvasJS

    #23157

    Hi Vishwas. I’m so very sorry that I did not get back to this forum to note it. I figured out the issue and have gone on.

    The reason the 404 Not Found message is that I was able to use code combined into a single php instead of using .getJSON to pull in from a different page.

    Regards,
    Daniel

    #23168

    Daniel,

    Glad that you figured out a way to make it work :)


    Vishwas R
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.