This is a migrated thread and some comments may be shown as answers.

Problem when put more than one chart type in a page

4 Answers 55 Views
Charts
This is a migrated thread and some comments may be shown as answers.
vee
Top achievements
Rank 1
vee asked on 01 Dec 2011, 08:09 AM
Hi, 

I got a problem when I tried to put more than 1 chart type in a page. I want to see 2 types, bar and line in the same page, so I experimented with chart example (index.html). The behavior is that when I put another chart type drawing underneath the first chart drawing function, the page rendered only the last chart I just put. 
       Actually I'm quite new in JQuery so I'm not sure did I put anything wrong.  The code here was modified from the example named "index.html" in kendoui\examples\dataviz\line-chart. 

<div class="description">Basic usage</div>
        <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart" style="background: center no-repeat url('../../shared/styles/world-map.png');"></div>
            </div>
            <script>
           $(document).ready(function() {
                    createChart1();
               createChart2();
                  
                });

                function createChart1() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            type: "line"
                        },
                        series: [{
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }, {
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }              
            </script>
        </div>


 <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart" style="background: center no-repeat url('../../shared/styles/world-map.png');"></div>
            </div>
            <script>
                function createChart2() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            type: "column"
                        },
                        series: [{
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }, {
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }              
            </script>
        </div>


Note that both createChart1 and createChart2 are all the same except the chart type defined.

What I've done wrong for this??  

By the way, I must say you team has done an impressive work. I'll let my team based in Thailand learn to use your widget for new HTML5 compliance web development. 

Thank you!

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 02 Dec 2011, 08:45 AM
Hi Vee,

You should use different element IDs for your charts.


All the best,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
vee
Top achievements
Rank 1
answered on 02 Dec 2011, 06:30 PM
Thank you for your reply.

Did you mean, according to the code, "div id=examlple1" for chart 1 and  "div id=example2" for chart2 ?  If it is so, I did it already but the result is all the same as attached image. 

See the code here :

  <div id="example1" class="k-content">
            <div class="chart-wrapper">
                <div id="chart" style="background: center no-repeat url('../../shared/styles/world-map.png');"></div>
            </div>
            <script>
                 $(document).ready(function() {
                      createChart1();
    createChart2();
                  
                });

                function createChart1() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            type: "line"
                        },
                        series: [{
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }, {
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }              
            </script>
        </div>


<div id="example2" class="k-content">
            <div class="chart-wrapper">
                <div id="chart" style="background: center no-repeat url('../../shared/styles/world-map.png');"></div>
            </div>
            <script>
                function createChart2() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            type: "column"
                        },
                        series: [{
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }, {
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }              
            </script>
        </div>


Or do I misunderstand something? please suggest..  

Thank you
0
James
Top achievements
Rank 1
answered on 04 Dec 2011, 12:16 AM
You're still using the same ID for both charts you're trying to create: #chart - you need to give them each a unique ID (ID's should always be unique on a page.)
0
vee
Top achievements
Rank 1
answered on 05 Dec 2011, 03:50 PM
Thanks james.. that solves my problem at all. Thanks a lot!!
Tags
Charts
Asked by
vee
Top achievements
Rank 1
Answers by
Daniel
Telerik team
vee
Top achievements
Rank 1
James
Top achievements
Rank 1
Share this question
or