This question is locked. New answers and comments are not allowed.
Windows Store Telerik Rad Components for HTML/WinJs v. 2013.2.611
(upgrading to newest Telerik controls is not an option at this point)
Attached is code and 2 images.
(1) Seems pretty simple but I'm having trouble. I need vertical category axis major grid lines - same color and dash pattern as the horizontal value axis major grid lines which are already showing up.
I see many images in your help sections that have these lines but I can't find the code that makes them display (and/or I have some other settings which are interfering).
(2) You'll also see in the images that the left side of the chart (value axis line) is purple.
I want that line black just like the category axis line is black - but I still want the series bars to remain purple.
(3) Now the business also asked for the following:
Series/purple bars "should be wider (about 120px) with the gap between bars about half the bar width".
Now I'm thinking this is a bad idea anyway since customers could be on different resolution devices (this chart won't be on the snapped view, but still...)
I need to ask you anyway - can anything be done? And what would you suggest?
i.e. do we have some control over the width of each bar and how much space is between the bars?
Can we adjust by percentage instead of the direct 120px pixel width?
telerikstatementbalancesectiongridquestions.jpg is the initial chart with questions I drew onto it.
There is a checkbox on the page where if clicked, shows a stacked bar chart using the same data set.
What we do to fix the initial chart must also be applied to the stacked bar chart - just fyi in case there are different solutions required.
The stacked bar chart is shown in image TelerikStatementBalanceSectionStackedChartQuestions.jpg
HTML
JS - Initial bar chart
JS - Stacked bar chart
CSS
Thanks,
Randy
(upgrading to newest Telerik controls is not an option at this point)
(1) Seems pretty simple but I'm having trouble. I need vertical category axis major grid lines - same color and dash pattern as the horizontal value axis major grid lines which are already showing up.
I see many images in your help sections that have these lines but I can't find the code that makes them display (and/or I have some other settings which are interfering).
(2) You'll also see in the images that the left side of the chart (value axis line) is purple.
I want that line black just like the category axis line is black - but I still want the series bars to remain purple.
(3) Now the business also asked for the following:
Series/purple bars "should be wider (about 120px) with the gap between bars about half the bar width".
Now I'm thinking this is a bad idea anyway since customers could be on different resolution devices (this chart won't be on the snapped view, but still...)
I need to ask you anyway - can anything be done? And what would you suggest?
i.e. do we have some control over the width of each bar and how much space is between the bars?
Can we adjust by percentage instead of the direct 120px pixel width?
telerikstatementbalancesectiongridquestions.jpg is the initial chart with questions I drew onto it.
There is a checkbox on the page where if clicked, shows a stacked bar chart using the same data set.
What we do to fix the initial chart must also be applied to the stacked bar chart - just fyi in case there are different solutions required.
The stacked bar chart is shown in image TelerikStatementBalanceSectionStackedChartQuestions.jpg
HTML
<body> <div class="ccStatement fragment"> <section id="peek"></section> <div id="ccSHSectionHeader"></div> <section aria-label="Main content" role="main" id="main"> <div id="ccStatementHistory"> <div id="chartSectionCcStatementHistory"></div> <div id="divCcSectionShowPastBal"> <div class="chkbox"> <input name="checkboxCcSectionChartType" value="1" type="checkbox"> Show past <br><span class="balance">balances</span> </div> </div> <div id="divCcSectionBalance"> Average Statement Balance: <span data-win-bind="innerText: cardStatementHistoryDetails.aveBalance"></span> </div> </div> </section> </div></body>JS - Initial bar chart
var telerikChartExampleRawData = "[{\"newSpending\":0,\"outstandingBalance\":0,\"totalBalance\":0,\"statementDate\":\"2013-03-01T08:00:00.000Z\",\"includeInAverageBalance\":false,\"month\":\"March\"},{\"newSpending\":0,\"outstandingBalance\":0,\"totalBalance\":0,\"statementDate\":\"2013-04-01T07:00:00.000Z\",\"includeInAverageBalance\":false,\"month\":\"April\"},{\"newSpending\":0,\"outstandingBalance\":0,\"totalBalance\":0,\"statementDate\":\"2013-05-01T07:00:00.000Z\",\"includeInAverageBalance\":false,\"month\":\"May\"},{\"newSpending\":395,\"outstandingBalance\":0,\"totalBalance\":395,\"statementDate\":\"2013-06-28T07:00:00.000Z\",\"includeInAverageBalance\":true,\"month\":\"June\"},{\"newSpending\":1.5,\"outstandingBalance\":395,\"totalBalance\":396.5,\"statementDate\":\"2013-07-05T07:00:00.000Z\",\"includeInAverageBalance\":true,\"month\":\"July\"},{\"newSpending\":101.13,\"outstandingBalance\":346.5,\"totalBalance\":447.63,\"statementDate\":\"2013-08-06T07:00:00.000Z\",\"includeInAverageBalance\":true,\"month\":\"August\"}]";var telerikChartExampleData = JSON.parse(telerikChartExampleRawData);// Build The RadChart Basic 6 Month History Chartvar chartSectionCcStatementHistory = new Telerik.UI.RadChart(document.getElementById("chartSectionCcStatementHistory"), { dataSource: telerikChartExampleData, series: [ { type: "column", field: "totalBalance", color: "#9C3987", labels: { visible: true, format: "${0}", font: "12px Verdana", color: "#000000", weight: "normal", template: "#=vw.Formatter.Currency.toCurrency(value)#" } } ], categoryAxis: { field: "month", color: "#000000", labels: { font: "12px Verdana", color: "#000000" }, majorTicks: { visable: true }, minorTicks: { size: 0, visable: false } }, valueAxis: { field: "totalBalance", color: "#9C3987", labels: { font: "12px Verdana", color: "#000000", format: "${0}" }, majorGridLines: { visable: true }, minorGridLines: { color: "#FFFFFF", width: 0, visable: false }, visible: true }, tooltip: { visible: false, labels: { font: "12px Verdana", format: "${0}" } }, plotArea: { border: { width: 0, color: "#000000" } }, legend: { visible: false }, theme: "light", background: "transparent"});JS - Stacked bar chart
// This Is The RadChart Stacked 6 Month New Spending vs. Previous Balance History Chartvar telerikChartExampleRawData = "[{\"newSpending\":0,\"outstandingBalance\":0,\"totalBalance\":0,\"statementDate\":\"2013-03-01T08:00:00.000Z\",\"includeInAverageBalance\":false,\"month\":\"March\"},{\"newSpending\":0,\"outstandingBalance\":0,\"totalBalance\":0,\"statementDate\":\"2013-04-01T07:00:00.000Z\",\"includeInAverageBalance\":false,\"month\":\"April\"},{\"newSpending\":0,\"outstandingBalance\":0,\"totalBalance\":0,\"statementDate\":\"2013-05-01T07:00:00.000Z\",\"includeInAverageBalance\":false,\"month\":\"May\"},{\"newSpending\":395,\"outstandingBalance\":0,\"totalBalance\":395,\"statementDate\":\"2013-06-28T07:00:00.000Z\",\"includeInAverageBalance\":true,\"month\":\"June\"},{\"newSpending\":1.5,\"outstandingBalance\":395,\"totalBalance\":396.5,\"statementDate\":\"2013-07-05T07:00:00.000Z\",\"includeInAverageBalance\":true,\"month\":\"July\"},{\"newSpending\":101.13,\"outstandingBalance\":346.5,\"totalBalance\":447.63,\"statementDate\":\"2013-08-06T07:00:00.000Z\",\"includeInAverageBalance\":true,\"month\":\"August\"}]";var telerikChartExampleData = JSON.parse(telerikChartExampleRawData);var chartSectionCcStatementHistoryStacked = new Telerik.UI.RadChart(document.getElementById("chartSectionCcStatementHistory"), { dataSource: { data: telerikChartExampleData }, series: [ { type: "column", stacked: true, field: "outstandingBalance", color: "#D8B3D5", labels: { visible: false, font: "12px Verdana", color: "#000000", weight: "normal", template: "#=vw.Formatter.Currency.toCurrency(value)#", padding: -30 }, stack: true, }, { type: "column", stacked: true, field: "newSpending", color: "#9C3987", labels: { visible: false, font: "12px Verdana", color: "#000000", weight: "normal", template: "#=vw.Formatter.Currency.toCurrency(value)#" }, stack: true }], categoryAxis: { field: "month", color: "#000000", labels: { font: "12px Verdana", color: "#000000" }, majorTicks: { size: 0, visable: true }, minorTicks: { size: 0, visable: false } }, valueAxis: { field: "totalBalance", color: "#9C3987", labels: { font: "12px Verdana", color: "#000000", format: "${0}" }, majorGridLines: { visable: true }, minorGridLines: { color: "#FFFFFF", width: 0, visable: false }, visible: true }, plotArea: { border: { width: 0, color: "#000000" } }, seriesColors: ["#9C3987", "#D9B2D6"], theme: "light", background: "transparent"});CSS
.ccStatement { display: -ms-grid; -ms-grid-columns:35px 15px 1fr 40px; -ms-grid-rows:140px 20px 1fr 85px; width:100%; height:100%; background-color: #f1f2f2;}.ccStatement #peek { -ms-grid-column:1; -ms-grid-row:1; -ms-grid-row-span:4; background-color: #963c87; }.ccStatement #ccSHSectionHeader { -ms-grid-column:3; -ms-grid-row:1; -ms-grid-column-span:2; } .ccStatement #main{ -ms-grid-column:3; -ms-grid-row:3; display: -ms-grid; -ms-grid-columns: 109px 1fr; -ms-grid-rows:1fr; }.ccStatement #main #ccStatementHistory{ /*border:1px solid grey;*/ height:100%; width:100%; /*background-color: #FFFFFF;*/ -ms-grid-column:2; display: -ms-grid; -ms-grid-columns:1fr 120px; -ms-grid-rows:1fr 85px;}.ccStatement #main #ccStatementHistory #chartSectionCcStatementHistory { height:100%; width:100%; -ms-grid-column:1; -ms-grid-row:1;}.ccStatement #main #ccStatementHistory #divCcSectionShowPastBal { height:100%; width:100%; -ms-grid-column:2; -ms-grid-row:1; }.ccStatement #main #ccStatementHistory #divCcSectionShowPastBal .chkbox{ padding-top:2em;}.chkbox .balance{ padding-left:2.5em;}.ccStatement #main #ccStatementHistory #divCcSectionBalance { height:100%; width:100%; -ms-grid-column:1; -ms-grid-row:2; -ms-grid-column-span:2; font-weight:bold;}/**/.newSpending{ width:100%;margin:.25em 0 .25em 0;}.fltLeft{float:left;}.fltRight{float:right;}.clear{clear:both;}/**/.ccStatement #main #ccStatementHistory #divCcSectionBalance {}/*.creditCardSection section[role=main] { margin-left: 120px; margin-right: 120px;}*/@media screen and (-ms-view-state: snapped) { .creditCardSection section[role=main] { margin-left: 20px; margin-right: 20px; }}@media screen and (-ms-view-state: fullscreen-portrait) { .creditCardSection section[role=main] { margin-left: 100px; margin-right: 100px; }}Thanks,
Randy
2 Answers, 1 is accepted
0
Accepted
Hello Randy,
To display the vertical grid lines, you should set the categoryAxis.majorGridLines.visible property to true, same as you did for the value axis.
As for the value axis color, it seems that there is a setting that you do not need which makes the line purple:
Remove this color setting and the value axis will use its default color.
As for the gap between bars and bar widths, you can use the gap and spacing properties of the column series to control these proportions. You can find the properties described here (they are identical for Bar and Column series):
Bar Series
Scroll down to the Controlling the Distance Between Categories and Controlling the Distance Between Bars
sections to see description and examples. Note that the width of the bars themselves cannot be set directly but is a result of the gap and spacing property settings and depends on the total chart width. This means that if a user has a smaller screen and the chart adjusts to it, the series width will also adjust.
Give these suggestions a try and let us know if there are still any issues remaining.
Regards,
Tsvetina
Telerik
To display the vertical grid lines, you should set the categoryAxis.majorGridLines.visible property to true, same as you did for the value axis.
categoryAxis: { field: "month", color: "#000000", labels: { font: "12px Verdana", color: "#000000" }, majorTicks: { visible: true }, minorTicks: { size: 0, visible: false }, majorGridLines: { visible: true }}As for the value axis color, it seems that there is a setting that you do not need which makes the line purple:
valueAxis: { field: "totalBalance", color: "#9C3987", labels: { font: "12px Verdana", color: "#000000", format: "${0}" }, majorGridLines: { visible: true }, minorGridLines: { color: "#FFFFFF", width: 0, visible: false }, visible: true}Remove this color setting and the value axis will use its default color.
As for the gap between bars and bar widths, you can use the gap and spacing properties of the column series to control these proportions. You can find the properties described here (they are identical for Bar and Column series):
Bar Series
Scroll down to the Controlling the Distance Between Categories and Controlling the Distance Between Bars
sections to see description and examples. Note that the width of the bars themselves cannot be set directly but is a result of the gap and spacing property settings and depends on the total chart width. This means that if a user has a smaller screen and the chart adjusts to it, the series width will also adjust.
Give these suggestions a try and let us know if there are still any issues remaining.
Regards,
Tsvetina
Telerik
Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.
0
Randy
Top achievements
Rank 1
Rank 1
answered on 10 Sep 2013, 10:59 PM
Thank you so much Tsvetina!
At first the vertical gridlines would not turn on but your examples really made me focus on the word "visible",
I noticed so many mis-spellings of visible as visable, and that's why a bunch of stuff I tried yesterday weren't working.
Ahhhhhrrrrrgggg!
Thanks for the Gap and Spacing info - that really helps.
I'll dial something in there using those.
Randy
At first the vertical gridlines would not turn on but your examples really made me focus on the word "visible",
I noticed so many mis-spellings of visible as visable, and that's why a bunch of stuff I tried yesterday weren't working.
Ahhhhhrrrrrgggg!
Thanks for the Gap and Spacing info - that really helps.
I'll dial something in there using those.
Randy