I want to use kendo ui to crate multiple bar charts in a page. I am using the theme: "BlueOpal", however ,only the first chart has blue color, all the others are just black. I tested this page on IE, safari, opera, all work.
Is there anyone can give me a fix,thanks.
The code is blow:
function createChart()
{
$("#tabstrip-1").kendoChart({theme: "BlueOpal",
legend: { position: "bottom"},
seriesDefaults: { type: "column"},
series: [{ name:"samples", data: [58276, 57987, 96199, 59018, 54371, 73841, 71390], color:"red"}],
valueAxis: { labels: {format: "{0}" }},
categoryAxis: { categories: ['2011/11/17', '2011/11/18', '2011/11/19', '2011/11/20', '2011/11/21', '2011/11/22', '2011/11/23'], labels:{rotation:3, format: "{0:C}"}},
tooltip: { visible: true, format: "{0}"}
});
$("#tabstrip-2").kendoChart({theme: "BlueOpal",
legend: { position: "bottom"},
seriesDefaults: { type: "column"},
series: [{ name:"samples", data: [58276, 57987, 96199, 59018, 54371, 73841, 71390]}],
valueAxis: { labels: {format: "{0}" }},
categoryAxis: { categories: ['2011/11/17', '2011/11/18', '2011/11/19', '2011/11/20', '2011/11/21', '2011/11/22', '2011/11/23'], labels:{rotation:2, format: "{0:C}"}},
tooltip: { visible: true, format: "{0}"}
});
}
Is there anyone can give me a fix,thanks.
The code is blow:
function createChart()
{
$("#tabstrip-1").kendoChart({theme: "BlueOpal",
legend: { position: "bottom"},
seriesDefaults: { type: "column"},
series: [{ name:"samples", data: [58276, 57987, 96199, 59018, 54371, 73841, 71390], color:"red"}],
valueAxis: { labels: {format: "{0}" }},
categoryAxis: { categories: ['2011/11/17', '2011/11/18', '2011/11/19', '2011/11/20', '2011/11/21', '2011/11/22', '2011/11/23'], labels:{rotation:3, format: "{0:C}"}},
tooltip: { visible: true, format: "{0}"}
});
$("#tabstrip-2").kendoChart({theme: "BlueOpal",
legend: { position: "bottom"},
seriesDefaults: { type: "column"},
series: [{ name:"samples", data: [58276, 57987, 96199, 59018, 54371, 73841, 71390]}],
valueAxis: { labels: {format: "{0}" }},
categoryAxis: { categories: ['2011/11/17', '2011/11/18', '2011/11/19', '2011/11/20', '2011/11/21', '2011/11/22', '2011/11/23'], labels:{rotation:2, format: "{0:C}"}},
tooltip: { visible: true, format: "{0}"}
});
}