Home › Forums › Chart Support › Show Legend in dateTime series chart

Show Legend in dateTime series chart

Viewing 5 posts - 1 through 5 (of 5 total)
  • February 7, 2014 at 9:22 pm #5694

    tuzzo77

    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="https://cdn.canvasjs.com/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}   <strong>({y} &#176C)</strong> ",dataPoints: dps1 },
        { type: "line", lineThickness:3, showInLegend: true, name: "Sonda 2", toolTipContent: "{label}<br/>{x}   <strong>({y} &#176C)</strong> ",dataPoints: dps2 },
		{ type: "line", lineThickness:3, showInLegend: true, name: "Sonda 3", toolTipContent: "{label}<br/>{x}   <strong>({y} &#176C)</strong> ",dataPoints: dps3 },
		{ type: "line", lineThickness:3, showInLegend: true, name: "Sonda 4", toolTipContent: "{label}<br/>{x}   <strong>({y} &#176C)</strong> ",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 <a href="http://www.econorma.com" title="ECONORMA Charts" target="_blank">  FT105RF-Plus JS-Charts</a>
</p>
  
</body>


</html>
    February 11, 2014 at 2:24 pm #5696

    Sunil Urs

    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.

    February 11, 2014 at 3:26 pm #5697

    tuzzo77

    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.

    February 11, 2014 at 3:36 pm #5698

    tuzzo77

    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.

    February 12, 2014 at 4:19 pm #5699

    Sunil Urs

    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.