Home forums Report Bugs Graphs not displaying correctly on Chrome

This topic contains 8 replies, has 2 voices, and was last updated by  Vishwas R 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #10495

    I have my graph configured to get data from a database and it’s all set up correctly with all the data displaying as it should. I have also configured 2 tabs which switch the graphs from line to bar for convienience which works fine. However, I now have a problem where the graphs are completely messed up on Chrome but work fine on Firefox and IE!

    This is the code for the graph.
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    animationEnabled: true,
    axisX:{

    gridColor: “Silver”,
    tickColor: “silver”,
    labelAngle: -50

    },
    toolTip:{
    shared:true
    },
    axisY: {
    gridColor: “Silver”,
    tickColor: “silver”
    },
    legend:{
    verticalAlign: “bottom”,
    horizontalAlign: “center”,
    fontFamily: “Expressway-Rg”
    },
    data: [
    {
    type: “line”,
    showInLegend: true,
    lineThickness: 2,
    name: “Orders Week Ending ” + “@Html.Raw(Model.OrdersWeekEnding)”,
    markerType: “square”,
    color: “#cc0000”,
    dataPoints:@Html.Raw(Model.WeekEndingJson)
    },
    {
    type: “line”,
    showInLegend: true,
    name: “Orders Week Ending ” + “@Html.Raw(Model.ComparisonOrdersWeekEnding)”,
    color: “#000000”,
    lineThickness: 2,
    dataPoints:@Html.Raw(@Model.ComparisonWeekEndingJson)
    }
    ]

    });

    chart.render();

    Thanks in advance to anyone that can help!

    #10497

    Vishwas R
    Keymaster

    Callam,

    It would help us if you can provide us the working fiddle of the issue along with proper JSON-data.

    Here is an example to give you an idea on using external JSON in jsfiddle.

    #10499

    This is the JSFiddle of the graph with data.
    http://jsfiddle.net/kvgzzsvp/3/
    I’ve also surrounded it with window.onload = function() {}, could this be the reason it’s messing up on chrome?
    Thanks for the reply!

    #10500

    Vishwas R
    Keymaster

    Callam,

    We observed that the fiddle you have created seems to be working fine across all browsers.

    Check this screenshot. If you find any further issue, kindly provide us the OS, chrome version you are using along with the screenshot of the issue, so that we can understand it better and help you out.

    #10501

    Here’s the screenshot for the graph on chrome and then this screenshot is the exact same link and graphs but on firefox.

    #10502

    I’m also on windows 10, using the latest version of chrome and firefox.

    #10510

    Vishwas R
    Keymaster

    Callam,

    Earlier we had come across a similar issue with Chrome when Canvas is GPU accelerated (default). Google fixed the issue after sometime.

    Please try disabling GPU accelerated rendering in Chrome and see if it helps.

    #10657

    Vishwas R
    Keymaster

    Callam,

    Can you please try using this latest build and let us know if it worked.

    #11310

    Vishwas R
    Keymaster

    Callam,

    We have just released v1.8.1 GA. Kindly download the latest version and let us know your feedback. Refer to the release blog for more information.

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

You must be logged in to reply to this topic.