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

Change line style from solid to dashed

10 Answers 597 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Jay asked on 07 Dec 2018, 03:31 PM
Is it possible to have a line change from solid to dashed at some point, similar to the attached image? We'd like to do this to indicate the values transition from known to estimated values.

10 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 11 Dec 2018, 09:39 AM
Hello Jay,

Using two dash types in a single line series is not possible because the line is drawn as a single SVG path, which can use only one dash type. A possible solution is to use two series with two data fields—one for actual value and one for expected value. The field values for actual value will be null after the current category and the field values for the expected field will be null up until the current category. Here is a simple example to demonstrate the idea:
https://dojo.telerik.com/oXiFaqep

I also set the series color explicitly, so both series use the same color looking like a single series.

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 11 Dec 2018, 01:19 PM
I sort of thought that might be the case, but thought I'd ask just in case. I was planning on trying the two series approach, so thanks for the example,
0
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 03 Jan 2019, 05:57 PM

This worked well for line charts, but now I've got to do the same thing for bar charts, hopefully producing something like the attached barSolidToHatch.PNG.

Using the SVG color pattern approach found here, I've come close but because I have to use two series, there's a larger than desirable gap between the bars because of the null values in the projected series. Additionally, since I'm switching between displays that have projected values and ones that don't, the bar width is also halved. I've attached close.PNG as an example, where it has the actual and projected values for the purple displayed.

Is there a way to do this without requiring two series?

0
Tsvetina
Telerik team
answered on 04 Jan 2019, 01:41 PM
Hi Jay,

I am not sure I understand the problem with the gaps, more specifically—how is it related with the pattern used in the series? It looks like there are missing values for some categories, but this would result in the same gaps even without the custom patterns.

Also, with the patterns shown in your screenshot, the dynamic width of the series should not be a problem because the pattern width is quite small. Or  do you have some other problem than the pattern appearance when the series width changes?

Could you create a Dojo (or static HTML page) example with some dummy data to demonstrate the unresolved problems in your Chart and show or explain how you want it to be different? 

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 08 Jan 2019, 02:24 PM

Ok, here's a dojo: https://dojo.telerik.com/UlodOvUd/2

It'll start with a chart that has projected values. If you click Toggle, it switches to a chart with no projected values. You can see that the columns are roughly twice as wide and have a smaller gap between them. Ideally, the chart with the projected values could mimic that look. With the line chart, it was possible to provide a seamless transition, and I was hoping for the same here.

0
Tsvetina
Telerik team
answered on 10 Jan 2019, 11:08 AM
Hello Jay,

Thank you for the example, I now see what you mean. The series in the second Chart are only two, as compared to four in the first. When they auto-size, they become much bigger. It is possible to control the series width by setting an appropriate combination of the series.gap and series.spacing properties. There cannot be exact match with the initial Chart because the distances between the visible bars vary based on which series have no value for a given category.

You can see the closest result that I got in this updated Dojo:
https://dojo.telerik.com/UlodOvUd/3

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 14 Jan 2019, 05:14 PM

Hi Tsvetina.

Thanks for the effort. I decided if I really wanted to mimic the look, I could just as well through the projected series with all nulls, and that should give me the same look and spacing I want. So I tried that: https://dojo.telerik.com/URIRuwuw

The width and spacing are still slightly off but as far as I can tell, the charts should be identical. Is there something else I'm missing?

0
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 14 Jan 2019, 05:15 PM

Hi Tsvetina.

Thanks for the effort. I decided if I really wanted to mimic the look, I could just as well through the projected series with all nulls, and that should give me the same look and spacing I want. So I tried that: https://dojo.telerik.com/URIRuwuw

The width and spacing are still slightly off but as far as I can tell, the charts should be identical. Is there something else I'm missing?

0
Tsvetina
Telerik team
answered on 16 Jan 2019, 09:53 AM
Hello Jay,

The difference seems to occur because the Chart that was hidden cannot adjust its size after being shown. To address this, call the resize() method of the Chart that you are showing:
function toggle() {
  if ($("#chart2").is(":hidden")) {
    $("#chart1").hide();
    $("#chart2").show();
    $("#chart2").data("kendoChart").resize();
  } else {
    $("#chart2").hide();
    $("#chart1").show();
    $("#chart1").data("kendoChart").resize();
  }
}

Here is the updated example (with two modified examples, so you can see that the Charts are actually being toggled):
https://dojo.telerik.com/URIRuwuw/2

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 23 Jan 2019, 12:14 PM
Hi Tsvetina. Nice work! Thanks, that's probably as good as I'm going to get. Thanks again!
Tags
Charts
Asked by
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Tsvetina
Telerik team
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or