or
<script id="list-indicator-template" type="text/x-kendo-template"> <a href="views/valuesChart.html?IndicatorId=#: IndicatorId #&Attribute=#: Attribute #" class="km-listview-link" data-role="listview-link"> #: Attribute # <span class="attribute-value">#: kendo.toString(Value, "n2") #</span> </a></script>Hello,
We are looking for an expert who can help us customize Kendo UI framework to fit our custom build charts images. If you have experience working with Kendo UI then please email us back admin at FirePips .com
We will provide more details via email.
Regards
Victor
Sydney, Australia

Html.Kendo().Chart<AccountPerformance>(Model.Results) .Name("chart") .Title("Market Value") .Legend(legend => legend.Visible(false)) .Series(series => series.Line(model => model.Metrics.MarketValue) .Name(Model.ColumnTitle) .Labels(false) ) .ValueAxis(axis => axis.Numeric() .Labels(labels => labels.Format("{0:C0}"))) .CategoryAxis(axis => axis .Categories(model => model.ObservationDate) .Labels(labels => { labels.Format("MMM d"); labels.Rotation(45); } )) .Render();Html.Kendo().Window() .Name(windowId) .Width(650) .Title(Model.ChartTitle) .Content(@<text> <div style="width: 320px;"> CHART </div> <div style="width: 320px; float:right"> CHART </div>ksAllCharts = $("#AllCharts").kendoSplitter({ orientation: "vertical", panes: [ { size: "40px", scrollable: false, resizable: false }, { size: "300px", scrollable: false }, { size: "100%", scrollable: true } ], layoutChange: onAllChartsLayoutChange }).data("kendoSplitter"); ksCharts1 = $("#charts1").css("height", "100%").kendoSplitter({ orientation: "horizontal", panes: [ { size: "50%", scrollable: false }, { size: "50%", scrollable: false } ], layoutChange: onChartsLayoutChange }).data("kendoSplitter"); ksCharts2 = $("#charts2").css("height", "100%").kendoSplitter({ orientation: "horizontal", panes: [ {size: "50%", scrollable: false }, { size: "50%", scrollable: false } ], layoutChange: onChartsLayoutChange }).data("kendoSplitter");<ul id="panelBar"> <li>Testing a new page <div id="comparativeDashboardPanelContents"> <div id="AllCharts"> <div> <h1 class="top-header">testing a new page</h1> </div> <div id="chartsPane1"> <h2 class="top-header">chart area 1</h2> <div id="charts1"> <div id="OFPBySchool"></div> <div id="OFStuPBySchool"></div> </div> </div> <div id="chartsPane2"> <h2 class="top-header">chart area 2</h2> <div id="charts2"> <div id="StuCountsRiskBuckets"></div> <div id="SchoolCrosstab"></div> </div> </div> </div> </div> </li></ul>
<!DOCTYPE html><html><head> <title></title> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.rtl.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <link href="styles/kendo.dataviz.min.css" rel="stylesheet" /> <link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head><body> <div> <table class="history" > <tr> <td class="style7">Department C 1</td> <td class="spark" style="width: 210px;"><span id="hum-log"></span></td> <td class="style6">Department C 1</td> <td class="spark" style="width: 210px;"><span id="press-log" style="line-height: 60px"></span></td> </tr> <tr> <td class="style7">Department C 2</td> <td class="spark" style="width: 210px;"><span id="2c-log" style="line-height: 60px"></span></td> <td class="style6">Department C 2</td> <td class="spark" style="width: 210px;"><span id="temp-log" style="line-height: 60px"></span></td> </tr> <tr> <td class="style7">Department C 3</td> <td class="spark" style="width: 210px;"><span id="3c-log" style="line-height: 60px"></span></td> </tr> <tr> <td class="style7">Department C 4</td> <td class="spark" style="width: 210px;"><span id="4c-log" style="line-height: 60px"></span></td> </tr> <tr> <td class="style7">Department C 5</td> <td class="spark" style="width: 210px;"><span id="5c-log" style="line-height: 60px"></span></td> </tr> </table> </div> <script> function createSparklinesDepartment1C() { // Binding directly to an array alert('Entered'); var rowDataSource = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=1", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#press-log").kendoSparkline({ dataSource: rowDataSource, series: [{ type: "area", field: "count", color: "Green" }] }); //second one // Third one // Binding directly to an array } $(document).ready(createSparklinesDepartment1C); $("#example").bind("kendo:skinChange", createSparklinesDepartment1C); </script> <script> function createSparklinesDepartment2C() { alert('Entered 2c'); var rowDataSource2 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=2", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#temp-log").kendoSparkline({ dataSource: rowDataSource2, series: [{ type: "area", field: "count", color: "Red" }] }); } $(document).ready(createSparklinesDepartment2C); $("#example").bind("kendo:skinChange", createSparklinesDepartment2C); </script> <script> function createSparklinesDepartment1C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=1", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#hum-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Black" }] }); } $(document).ready(createSparklinesDepartment1C); $("#example").bind("kendo:skinChange", createSparklinesDepartment1C); </script><!-- The new ones --> <script> function createSparklinesDepartment2C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=2", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#2c-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Blue" }] }); } $(document).ready(createSparklinesDepartment2C); $("#example").bind("kendo:skinChange", createSparklinesDepartment2C); </script> <script> function createSparklinesDepartment3C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=3", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#3c-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Purple" }] }); } $(document).ready(createSparklinesDepartment3C); $("#example").bind("kendo:skinChange", createSparklinesDepartment3C); </script> <script> function createSparklinesDepartment4C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=4", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#4c-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Orange" }] }); } $(document).ready(createSparklinesDepartment4C); $("#example").bind("kendo:skinChange", createSparklinesDepartment4C); </script> <script> function createSparklinesDepartment5C() { alert('Entered 3c'); var rowDataSource3 = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:3118/Service1.svc/GetDataTypes?Technology=Department&carrier=5", type: 'GET', jsonpCallback: 'callback', dataType: "jsonp" } } }); $("#5c-log").kendoSparkline({ dataSource: rowDataSource3, series: [{ type: "area", field: "count", color: "Magenta" }] }); } $(document).ready(createSparklinesDepartment5C); $("#example").bind("kendo:skinChange", createSparklinesDepartment5C); </script> <style scoped> .chart-wrapper { width: 200px; height: 100%; margin: 0 auto 30px auto; padding: 0 0 30px 0; font-weight: bold; text-transform: uppercase; } .climate, .temperature, .conditioner { margin: 0 30px; padding: 30px 0 0 0; } h1 { margin-bottom: 20px; font-size: 1.2em; } .history { border-collapse: collapse; width: 480px; height: 248px; } .history td { padding: 0; } .history td.item { text-align: right; line-height: normal; vertical-align: bottom; } .history td.spark { text-align: left; line-height: 50px; padding: 0 5px; } .history td.value { font-size: 2em; font-weight: normal; line-height: normal; vertical-align: bottom; } .history td.value span { font-size: .5em; vertical-align: top; } .stats { text-align: center; } #temp-range { width: 400px; line-height: 50px; } .style6 { width: 59px; font-family: Calibri; } .style7 { width: 100px; font-family: Calibri; } </style></body></html>