Home forums Using CanvasJS Bug with export logo function

This topic contains 1 reply, has 2 voices, and was last updated by  Vishwas R 1 week, 1 day ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #27101
    window.onload = function () {
    	var viewportMin;
    	var viewportMax;
      var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        zoomEnabled: true,
        backgroundColor: "white",
        exportEnabled: true,
        theme: "light2", // "light1", "light2", "dark1", "dark2"
        title:{
          text: "Courbe des huiles",
          fontSize: 24
        },
        toolTip:{   
    			content: "{name}, {x}: {y}"      
    		},
        subtitles: [{
    		text: "C. Giraud & Cie© - giraud@cgiraudcie.fr - 0033 (0)4 91 49 33 01",
    		fontSize: 15
    	},{
    		text: "UE : Usine Européenne,  Cotations à échéance mois +1 ou mois +2, sans engagement",
    		fontSize: 13
    	}],
        axisY: {
    		includeZero: false,
        valueFormatString: "# ##0.#",
    		prefix: "",
        labelFontSize: 12
    	},
        axisX:{      
          valueFormatString: "DD-MMM-YY",
          //intervalType: "hour",
            viewportMinimum: <?php echo $viewportMin; ?> ,
            viewportMaximum: <?php echo $viewportMax; ?>,
            labelFontSize: 12
          //interval: 12
        },
        legend:{
    		cursor: "pointer",
        fontSize: 15
    	},
        data: [{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          connectNullData: true,
          name: "Arachide Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($arachide, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Coco Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($coco, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Colza Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($colza_raffine, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Palme Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($palme_raffine, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Soja Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($soja_raffine, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Stearine Palme Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($stearine_palme_raffine, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Tournesol Oléique Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($tournesol_oleique_raffine, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Tournesol Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($tournesol_raffine, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Graine Colza (€/T EP)",
          dataPoints: <?php echo json_encode($graine_colza, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Colza Brute (€/T Exw R’dam)",
          dataPoints: <?php echo json_encode($huile_colza_brut, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Soja Brute (€/T Exw R’dam)",
          dataPoints: <?php echo json_encode($huile_soja_brut, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Prime Oléique (€/T Exw UE)",
          dataPoints: <?php echo json_encode($prime_oleique, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Soja Brute Chicago (cts/lbs)",
          dataPoints: <?php echo json_encode($soja_brut_chicago, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Euro/dollar",
          dataPoints: <?php echo json_encode($euro_dollar, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Gasoil Londres ($/t)",
          dataPoints: <?php echo json_encode($gasoil, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Palme Brute (€/T Exw R’dam)",
          dataPoints: <?php echo json_encode($huile_palme_brut, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Oléine Palme Raffinée (€/T Exw UE)",
          dataPoints: <?php echo json_encode($oleine_palme_raffine, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Baril Pétrole NY ($/baril)" ,
          dataPoints: <?php echo json_encode($baril_petrole_ny, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Maïs Raffinée (€/T Exw UE)" ,
          dataPoints: <?php echo json_encode($mais_raffine, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Prod. Huile Palme Malaisie (T)" ,
          dataPoints: <?php echo json_encode($prod_huile_palme_malaisie, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Stocks Huile Palme Malaisie (T)" ,
          dataPoints: <?php echo json_encode($stock_huile_palme_malaisie, JSON_NUMERIC_CHECK); ?>
        },{
          type: "line", //change type to bar, line, area, pie, etc 
          xValueType: "dateTime",
          showInLegend: "true",
          name: "Export. Huile Palme Malaisie (T)" ,
          dataPoints: <?php echo json_encode($export_huile_palme_malaisie, JSON_NUMERIC_CHECK); ?>
        }
        ]
      });
      chart.render();
    
    //Export  logo
    var canvas = document.getElementsByClassName("canvasjs-chart-canvas")[0]
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    imageObj.crossOrigin = "anonymous";//https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
    
    imageObj.onload = function() {
    	context.drawImage(imageObj, 5, 5, 60, 20);
    }
    imageObj.src = 'http://www.cgiraudcie.com/logo-c-giraud-cie-courtage-huiles_FR.jpg';
    
      /
    }
    #27115

    @animage,

    You can position image on top of chart as shown in this tutorial or with few lines of code, you can draw it on chart and export as shown in this example.

    From what we have observed, sometimes things get delayed mostly when we are not able to reproduce your use-case or not able to understand the exact requirements. Having a JSFiddle helps us in understanding your case better and many a times we can just edit your code on JSFiddle to fix the issue right-away. I request you to brief more along with JSFiddle with your use-case if you have further queries or facing any issue.


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.