Hello,
I'm new to the Telerik/KendoUI grid and I'm trying to render a line graph via JavaScript in my MVC View. I've passed the values and they're producing funky results, so I tried hard-coding some simple integers in and... that's now working. But whenever I put in my Model data, the graph looks awful. It's a graph for a full day, 24 hours; I know that's a lot of data points, but there must be some way to make it look better. Below is the code for the Model-based chart and I've included a pic of the graph with its values. Series1 (today) and Series 2 (yesterday) are the plotted points and Series 3 should be the x-axis [hour]:
Screenshot: http://imgur.com/vADrBAo
Any help would be greatly appreciated!
[/code]
I'm new to the Telerik/KendoUI grid and I'm trying to render a line graph via JavaScript in my MVC View. I've passed the values and they're producing funky results, so I tried hard-coding some simple integers in and... that's now working. But whenever I put in my Model data, the graph looks awful. It's a graph for a full day, 24 hours; I know that's a lot of data points, but there must be some way to make it look better. Below is the code for the Model-based chart and I've included a pic of the graph with its values. Series1 (today) and Series 2 (yesterday) are the plotted points and Series 3 should be the x-axis [hour]:
Screenshot: http://imgur.com/vADrBAo
Any help would be greatly appreciated!
01.
var
today =
'@Html.Raw(Json.Encode(@Model.ApprovedToday))'
;
02.
var
yesterday =
'@Html.Raw(Json.Encode(@Model.ApprovedYesterday))'
;
03.
04.
/**************HARD-CODED VALUES ***********/
05.
//testing
06.
//today = new Array(1, 5, 3, 11, 17);
07.
//yesterday = new Array(7, 4, 22, 11, 0);
08.
09.
$(
'#chartNew2'
).kendoChart({
10.
theme:
'metro'
,
11.
seriesDefaults: {
12.
type:
'line'
,
13.
style:
'smooth'
14.
//type: 'column',
15.
//stack: true
16.
},
17.
series: [
18.
{
19.
name:
'Today'
,
20.
data: today,
21.
color:
'#609'
22.
},
23.
{
24.
name:
'Yesterday'
,
25.
data: yesterday,
26.
color:
'#f03'
27.
}
28.
]
29.
});
30.
});
[/code]