Jqplot staaf-grafiek wordt niet getoond.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Frits van Leeuwen

Frits van Leeuwen

12/07/2018 23:56:22
Quote Anchor link
Hallo allemaal,

Ik heb weer een vreemd probleem.
Ik heb een grafiek gemaakt die niet wordt getoond. De layout ziet er goed uit, maar de staafgrafiek wordt niet getoond.
Het vreemde is wel, als ik met de muit over de grafiek beweeg, zie ik wel dikke stippen met een label.

In het ladel lees ik ook wel de waarde die de staafgrafiek daar zou moeten hebben. Dus i.p.v. een staafgrafiek heb ik een verborgen stippen grafiek.

Wie weet wat er mis is?

Dit is de code voor de grafiek.

Alvast bedankt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
$(document).ready(function () {
    $.jqplot._noToImageButton = true;
    $.jqplot.config.enablePlugins = true;
    
    var staafdebet = <?php echo json_encode($journaalposten_debet_arr, JSON_NUMERIC_CHECK); ?>;
    var staafcredit = <?php echo json_encode($journaalposten_credit_arr, JSON_NUMERIC_CHECK); ?>;
    
    plot2 = $.jqplot('chart2', [staafdebet, staafcredit], {
        // Turns off animatino for all series in this plot.
        animate: false,
        highlighter: {
            show: true,
            sizeAdjust: 1,
            tooltipOffset: 9
        },
        grid: {
            background: 'rgba(57,57,57,0.0)',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#755E28',
            gridLineWidth: 1
        },
        legend: {
            show: true,
            placement: 'outside'
        },
        
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            showHighlight: true,
            rendererOptions: {
                fillToZero: true,
                smooth: false
            },
            showMarker: false,
            barWidth: null
        },
        series: [
            {
                renderer: $.jqplot.BarRenderer,
                fill: false,
                label: 'debet',
                color: '#1AA017'
            },
            {
                renderer: $.jqplot.BarRenderer,
                label: 'credit',
                color: '#FD3400'
            }
        ],
        axesDefaults: {
            rendererOptions: {
                drawBaseline: false
            }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    formatString: "%b %e",
                    angle: -30,
                    textColor: '#755E28'
                },
                min: "<?php echo $datum1; ?>",
                max: "<?php echo $datum2; ?>",
                tickInterval: "1 days",
                drawMajorGridlines: false
            },
            yaxis: {
                renderer: $.jqplot.LogAxisRenderer,
                rendererOptions: {
                    minorTicks: 0
                },
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                autoscale: true,
                tickOptions: {
                    formatString: " %.2f",
                    showMark: false,
                    textColor: '#755E28'
                }
            }
        }
    });
    
    $('.jqplot-highlighter-tooltip').addClass('ui-corner-all')

});
 
PHP hulp

PHP hulp

14/12/2018 17:13:32
 
Frits van Leeuwen

Frits van Leeuwen

14/11/2018 22:07:48
Quote Anchor link
Ik heb er dit van gemaakt en nu werkt het wel. Ik moest hiervoor wel een meervoudige array omvormen naar een enkelvoudige array.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
                                        $(document).ready(function(){
                                            
                                            var s1 = <?php echo json_encode($debet_arr, JSON_NUMERIC_CHECK); ?>;
                                            var s2 = <?php echo json_encode($credit_arr, JSON_NUMERIC_CHECK); ?>;
                                            var ticks = <?php echo json_encode($datum_arr, JSON_NUMERIC_CHECK); ?>;
    
                                            plot2 = $.jqplot('chart2', [s1, s2], {
                                                // Turns on animatino for all series in this plot.
                                                animate: false,
                                                cursor: {
                                                    show: true,
                                                    zoom: true,
                                                    looseZoom: true,
                                                    showTooltip: false,
                                                    tooltipLocation:'sw'
                                                },
                                                seriesDefaults: {
                                                    renderer:$.jqplot.BarRenderer,
                                                    rendererOptions: { fillToZero: true },
                                                    pointLabels: { show: true },
                                                    // Set the varyBarColor option to true to use different colors for each bar.
                                                    // The default series colors are used.
                                                    varyBarColor: false
                                                },
                                                axes: {
                                                    xaxis: {
                                                        renderer: $.jqplot.CategoryAxisRenderer,
                                                        ticks: ticks,
                                                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                                        tickOptions: {
                                                            formatString: '%e %b %Y',
                                                            angle: -90,
                                                            textColor: '#755E28'
                                                        }
                                                    },
                                                    yaxis: {
                                                        autoscale: true,
                                                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                                        label: 'inkomsten en uitgaven',
                                                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                                        tickOptions: {
                                                            formatString: " %.2f",
                                                            showMark: false,
                                                            textColor: '#755E28'
                                                        }
                                                    }
                                                },
                                                series: [
                                                    {
                                                        pointLabels: { show: true },
                                                        renderer: $.jqplot.BarRenderer,
                                                        fill: false,
                                                        label: 'inkomsten',
                                                        color: '#1AA017'
                                                    },
                                                    {
                                                        renderer: $.jqplot.BarRenderer,
                                                        label: 'uitgaven',
                                                        color: '#FD3400'
                                                    },
                                                    {
                                                        lineWidth:4,
                                                        markerOptions:{ style:'square' }
                                                    }
                                                ],
                                                // wijzig kleur bij mouseover
                                                highlighter: {
                                                    show: true,
                                                    tooltipAxes: 'y',
                                                    yvalues: 1,
                                                    formatString:'<table class="jqplot-highlighter"><tr><td>bedrag:</td><td>%s</td></tr></table>'
                                                },
                                                // legenda
                                                legend: {
                                                    show: true,
                                                    placement: 'outside'
                                                },
                                                // layout
                                                grid: {
                                                    background: 'rgba(57,57,57,0.0)',
                                                    drawBorder: false,
                                                    shadow: false,
                                                    gridLineColor: '#755E28',
                                                    gridLineWidth: 1
                                                }
                                            });
    
                                            $('#chart2').bind('jqplotDataHighlight',
                                                function (ev, seriesIndex, pointIndex, data) {
                                                    $('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
                                                }
                                            );
                                                
                                            $('#chart2').bind('jqplotDataUnhighlight',
                                                function (ev) {
                                                    $('#info2').html('Nothing');
                                                }
                                            );
                                        });
Gewijzigd op 14/11/2018 22:14:58 door Frits van Leeuwen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.