[JD26]

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

@media print {
    .canvasjs-chart-toolbar {
       display: none;
     }
}

[JD26]

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?

[JD26]

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>

[JD26]

okay so this worked (I feel stupid)
text: < ?php echo json_encode($title);? >,

[JD26]

New problem.. I want to change the title of the chart with PHP (set a variable as the title) but then my chart isn’t displayed anymore. How can I use php in the title?

I tried
text: < ? php $title ? >
and
text:< ? php echo $title; ? >

(without the unnecessary spaces obviously, it won’t let me post the code here otherwise)

[JD26]

okay nevermind, I managed to loop it correctly. Chart looks good now!
Thank you so much for your help!

[JD26]

Thank you!!

I’m sorry I’m asking so much.. now I want to add more column pairs. I tried to make a multidimensional array but it doesn’t work.

Could you take a look at the project again?
https://drive.google.com/open?id=18kKteS7UA9l-ruLJYA5HcOlYKJbkei0A

[JD26]

Thank you so much, it works!

Now I just want to add labels to the graph. Could you tell me how I can do this? This doesn’t work:

[JD26]

@sashiranjan

Do you still want to help me? Would really appreciate it

[JD26]

@Sashi Ranjan

I created a sample project :)
https://drive.google.com/drive/folders/18kKteS7UA9l-ruLJYA5HcOlYKJbkei0A?usp=sharing

I appreciate your help!

[JD26]

Been trying something like this:

foreach ($link->query('Select AVG(PD1), AVG(PD2) from table') as $row) {
        $PD1 = $row['AVG(PD1)'];
        $PD2 = $row['AVG(PD2)'];
        array_push($dataPoints,"$PD1","$PD2");
        array_push($dataPoints2, array("y"=> $dataPoints));
    };

but it doesn’t work