Legend inside chart with tooltip formating

1495

Eric Linder posted over 9 years ago

Hi,

We face following problems how to fix that like showing in sample snapshot?

How to place legend inside the chart, currently it is in the left side above the chart?
How to left align yaxis label values, currently all values are right aligned?
Two decimals tooltip values format with comma's like (5,000.00 and 20,000.00) with datetime format?
How to set HorizontalCrosshairVisibility = false ?
Small sample application is really very helpful for us.

16310

Offline Hristo Anastasov posted over 9 years ago in reply to Eric Linder

Hi Elinder,

I am sorry to hear you did not manage yet to run my sample - it is a simple html page and resources are loaded from cdn's, which means everything should be fine on another machine. Did you try to open it after extracting and trying with different browsers ? Anyway, the suggested should work for you but since you are not able to see my sample I suggest that you send me yours, where I can apply those and demonstrate. If this is possible, then please send me your project or sample. Otherwise please let me know so we can think how to proceed further.
Cancel
Reply

Cancel
1495

Offline Eric Linder posted over 9 years ago in reply to Hristo Anastasov

Hi Hristo,

Yes its working now after commented the infragistics.excel.js reference.

But in our real application we didn't use any infragistics.excel.js reference than why we face message Failed to Open in debugger window? Further details please see my previous post.

Can you fix my other points that i was highlighted in my previous post ?

Thanks
Cancel
Reply

Cancel
16310

Offline Hristo Anastasov posted over 9 years ago in reply to Eric Linder

Hi Elinder,

I am quite surprised this did not work since my sample uses the CDN references. Please try to extract the file and not open it directly from the archived file. There is an not necessary reference to infragistics.excel.js, it results in the "object does not support "getBox" method", so you can remove this reference. Please try to open the sample with another browser, too. I believe that once it ran you will see how to use these properties.

Please let me know if you still fail to run the samle so wen think of how to proceed with this. Looking forward to hearing from you.
Cancel
Reply

Cancel
1495

Offline Eric Linder posted over 9 years ago in reply to Hristo Anastasov
Hi Hristo,

Thank you so much for quick response, Our mostly problems are solved only few minor issues,

Your provided solution is not working, its throw attached errors.

When we open your sample application its throw error Failed to open and same error occured in our real application, due to this error our application takes alot of time for loading. How to fix that issue?

1st is not working when we set this style="left: 90px; top: 60px; position: absolute;"/>, our legend behind the chart and its not visible, We need a property like legendInsideChart. We use bootstrap for styling, when we set positions its not working in small resolution like mobile or tablets.

2nd working

Third Yes we need a numeric value like 2,000.00 with a comma as a separator, We need a datetime format like 07-27-2015 (MM-DD-YYYY) in our data collection date format is as 2015-01-18T00:00:00. you can see in my previous attached snapshot.

Fourth working
- Error.png
- View
- Hide
Cancel
Reply

Cancel
16310

Offline Hristo Anastasov posted over 9 years ago

Hi Elinder.

Please find anwers to your questions below:

1.How to place legend inside the chart, currently it is in the left side above the chart?

You can use css to place the element wherever you like, for example:


           style="left: 90px; top: 60px; position: absolute;"/>

2.How to left align yaxis label values, currently all values are right aligned?

There is the labelHorizontalAlignment property for axes to achieve that:

                    {
                        name: "PopulationAxis",
                        type: "numericY",
                        labelHorizontalAlignment: "left",
                    }

3.Two decimals tooltip values format with comma's like (5,000.00 and 20,000.00) with datetime format?

I didn't understand your query here, could you please clarify ? Do you want to display a numeric value like 2.000 with a comma as a separator ? What about the datetime format ?

4.How to set HorizontalCrosshairVisibility = false ?

You can use the horizontalLineVisibility property of a series object. It takes values "visible" or "collapsed" and collapsed hides the relevant line:

     {
      type: "crosshairLayer",
      name: "crosshairLayer",
      targetSeries: "1995Population",
      horizontalLineVisibility: "collapsed"
     }

5.Small sample application is really very helpful for us.

You can find a sample demonstrating how to use the above mentioned properties. I hope it helps.

chartExample.zip
Cancel
Reply

Cancel