[Solved] Tooltip & Markers for Scatterchart

[Achilles]

Hi,

I have two charts, one being a regular line chart and one being a scatter line chart. The codes which were working for the regular chart does not seem to be working for the scatter like chart

.Tooltip(tooltip => tooltip.Format("{0:#.##} kWh").Visible(true).Background("#dddddd"))
&
series.ScatterLine(model => model.EToday).Markers(markers => markers.Type(ChartMarkerShape.Circle))

The tooltip is always coming as two long floating point data {x-axis value, y-axis value} whatever format I apply. Am I supposed to implement these functionality in some other way ?

Thanks and Regards

Raja

[Hristo Germanov]

Hi Achilles,

Thank you for reporting this issue.

1) The bug with the scatter/scatterLine tooltip format is fixed and it will be include with next official release of Telerik Components for ASP.NET MVC.
2) I can't find where is the problem with the marker type. ChartMarkerShape.Circle work correctly.

I have attached a modified telerik.chart.min.js file.

I have update you telerik points.

Kind regards,
Hristo Germanov
the Telerik team

[Achilles]

Hi,

Thanks a lot for the help. The tooltip solution works. I still have a few more issues. I have created a simplified model below

View :

@model IEnumerable<PowerData>
@(

    Html.Telerik().Chart()
    .Name("chart")
                .ChartArea(area => area
                .Background("#ffffff")
                .Border(1, "#848484", ChartDashType.Solid)
            )
            .Title(title => title
                .Text("Power generated")
                .Position(ChartTitlePosition.Top)
            )
            .Legend(legend => legend
                .Position(ChartLegendPosition.Bottom)
                .Visible(true)
            )
            .PlotArea(area => area
                    .Background("#ffffff")
                .Border(1, "black", ChartDashType.Solid)
                .Margin(20)
            )
        .Series(series =>
        {
            series.ScatterLine(p => p.NumericTime, p => p.EToday)
                .Name("From Database")
                .Color("#00628F")
                .Markers(markers => markers.Type(ChartMarkerShape.Circle).Size(10).Visible(true));
        })

    .SeriesDefaults(series => series.ScatterLine().Width(2).Markers(false))
                    .XAxis(x => x.Labels(label => label.Font("12px arial").Format("{0:##.00} hr")).Max(20).Min(7).MajorUnit(2))
                    .YAxis(y => y.Labels(label => label.Font("12px arial")
                        .Format("{0:#.#} kW"))
                        .MinorTickType(ChartAxisTickType.Outside)
                        .MajorUnit(0.5)
                        .Min(0)
                        .Max(5))
    .Tooltip(tooltip => tooltip.Format("{0:#.##} kWh").Visible(true).Background("#dddddd"))
    .AxisDefaults(a => a
        .MajorGridLines(mg => mg.Visible(true))

        )
)

Model :

public class PowerData
{
        public Double EToday { get; set; }

        public Double NumericTime { get; set; }

}

initialized to  (say) { {1.0, 7.5} , {2.1, 8.5} , {1.5, 9.5}}

The problems I have are
1. The grid towards the right side for the plot area (for this X value range) is missing
2. How do I format my X axis labels to read "7:00 hrs" instead of "7.00"
3. Is it possible to display the Y axis with 1 decimal place such that it read like 1.5, 2.0, 2.5, 3.0 ....
4. The first Y value reads just "kW" . Is it possible to not show it or to show "0.0 kW" ?
5. The markers doesn't work still, but what I also notice is that if I change my chart type from scatterline to scatter, the markers are rendered visible without any other change.

Thanks and Regards,

achilles

[Petur Subev]

Hello Achilles,

Straight to your questions:

1. To set the Chart to properly visualize the major unit lines, you need to set the min and max values so their difference is divisible by the value of the MajorUnit  ( (max-min) / MajorUnit = 0 ). In your case just set the min value to six .Min(6). This issue will be fixed in the next release.
2. Using the View from your snippet the labels are displayed properly.
3. You can use .Format("{0:0.0} kW")) for the YAxis
4. Using the formatting from 3) will make the displayed value to 0.0
5. Your default series configuration prevents the markers to be displayed.
   .SeriesDefaults(series => series.ScatterLine().Width(2).Markers(false))

For your convenience I attached sample implementing the scenario you described. I hope this helps.

Greetings,
Pesho
the Telerik team

[Achilles]

Hi,
Are Template supported for scattercharts ? I read in the MVC manual that field valuse for tooltip templates are value, category, series, dataItem. If a point on the scatterchart is (x,y) = { 12.35, 8.1321 } , how can I make my tooltip read "12:35 hr, 8.13 kW" ?
Please note, in the first field, I prefer  to replace the decimal ( . )  as  ( : ) to represent time format. In case the exact format is not supported, please suggest an alternative to get as close as possible

Thanks

Achilles

[Petur Subev]

Hi Achilles,

 
Generally speaking to achieve such display format, you need to use custom template which calls a JavaScript function to format the tooltip. Please check the snippet below:

//...    
    .Tooltip(tooltip => tooltip.Visible(true).Background("#FFF").Template("<#= formatXAxis(value.x) #> hr , <#= value.y #> kW"))

)

<script type="text/javascript">

    function formatXAxis(value) {

        return $.telerik.formatString('{0:##.##}', value).replace('.', ':');

    }

</script>

I hope this helps.


Best wishes,
Petur Subev
the Telerik team