Print is not working for any chart in chrome

3 posts, 1 answers
  1. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 13 Jun 2013 Link to this post

    Hello,

    I am not able to get background color in chart print in chrome.

    Can you please try with below code snippet?

    http://try.kendoui.com/dataviz/chart-basics/1

    HTML
    <a id="jayeshgoyani" class="MyCLass" >Click Here For print</a>
    <div class="chart-wrapper">
                    <div id="chart"></div>
                </div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
       <polygon points="100,10 40,180 190,60 10,60 160,180"
       style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    </svg>
    JS
      var blogComments = [ {
                            "blog": "My blog",
                            "day": "1",
                            "value": 3,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "2",
                            "value": 7,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "3",
                            "value": 12,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "4",
                            "value": 15,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "5",
                            "value": 6,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "6",
                            "value": 23,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "7",
                            "value": 12,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "8",
                            "value": 10,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "9",
                            "value": 17,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "10",
                            "value": 13,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "11",
                            "value": 14,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "12",
                            "value": 15,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "13",
                            "value": 3,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "14",
                            "value": 6,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "15",
                            "value": 23,
                            "userColor": "#565656"
                        }, {
                            "blog": "My blog",
                            "day": "16",
                            "value": 25,
                            "userColor": "#565656"
                        }, {
                            "blog": "My blog",
                            "day": "17",
                            "value": 21,
                            "userColor": "#565656"
                        }, {
                            "blog": "My blog",
                            "day": "18",
                            "value": 18,
                            "userColor": "#565656"
                        }, {
                            "blog": "My blog",
                            "day": "19",
                            "value": 17,
                            "userColor": "#565656"
                        }, {
                            "blog": "My blog",
                            "day": "20",
                            "value": 16,
                            "userColor": "#565656"
                        }, {
                            "blog": "My blog",
                            "day": "21",
                            "value": 11,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "22",
                            "value": 3,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "23",
                            "value": 8,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "24",
                            "value": 5,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "25",
                            "value": 4,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "26",
                            "value": 1,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "27",
                            "value": 7,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "28",
                            "value": 6,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "29",
                            "value": 3,
                            "userColor": "#ffd600"
                        }, {
                            "blog": "My blog",
                            "day": "30",
                            "value": 6,
                            "userColor": "#ffd600"
                        } ];
     
                    function createChart() {
                        $("#chart").kendoChart({
                            dataSource: {
                                data: blogComments
                            },
                            title: {
                                align: "left",
                                text: "Comments per day"
                            },
                            legend: {
                                visible: false
                            },
                            seriesDefaults: {
                                type: "column",
                                labels: {
                                    visible: true,
                                    background: "transparent"
                                }
                            },
                            series: [{
                                field: "value",
                                colorField: "userColor"
                            }],
                            valueAxis: {
                                max: 28,
                                majorGridLines: {
                                    visible: false
                                },
                                visible: false
                            },
                            categoryAxis: {
                                field: "day",
                                majorGridLines: {
                                    visible: false
                                },
                                line: {
                                    visible: false
                                }
                            }
                        });
                    }
     
                    $(document).ready(function() {
                        setTimeout(function() {
                            // Initialize the chart with a delay to make sure
                            // the initial animation is visible
                            createChart();
     
                            $("#example").bind("kendo:skinChange", function(e) {
                                createChart();
                            });
                             
                             $("#jayeshgoyani").bind("click", function(e) {
                                PerviousDate();
                            });
                             
                        }, 400);
                    });
    function PerviousDate() {
        window.print();
    }

    CSS
    .MyCLass
        {
            color:Red;
        }

    Please check attached image for more information.

    Thanks,
    Jayesh Goyani
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 13 Jun 2013 Link to this post

    Hello Jayesh,

    Please check this forum thread - it discusses the same issue and contains a possible solution. 

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 14 Jun 2013 Link to this post

    Hello Iliana,

    Thanks a lot for this.

    Thanks,
    Jayesh Goyani
Back to Top