[CLOSED] Questions about CartesianChart objects

[MrProtonYo]

Hello,

I'm trying to make a CartesianChart object, specifically a column chart, and I am running into some issues. I am trying to create a function that will take a new CartesianChart object by reference and will modify it (adjust the axes, change the theme, add the data, and so on). Because of that, for any answers to my questions to be useful they have to be things I can do outside of the aspx file. I'm writing this function in F#, but any answers in C# are fine.

Here is an example of a chart I am making:



And here are my questions:
1. Adjusting which categories get shown. As you can see in the example picture, not all of the categories on the x-axis are being shown so that they don't overlap. I would like to make it so that all the categories show even if they overlap. I noticed in the documentation that CategoryAxis should have a boolean for whether or not the number of categories should be calculated ( http://docs.ext.net/index.html#topic...00000148C.html ), but when I am actually working with the objects they don't seem to have this property.



So how do I adjust this property in C# or F#?

2. Determining what happens when the mouse is hovering over a bar. In the example code the bar series is given a Tooltip so that when the mouse hovers over the bar a text box appears:

<Tooltip runat="server" TrackMouse="true" StyleSpec="background: #fff">
    <Renderer Handler="this.setHtml(storeItem.get('Name') + ': ' + storeItem.get('Data1') + '%');" />
</Tooltip>

How do I do this outside of the .aspx file and instead in the C# or F# code? I figured it involves creating a Renderer object, with the appropriate handler, but it looks like the Tooltip of a Series object can't have it's renderer get or set. Also, is there a way to have it so that when the data is clicked on it is a link to a different page?

3. Background color. How do I change the background color of just the graph? Setting the Chart.Background color changes the color of the entire chart (including, for instance, the color behind the axis labels). I'm interested in changing the background color only in the space where the gridlines appear. Here is a picture showing what I would like; notice that the beige only appears behind the graph area, and isn't showing up behind the axis labels:



4. Bar color. I see that you can change the colors of the bars in a stacked chart by adjusting the theme, but is there a simple way to say this particular field should be rendered with this color? Specifically, can I link fields in the data to color strings?

Thanks!

[MrProtonYo]

Here is one more question.

5. Legend title. Is there a way to put a title on the legend? It doesn't look like ChartLegend has a title property. For example, this chart has the text "LEGEND TITLE" above the legend, which I would like to do in Ext.Net

[Daniil]

Hi @MrProtonYo,

Welcome to the Ext.NET forums!

1. Adjusting which categories get shown. As you can see in the example picture, not all of the categories on the x-axis are being shown so that they don't overlap. I would like to make it so that all the categories show even if they overlap. I noticed in the documentation that CategoryAxis should have a boolean for whether or not the number of categories should be calculated ( http://docs.ext.net/index.html#topic...00000148C.html ), but when I am actually working with the objects they don't seem to have this property.

Unfortunately, bad news on this. I have found this bug report to Sencha.
https://www.sencha.com/forum/showthread.php?263678

The calculateCategoryCount property was in ExtJS 4, but it didn't work even there. As for ExtJS 5, they just removed it not to confuse anybody with its existence. As for our docs, this property appeared there by mistake.

I have investigated the rendering process of labels and don't quite see anyway to inject the functionality that you need without reworking all the process (that, unfortunately, is not going to happen).

As for the questions #2-5, please start a new forum thread for each. We found the "one issue per thread" rule is the only way to keep things clear for everybody and organized. Thank you for understanding.

[MrProtonYo]

Thanks for the response.

I have taken two of the questions and made them into new threads (the remaining two I was able to figure out on my own through a lot of trial and error).

[fabricio.murta]

Hello @MrProtonYo,

As you could figure out the two questions you didn't post as other topics I believe there's nothing else to respond here, right? So if you don't have a problem with it, we may mark this thread as closed now.

Additionally, as you found the answer for two of your questions, it would be great if you could share with us the outcome, so other people searching the forums for the same reason could benefit from it. Thanks in advance!

[MrProtonYo]

Sure, you can close the thread.

Here are the responses to the other two:

2. Determining what happens when the mouse is hovering over a bar - To do this you create a new ChartTip object and assign it to the Tooltip of the series you want to have something hover over. The key is that the Tooltip should have it's Renderer Handler adjusted. I was trying to make a separate renderer object but that didn't work. Below is my F# code, but it should be very easy to convert this to C# for the more common language.

let tooltip = new ChartTip()
        tooltip.TrackMouse <- true
        tooltip.StyleSpec <- "background: #fff"
        tooltip.Renderer.Handler <- "this.setHtml(storeItem.get(item.series.getXField()) + ' - ' + item.field + ': ' + storeItem.get(item.field));"
        series.Tooltip <- tooltip

4. Bar color - I couldn't find an obvious way to do this, but if you have a color for each column title in your DataTable, you can just make those colors into an array and assign them to a theme's colors. Here we assume the colors are in the same order as the series YField values.

        let theme = new ChartTheme()
        theme.ThemeName <- "newTheme"
        theme.Colors <- colors
        chart.Bin.Add(theme)
        chart.Theme <- "newTheme"

[fabricio.murta]

Wow, interesting. I expected F# syntax to be something closer to Fortran 77 or Fortran 90, but it seems a lot different. Attribution sign in Fortran is '=', not that '<-' you used. I used to work on Fortran 77, Fortran 90 and read a little about Fortran 2008 standard, and couldn't see that kind of changes coming. Maybe it was my mistake to think F# should look like Fortran in .NET. =)

Thanks for sharing the outcome. Additionally for #4, the theme is as you said, an array of colors, one for each column. If you set the theme with three colors, it will cycle thru the three colors. Likewise, if you want a single color, all you have to do is make an array of colors with a single element/color, then it should use that single color nevertheless.