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 90 Views

Charts

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

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

answered on 02 Dec 2011, 06:30 PM

internetuser.png

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