Home forums Report Bugs X & Y axis lable and title not visible

This topic contains 9 replies, has 3 voices, and was last updated by  dilipt 8 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #10022

    dilipt
    Member

    X & Y axis lable and title not visible

    #10023

    dilipt
    Member

    Earlier same graph was rendering properly but suddenly we are facing above issues. We want graph to be like this.

    `<script type=”text/javascript”>
    $(function () {
    //Better to construct options first and then pass it as a parameter
    var options = {
    theme: “theme1”,
    exportEnabled: true,
    animationEnabled: true,
    zoomEnabled: true,
    title: {
    text: “Bandwidth Graph – (17-03-2016)”,
    fontSize: 25,
    },
    toolTip:{ shared: true },
    axisY: {
    title: “Mega Bits”,
    gridThickness: 1,
    stripLines:[
    {
    lable: 23630,
    value:23630,
    color:”red”,
    labelFormatter: function (e) {
    return “85%”;
    }
    }
    ]
    },
    axisX: { title: “Time”, labelFontSize: 14, interval: 6, labelAngle: -90, gridThickness: 1,
    gridColor: “#c9c9c9”, interlacedColor: “#f9f9f9”},
    legend: {
    cursor: “pointer”,
    itemclick: function (e) {
    //console.log(“legend click: ” + e.dataPointIndex);
    //console.log(e);
    if (typeof (e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    } else {
    e.dataSeries.visible = true;
    }

    e.chart.render();
    }
    },
    data:
    [
    {
    type: “splineArea”, //change it to line, area, bar, pie, etc
    name: “Download”,
    showInLegend: true,
    //toolTipContent:”test”,
    dataPoints: [ { label: “00:00″, y: 17155.39, name:”Download (62 %)” },{ label: “00:10″, y: 16694.18, name:”Download (60 %)” },{ label: “00:20″, y: 16026.8, name:”Download (58 %)” },{ label: “00:30″, y: 15236.22, name:”Download (55 %)” },{ label: “00:40″, y: 14405.73, name:”Download (52 %)” },{ label: “00:50″, y: 13702.21, name:”Download (49 %)” },{ label: “01:00″, y: 13140.99, name:”Download (47 %)” },{ label: “01:10″, y: 12095.45, name:”Download (44 %)” },{ label: “01:20″, y: 11096.56, name:”Download (40 %)” },{ label: “01:30″, y: 10423.5, name:”Download (37 %)” },{ label: “01:40″, y: 9696.78, name:”Download (35 %)” },{ label: “01:50″, y: 9089.4, name:”Download (33 %)” },{ label: “02:00″, y: 8591.37, name:”Download (31 %)” },{ label: “02:10″, y: 7970, name:”Download (29 %)” },{ label: “02:20″, y: 7431.29, name:”Download (27 %)” },{ label: “02:30″, y: 6916.99, name:”Download (25 %)” },{ label: “02:40″, y: 6462.06, name:”Download (23 %)” },{ label: “02:50″, y: 6027.18, name:”Download (22 %)” },{ label: “03:00″, y: 5689.55, name:”Download (20 %)” },{ label: “03:10″, y: 5400.18, name:”Download (19 %)” },{ label: “03:20″, y: 5111.75, name:”Download (18 %)” },{ label: “03:30″, y: 4799.47, name:”Download (17 %)” },{ label: “03:40″, y: 4555.83, name:”Download (16 %)” },{ label: “03:50″, y: 4374.89, name:”Download (16 %)” },{ label: “04:00″, y: 4216.19, name:”Download (15 %)” },{ label: “04:10″, y: 4080.38, name:”Download (15 %)” },{ label: “04:20″, y: 3853.4, name:”Download (14 %)” },{ label: “04:30″, y: 3735.24, name:”Download (13 %)” },{ label: “04:40″, y: 3647.54, name:”Download (13 %)” },{ label: “04:50″, y: 3589.82, name:”Download (13 %)” },{ label: “05:00″, y: 3503.52, name:”Download (13 %)” },{ label: “05:10″, y: 3478.6, name:”Download (13 %)” },{ label: “05:20″, y: 3501.09, name:”Download (13 %)” },{ label: “05:30″, y: 3574.67, name:”Download (13 %)” },{ label: “05:40″, y: 3690.83, name:”Download (13 %)” },{ label: “05:50″, y: 3717.8, name:”Download (13 %)” },{ label: “06:00″, y: 3779.63, name:”Download (14 %)” },{ label: “06:10″, y: 4023.07, name:”Download (14 %)” },{ label: “06:20″, y: 4196.06, name:”Download (15 %)” },{ label: “06:30″, y: 4433.34, name:”Download (16 %)” },{ label: “06:40″, y: 4519.73, name:”Download (16 %)” },{ label: “06:50″, y: 4906.9, name:”Download (18 %)” },{ label: “07:00″, y: 5312.82, name:”Download (19 %)” },{ label: “07:10″, y: 5609.04, name:”Download (20 %)” },{ label: “07:20″, y: 6120.28, name:”Download (22 %)” },{ label: “07:30″, y: 6533.79, name:”Download (24 %)” },{ label: “07:40″, y: 6933.96, name:”Download (25 %)” },{ label: “07:50″, y: 7449.61, name:”Download (27 %)” },{ label: “08:00″, y: 7817.89, name:”Download (28 %)” },{ label: “08:10″, y: 8174.24, name:”Download (29 %)” },{ label: “08:20″, y: 8721.31, name:”Download (31 %)” },{ label: “08:30″, y: 9173.27, name:”Download (33 %)” },{ label: “08:40″, y: 9681.57, name:”Download (35 %)” },{ label: “08:50″, y: 10325.12, name:”Download (37 %)” },{ label: “09:00″, y: 10896.19, name:”Download (39 %)” },{ label: “09:10″, y: 11617.87, name:”Download (42 %)” },{ label: “09:20″, y: 13089.52, name:”Download (47 %)” },{ label: “09:30″, y: 14164.23, name:”Download (51 %)” },{ label: “09:40″, y: 15012.41, name:”Download (54 %)” },{ label: “09:50″, y: 15694.7, name:”Download (56 %)” },{ label: “10:00″, y: 16287.41, name:”Download (59 %)” },{ label: “10:10″, y: 17217.25, name:”Download (62 %)” },{ label: “10:20″, y: 18082.53, name:”Download (65 %)” },{ label: “10:30″, y: 18841.13, name:”Download (68 %)” },{ label: “10:40″, y: 19622.54, name:”Download (71 %)” },{ label: “10:50″, y: 20150.58, name:”Download (72 %)” },{ label: “11:00″, y: 20562.39, name:”Download (74 %)” },{ label: “11:10″, y: 20680.16, name:”Download (74 %)” },{ label: “11:20″, y: 20472.63, name:”Download (74 %)” },{ label: “11:30″, y: 20658.52, name:”Download (74 %)” }, ]
    },
    {
    type: “line”, //change it to line, area, bar, pie, etc
    name: “Upload”,
    color: “blue”,
    showInLegend: true,
    dataPoints: [ { label: “00:00″, y: 3046.23, name:”Upload (11 %)” },{ label: “00:10″, y: 2941.46, name:”Upload (11 %)” },{ label: “00:20″, y: 2797.15, name:”Upload (10 %)” },{ label: “00:30″, y: 2661.38, name:”Upload (10 %)” },{ label: “00:40″, y: 2537.56, name:”Upload (9 %)” },{ label: “00:50″, y: 2419.36, name:”Upload (9 %)” },{ label: “01:00″, y: 2317.91, name:”Upload (8 %)” },{ label: “01:10″, y: 2202.67, name:”Upload (8 %)” },{ label: “01:20″, y: 2055.75, name:”Upload (7 %)” },{ label: “01:30″, y: 1971.14, name:”Upload (7 %)” },{ label: “01:40″, y: 1893.49, name:”Upload (7 %)” },{ label: “01:50″, y: 1785.23, name:”Upload (6 %)” },{ label: “02:00″, y: 1694.75, name:”Upload (6 %)” },{ label: “02:10″, y: 1654.2, name:”Upload (6 %)” },{ label: “02:20″, y: 1574.88, name:”Upload (6 %)” },{ label: “02:30″, y: 1512.24, name:”Upload (5 %)” },{ label: “02:40″, y: 1472.42, name:”Upload (5 %)” },{ label: “02:50″, y: 1409.52, name:”Upload (5 %)” },{ label: “03:00″, y: 1354.07, name:”Upload (5 %)” },{ label: “03:10″, y: 1306.25, name:”Upload (5 %)” },{ label: “03:20″, y: 1281.27, name:”Upload (5 %)” },{ label: “03:30″, y: 1235.79, name:”Upload (4 %)” },{ label: “03:40″, y: 1190.19, name:”Upload (4 %)” },{ label: “03:50″, y: 1149.54, name:”Upload (4 %)” },{ label: “04:00″, y: 1132.04, name:”Upload (4 %)” },{ label: “04:10″, y: 1119.95, name:”Upload (4 %)” },{ label: “04:20″, y: 1101.64, name:”Upload (4 %)” },{ label: “04:30″, y: 1090.25, name:”Upload (4 %)” },{ label: “04:40″, y: 1087.96, name:”Upload (4 %)” },{ label: “04:50″, y: 1073.05, name:”Upload (4 %)” },{ label: “05:00″, y: 1051.65, name:”Upload (4 %)” },{ label: “05:10″, y: 1037.48, name:”Upload (4 %)” },{ label: “05:20″, y: 1046.01, name:”Upload (4 %)” },{ label: “05:30″, y: 1053.32, name:”Upload (4 %)” },{ label: “05:40″, y: 1079.76, name:”Upload (4 %)” },{ label: “05:50″, y: 1088.29, name:”Upload (4 %)” },{ label: “06:00″, y: 1104.11, name:”Upload (4 %)” },{ label: “06:10″, y: 1126.04, name:”Upload (4 %)” },{ label: “06:20″, y: 1166.02, name:”Upload (4 %)” },{ label: “06:30″, y: 1204.5, name:”Upload (4 %)” },{ label: “06:40″, y: 1205.28, name:”Upload (4 %)” },{ label: “06:50″, y: 1288.54, name:”Upload (5 %)” },{ label: “07:00″, y: 1356.92, name:”Upload (5 %)” },{ label: “07:10″, y: 1396.19, name:”Upload (5 %)” },{ label: “07:20″, y: 1483.96, name:”Upload (5 %)” },{ label: “07:30″, y: 1568.91, name:”Upload (6 %)” },{ label: “07:40″, y: 1661.88, name:”Upload (6 %)” },{ label: “07:50″, y: 1733.26, name:”Upload (6 %)” },{ label: “08:00″, y: 1777.6, name:”Upload (6 %)” },{ label: “08:10″, y: 1844.8, name:”Upload (7 %)” },{ label: “08:20″, y: 1924.38, name:”Upload (7 %)” },{ label: “08:30″, y: 1986.25, name:”Upload (7 %)” },{ label: “08:40″, y: 2053.99, name:”Upload (7 %)” },{ label: “08:50″, y: 2137.13, name:”Upload (8 %)” },{ label: “09:00″, y: 2199.91, name:”Upload (8 %)” },{ label: “09:10″, y: 2306.49, name:”Upload (8 %)” },{ label: “09:20″, y: 2441.84, name:”Upload (9 %)” },{ label: “09:30″, y: 2571.09, name:”Upload (9 %)” },{ label: “09:40″, y: 2706.93, name:”Upload (10 %)” },{ label: “09:50″, y: 2803.71, name:”Upload (10 %)” },{ label: “10:00″, y: 2913, name:”Upload (10 %)” },{ label: “10:10″, y: 3071.29, name:”Upload (11 %)” },{ label: “10:20″, y: 3226, name:”Upload (12 %)” },{ label: “10:30″, y: 3342.54, name:”Upload (12 %)” },{ label: “10:40″, y: 3477.18, name:”Upload (13 %)” },{ label: “10:50″, y: 3565.33, name:”Upload (13 %)” },{ label: “11:00″, y: 3663.62, name:”Upload (13 %)” },{ label: “11:10″, y: 3749.18, name:”Upload (13 %)” },{ label: “11:20″, y: 3825.31, name:”Upload (14 %)” },{ label: “11:30″, y: 3879.87, name:”Upload (14 %)” }, ]
    },
    {
    type: “line”, //change it to line, area, bar, pie, etc
    name: “Backup”,
    color: “red”,
    showInLegend: true,
    dataPoints: [ ]
    }

    ]
    };
    $(“#chart1″).CanvasJSChart(options);
    });
    </script>
    <center><div id=”chart1″ style=”height: 500px; width: 70%;”></div>

    #10026

    Vishwas R
    Keymaster

    Dilipt,

    I reproduced your code in jsfiddle, its working fine and labels are shown in chart. Here is the fiddle for the same.

    #10027

    dilipt
    Member

    Thanks Vishwas for prompt reply.
    But one I re-size panes whole graph disappears.
    In your documentation also some times example graph is not visible in right side area.
    Is there any problem ?

    #10030

    Vishwas R
    Keymaster

    Dilip,

    Kindly provide the operating system and browser being used along with their versions, so that we can have a look at the issue and help you out.

    #10032

    dilipt
    Member

    I am using Windows 7 Professional (64 bit) and Google Chrome Version 49.0.2623.87 m.

    #10034

    Vishwas R
    Keymaster

    We were not able to reproduce the issue yet on Win7 + Chrome 49. Does your system have any graphic card installed? If yes, which model. Also, can you try restarting the machine once and see if it is still reproducible.

    #10035

    dilipt
    Member

    Yes, We have AMD 760G Graphic card.
    PC Restarted, still problem persists.

    I think its problem with Graphic Card.

    #10036

    Sunil Urs
    Keymaster

    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.


    Sunil Urs

    #10037

    dilipt
    Member

    Many Thanks … disabling GPU accelerated rendering resolved the issue.

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

You must be logged in to reply to this topic.