Home forums Using CanvasJS Print with text underneath

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #28259

    I have this chart with text underneath:

    Is there a way to print the chart AND the text when using the print export feature?
    When I try to print the whole page via the browser (Firefox and Chrome), it looks like this:

    Is there any way to print both the chart and the text underneath on one page?

    #28273

    @jd26,

    You can print the contents of window using print() as shown in this JSFiddle.

    —-
    Manoj Mohan
    Team CanvasJS

    #28275

    Thank you. Unfortunately the chart and table overlap when I print it..

    My code:

            window.onload = function () {
                CanvasJS.addCultureInfo("de",
                    {
                        decimalSeparator: ",",
                        savePNGText: "Als PNG speichern",
                        saveJPGText: "Als JPEG speichern",
                        printText: "Drucken"
                    });
    
                var chart1 = new CanvasJS.Chart("column-chart", {
                    animationEnabled: true,
                    exportEnabled: true,
                    theme: "light1",
                    culture: "de",
                    title: {
                        text: "Durchschnittliches Ergebnis je Aufgabe",
                        fontFamily: "Verdana",
                        fontSize: "23",
                        padding: 12
                    },
                    subtitles: [{
                        text: < ? php echo json_encode($subtitle);?>,
                        fontFamily: "Verdana"
                    }, {
                        text: < ? php echo json_encode($anzahl);?>,
                        fontFamily: "Verdana",
                        padding: 4
                    }
                    ],
                    axisY: {
                        includeZero: true
                    },
                    toolTip: {
                        shared: true
                    },
                    legend: {
                        cursor: "pointer"
                    },
                    axisX: {
                        labelAngle: 0
                    },
                    data: [{
                        type: "column",
                        axisYType: "primary",
                        indexLabel: "{y}",
                        indexLabelPlacement: "inside",
                        yValueFormatString: "###.##",
                        name: "1. Testung",
                        legendText: "1. Testung",
                        showInLegend: true,
                        dataPoints:
                        < ? php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK);?>
                    }, {
                        type: "column",
                        axisYType: "primary",
                        indexLabel: "{y}",
                        indexLabelPlacement: "inside",
                        yValueFormatString: "###.##",
                        name: "2. Testung",
                        legendText: "2. Testung",
                        showInLegend: true,
                        dataPoints:
                        < ? php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK);?>
                    }]
                });
                chart1.render();
    
                $("#exportButton").click(function(){
                    window.print();
                });
            }
    
    <div id="chartsContainer">
        <div class="chart mt-4 ml-4 mb-4" id="column-chart"></div>
                        <article class="col-md-5 mt-4 small-font">
                            <br><br><br>
                            <b>Legende</b>
    
                            <table class="table table-sm">
                                <tbody>
                                <tr>
                                    <td class="text-center">Lautfehler</td>
                                    <td>=</td>
                                    <td>Lautüberprüfung (Wieviele Laute von 46 waren falsch?)</td>
                                </tr>
                                <tr>
                                    <td class="text-center">PD</td>
                                    <td>=</td>
                                    <td>Phonematische Differenzierung</td>
                                </tr>
                               [ ..... ]
                                </tbody>
                            </table>
                            <button id="exportButton" type="button">Print The Page</button>
                        </article>
                </div>
    #28278

    @jd26,

    Defining height and width of the chart container should work fine in your case.

    If you are still facing the issue, kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can look into your code, understand the scenario better and help you out?

    —-
    Manoj Mohan
    Team CanvasJS

    #28283

    Thank you, I defined the height and width in my css file. For some reason, that was the problem when printing. It works now, after I put it directly into the code. There’s just one thing now:

    The options icon covers the title when printing.. is there a fix for this?

    #28298

    @jd26,

    It seems to be working fine. Can you kindly create a sample project reproducing the issue and share it with us over Google-Drive or Onedrive so that we can look into your code, understand the scenario better and help you out?

    —-
    Manoj Mohan
    Team CanvasJS

    #28306

    I managed to hide the icon when printing using css media queries

    @media print {
        .canvasjs-chart-toolbar {
           display: none;
         }
    }
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.