Home forums Using CanvasJS Title and subtitles not showing

This topic contains 11 replies, has 2 voices, and was last updated by  cshickman 1 month ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #13985

    cshickman
    Member

    Hello,

    I have just begun using canvasjs. I tried creating a donut chart. The chart itself looks great, but the title and subtitles aren’t showing up at all.

    I tried creating a JSFiddle, but they worked there with no problems. It’s the exact same code, so I don’t understand. I am running in a Visual Studio solution off a plain .htm file with no other external files brought in (aka it’s not external CSS or anything).

    Here is the code:

    <!DOCTYPE HTML>
    <html>
    <head>
      <script type="text/javascript">
          window.onload = function () {
              var chart = new CanvasJS.Chart("chartContainer",
        {
            interactivityEnabled: false,
            backgroundColor: "transparent",
            title: {
                text: "Test",
                fontColor: "black"
            },
            subtitles: [
    		{
    		    text: "7",
    		    verticalAlign: "center",
    		    horizontalAlign: "center",
    		    fontFamily: "tahoma",
    		    fontSize: "16",
    		    fontColor: "black"
    		}
    		],
            creditText: false,
            data: [
          {
              type: "doughnut",
              startAngle: 270,
              dataPoints: [
             { y: 7, color: "#00a04a" },
             { y: 3, color: "#fdc02b" }
           ]
          }
         ]
        });
              debugger;
              chart.render();
          }
      </script>
      <script src="http://canvasjs.com/assets/script/canvasjs.min.js" />
    </head>
      <body>
        <div id="chartContainer" style="height: 300px; width: 300px">
        </div>
      </body>
     </html>

    The donut chart shows up fine, but no text at all. Any ideas?? Thanks!

    #13987

    Vishwas R
    Keymaster

    @cshickman,

    It seems to be working fine with every browser including Firefox, Chrome, Opera, IE, Visual Studio Internal Browser. Can you kindly provide us some more info like the OS and browser details in which you are facing this issue, so that we can look into it and help you out.

    Working Code Screenshot

    #13994

    cshickman
    Member

    Thanks Vishwas. Yeah, I got it to work in JSFiddle and everything too. My OS is Windows 7 Enterprise. Running on IE Edge out of Visual Studio 2010 (in debug mode). I’ve tried it on both *.htm and *.aspx files. I tried it on different chart types, and the title and subtitle attributes don’t show up no matter the chart type. There is no external CSS file linked that could be coming in to play; the code snippet above is the entirety of the file.

    #13995

    cshickman
    Member

    Here is a link to the image: http://imgur.com/kj1jonc

    What I see

    And here’s what is actually getting rendered when I look at it with IE’s debugger:

    <!DOCTYPE html>
    <html><head>
      <script type="text/javascript">
          window.onload = function () {
              var chart = new CanvasJS.Chart("chartContainer",
        {
            interactivityEnabled: false,
            backgroundColor: "transparent",
            title:{
                text: "Test",
                fontColor: "black"
            },
            subtitles: [
    		{
    		    text: "7",
    		    verticalAlign: "center",
    		    horizontalAlign: "center",
    		    fontFamily: "tahoma",
    		    fontSize: "16",
                fontColor: "black"
    		}
    		],
            creditText: false,
            data: [
          {
              type: "doughnut",
              startAngle: 270,
              dataPoints: [
             { y: 7, color: "#00a04a" },
             { y: 3, color: "#fdc02b" }
           ]
          }
         ]
        });
              debugger;
              chart.render();
          }
      </script>
      <script src="../../Scripts/Dashboard/canvasjs.min.js" type="text/javascript"></script>
    </head>
      <body>
        <div id="chartContainer" style="width: 300px; height: 300px;"><div class="canvasjs-chart-container" style="text-align: left; position: relative; cursor: auto;"><canvas height="300" class="canvasjs-chart-canvas" style="position: absolute;"></canvas><canvas height="300" class="canvasjs-chart-canvas" style="position: absolute;"></canvas><div class="canvasjs-chart-tooltip" style="border-radius: 5px; height: auto; display: none; position: absolute; z-index: 1000; box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.1);"><div style="background: rgba(255, 255, 255, 0.9); margin: 0px; padding: 5px; border-radius: 5px; border: 2px solid gray; border-image: none; width: auto; height: auto; text-align: left; color: rgb(0, 0, 0); text-indent: 0px; font-family: Calibri, Arial, Georgia, serif; font-size: 14px; font-style: italic; font-weight: normal; white-space: nowrap; min-width: 50px; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;"> Sample Tooltip</div></div><a tabindex="-1" class="canvasjs-chart-credit" style="margin: 0px; top: 286px; right: 2px; color: white; font-family: Calibri, Lucida Grande, Lucida Sans Unicode, Arial, sans-serif; font-size: 11px; text-decoration: none; position: absolute;" href="http://canvasjs.com/" target="_blank">CanvasJS.com</a></div></div>
      
     <span style="margin: 0px; padding: 0px; border: currentColor; border-image: none; left: 0px; top: -20000px; line-height: normal; font-family: Calibri, Optima, Candara, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: normal; display: none; white-space: pre; position: absolute;">Mpgyi</span></body></html>
    #13996

    cshickman
    Member

    Dunno why the image link didn’t work, but it’s the donut chart, just no text anywhere. Running out of localhost.

    #14001

    Vishwas R
    Keymaster

    @cshickman,

    We are unable to reproduce the issue at our end even in Edge in debug-mode.

    Doughnut chart in Edge

    Can you kindly share your browser version and steps to reproduce the issue?


    Vishwas R

    #14005

    cshickman
    Member

    Here is what I did:

    1. Open an instance of Visual Studio 2010.
    2. Created an ASP.NET Empty Web Application.
    3. Added an HTML page (I named it DonutTest.htm”)
    4. Replaced the HTML file contents with:

    <!DOCTYPE HTML>
    <html>
    <head>
      <script type="text/javascript">
          window.onload = function () {
              var chart = new CanvasJS.Chart("chartContainer",
        {
            interactivityEnabled: false,
            backgroundColor: "transparent",
            title: {
                text: "Test",
                fontColor: "black"
            },
            subtitles: [
    		{
    		    text: "7",
    		    verticalAlign: "center",
    		    horizontalAlign: "center",
    		    fontFamily: "tahoma",
    		    fontSize: "16",
    		    fontColor: "black"
    		}
    		],
            creditText: false,
            data: [
          {
              type: "doughnut",
              startAngle: 270,
              dataPoints: [
             { y: 7, color: "#00a04a" },
             { y: 3, color: "#fdc02b" }
           ]
          }
         ]
        });
              chart.render();
          }
      </script>
      <script src="canvasjs.min.js" type="text/javascript"></script>
    </head>
      <body>
        <div id="chartContainer" style="height: 300px; width: 300px">
        </div>
      </body>
     </html>

    4. Added an existing item to the project (canvasjs.min.js).
    5. Started debugging.
    6. I see the donut chart, but no text.

    When I start debugging, the version of IE being emulated is Edge, according to the IE debugger. But the about window says Internet Explorer version 11.0.9600.18537CO. Update Versions 11.0.38.

    I still see the “Trial Version” text however.

    I see the same result if I use Debug>Start Without Debugging.

    I also sent the project to one of my co-workers. He got the same result as I did.

    If I use the debugger to see what is actually contained in the “chart” variable, I can see where the properties have been assigned in chart.options.subtitles[0] and chart.options.title. Does that sound right?

    I work for a high-security government complex. Is it possible my network could be blocking a feature or something? It seems unlikely, but crazier things have happened…

    #14008

    Vishwas R
    Keymaster

    @cshickman,

    Thanks for the info. We followed the steps you have provided but found its working fine.

    Donut Chart with Title & Subtitle

    Can you kindly share the sample project with the issue, so that we can look into it and help you out?

    #14015

    cshickman
    Member

    Okay. How should I go about doing that? Thanks

    #14027

    cshickman
    Member

    Okay, another new discovery. I was trying to isolate the problem to eliminate Visual Studio or any kind of debug mode as the culprit. I just attempted to upload canvasjs.min.js and my .htm file into a folder by itself on my SharePoint team site. Still the same result: no title or subtitle.

    • This reply was modified 1 month ago by  cshickman.
    #14037

    cshickman
    Member

    I tried it in Firefox too. Still no luck.

    THEN, I tried uploading the two files to a SharePoint site that I know is external from my company’s network. Still no text.

    THEN, I tried running the file locally, both on my work computer and my personal laptop. No luck.

    THEN, I tried it on Google Chrome, IE, Firefox, and locally on my personal laptop. No luck.

    THEN, I tried running a hotspot off my phone to make sure it had nothing to do with being on my company’s Wi-Fi. No luck.

    It just doesn’t work! No matter what environment I’m using.

    Beginning to think that it can’t be just me. Are we sure the trial version doesn’t affect the text at all? I have submitted a request for my company to purchase the full license for canvasjs, but if I can’t even get any text to appear, then how can I hope to do something much more complicated?

    #14039

    cshickman
    Member

    Update: I got it working. I re-downloaded the canvasjs.min.js file and replaced the one in my project. It worked after that. I have no idea why that worked, as I haven’t edited the canvasjs.min.js file at all. But I suppose that all’s well that ends well! How bizarre…

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

You must be logged in to reply to this topic.