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

Cannot resize graph

3 Answers 47 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 27 Jan 2017, 09:06 AM

I am having trouble make a chart wider. My html & JS is below:

<div class="demo-section k-content wide" style="width: 100%">
<div id="indepthGraph"></div>
</div>

$("#indepthGraph").kendoChart({

title: {
text: "Graph Shit"
}

});

 

However, when I check developer tools elements tab, I see that my both my div's have disappeared, to be replaced by this <svg> tag. This is fine, however, on your examples http://demos.telerik.com/kendo-ui/bar-charts/multiple-axes - developer tool shows the two divs still there, with the <svg> tag inside the child div.

Thanks

Marc

3 Answers, 1 is accepted

Sort by
0
Eduardo Serra
Telerik team
answered on 27 Jan 2017, 03:51 PM
Hello Marc,

The disappearance of the HTML div elements shouldn't be caused by the Kendo UI Chart. I have copied your code into a Kendo UI Dojo to double check and they can be seen where they should in the developer tools of your browser; you can take a look at it here.

In order to offer you the best support possible, please share with us the complete code you're working with for this chart and a screenshot of the relevant section from the browser developer tools.

Thank you.

Regards,
Eduardo Serra
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 30 Jan 2017, 08:24 AM

Hi Eduardo,

Attached is the print screen from Chrome dev tools.

My code is the following:

Html (this is inside an AngularJS component, which is placed inside a Kendo Window component)

<div class="demo-section k-content wide" style="width: 100%">
<div id="indepthGraph"></div>
</div>

JS (inside the AngularJS component controller, inside a watch, which watches the data which is used for the datasource)

if (graph == null) {
graph = $("#indepthGraph").kendoChart({
legend: {
position: "top"
},
series: [
{
field: "averagePriceAmount",
name: "Average Price Amount",
type: "line",
axis: "averagePriceAmountAxis"
},
{
field: "unitsEstimate",
name: "Units Estimate",
type: "column",
axis: "unitsAxis"
},
{
field: "salesEstimate",
name: "Sales Estimate",
type: "column",
axis: "unitsAxis"
}
],
categoryAxis: {
field: "offerPeriodName",
labels: {
rotation: -90
},
majorGridLines: {
visible: true
}
},
valueAxis: [
{
name: "unitsAxis",
title: {text: "Units"}
}, {
name: "averagePriceAmountAxis",
title: {text: "Average Price Amount"}
}
]
});

if (ipCookie("foresight_theme")) {
$("#indepthGraph").data("kendoChart").setOptions(
{
theme: ipCookie("foresight_theme")
}
);
}

$("#indepthGraph").data("kendoChart").setDataSource(dataSource);

 

0
Eduardo Serra
Telerik team
answered on 31 Jan 2017, 03:47 PM
Hello Marc,

From the code you shared, it is not possible to determine what's causing this issue. In order to be of more help for you, please share with us a runnable sample that reproduces the issue; you can share it through plunker and can use any of the samples here as a base.

Thank you.

Regards,
Eduardo Serra
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Charts
Asked by
Marc
Top achievements
Rank 1
Answers by
Eduardo Serra
Telerik team
Marc
Top achievements
Rank 1
Share this question
or