Home forums Using CanvasJS Show Legend in dateTime series chart

This topic contains 4 replies, has 2 voices, and was last updated by  Sunil Urs 2 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #5694

    tuzzo77
    Participant

    Hi everybody.

    I’m very new in canvasjs chart, but I have notice in a multiple dateTime series chart that

    the showLegend only display color and not the name of single lines.

    Here the example:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
    <title>ECONORMA FT105RF</title>

    <script type=’text/javascript’ src=’/js/lib/dummy.js’></script>
    <link rel=”stylesheet” type=”text/css” href=”/css/result-light.css”>
    <script type=’text/javascript’ src=”http://canvasjs.com/assets/script/canvasjs.min.js”></script>

    <style type=’text/css’>
    .description{
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
    }
    a:link, a:visited, a:active{color: #4F81BC;}
    </style>

    <script type=’text/javascript’>//<![CDATA[
    window.onload=function(){

    var dps1 = [{ x: new Date(2014, 02, 07, 15, 00, 10), y: 5 }, { x: new Date(2014, 02, 07, 15, 30, 10), y: 6 }, { x: new Date(2014, 02, 07, 17, 00, 10), y: -2 }];
    var dps2 = [{ x: new Date(2014, 02, 07, 17, 30, 10), y: 10.5 }, { x: new Date(2014, 02, 07, 18, 00, 10), y: 12.6 }, { x: new Date(2014, 02, 07, 20, 00, 10), y: 20 }];
    var dps3 = [{ x: new Date(2014, 02, 07, 12, 40, 10), y: 7.5 }, { x: new Date(2014, 02, 07, 14, 00, 10), y: 6.6 }, { x: new Date(2014, 02, 07, 16, 00, 10), y: -5 }];
    var dps4 = [{ x: new Date(2014, 02, 07, 11, 10, 10), y: 8.5 }, { x: new Date(2014, 02, 07, 15, 00, 10), y: 9.6 }, { x: new Date(2014, 02, 07, 17, 00, 10), y: -4 }];

    var chart = new CanvasJS.Chart(“chartContainer”, {
    backgroundColor: “#000000”,

    zoomEnabled: true,
    title:{
    text: “ECONORMA Chart”,
    fontColor: “white”,
    },
    axisX :{
    interval:1,
    intervalType: “hour”,
    valueFormatString: “DD/MM/YYYY HH:mm”,
    labelFontColor: “white”
    },
    axisY :{
    includeZero: false,
    valueFormatString: “##.00”,
    labelFontColor: “white”
    },
    legend: {
    horizontalAlign: “right”,
    verticalAlign: “center”
    },

    data: [
    { type: “line”, lineThickness:3, showInLegend: true, name: “Sonda 1”, toolTipContent: “{label}<br/>{x} ({y} &#176C) “,dataPoints: dps1 },
    { type: “line”, lineThickness:3, showInLegend: true, name: “Sonda 2”, toolTipContent: “{label}<br/>{x} ({y} &#176C) “,dataPoints: dps2 },
    { type: “line”, lineThickness:3, showInLegend: true, name: “Sonda 3”, toolTipContent: “{label}<br/>{x} ({y} &#176C) “,dataPoints: dps3 },
    { type: “line”, lineThickness:3, showInLegend: true, name: “Sonda 4”, toolTipContent: “{label}<br/>{x} ({y} &#176C) “,dataPoints: dps4 }
    ]
    // end of data for 2 line graphs

    }); // End of new chart variable

    chart.render();
    }//]]>

    </script>

    </head>
    <body>
    <div id=”chartContainer” style=”height: 360px; width: 100%;”></div>
    <p class=”description”>ECONORMA SAS Copyright FT105RF-Plus JS-Charts
    </p>

    </body>

    </html>

    #5696

    Sunil Urs
    Keymaster

    Here is an example that I’ve created with the dataPoints that you provided. Hope this helps.

    In case you are not able to fix the issue, please create a jsfiddle which recreates the issue and I’ll try to fix the same.

    #5697

    tuzzo77
    Participant

    Thank you so much my friend. And thanks for all your very good work. My problem was the black color that covered the series legend.

    #5698

    tuzzo77
    Participant

    Two more questions please:

    1-Is it possibile to have a Y interval from +50 to -10 for example (always)

    2-Is it possibile to put the legend name inside toolTipContent.

    Thank you so much.

    #5699

    Sunil Urs
    Keymaster

    My problem was the black color that covered the series legend.

    You might have already figured out the solution. Still I just wanted to let you know that you can change legend item’s font color so that it doesn’t become invisible because of the same background color.

    Is it possibile to have a Y interval from +50 to -10 for example (always)

    Yes you can set the axis range using minimum and maximum properties of axisX/axisY. Checkout Axis Range section of this tutorial on axis.

    Is it possibile to put the legend name inside toolTipContent.

    Yes. Here is an example.

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

You must be logged in to reply to this topic.