How to format labels (or display all tooltips)?

Originally Posted 20 September 2013, 3:42 am EST

  • Originally Posted 20 September 2013, 3:42 am EST

    Hi,

    We used C1StudioAspWijmo_2013v2. We noticed that we are able to show "hover Tooltips" with some formatted texts. In this case, the tooltip is displayed when while we are hovering chart/data series. We are also able to show value labels by setting "ShowChartLabels" to true. In this case, all labels are shown but they only displayed the value.

    Now, we have a requirement to show labels with the same formatted text as tooltips. In other words, it is similar to display all tooltips automatically without hovering chart. Is it possible to do that using C1StudioAspWijmo_2013v2? If yes, how do we do that?

    Please kindly see the picture attachment that we need to achieve. Any help is highly appreciated.

    Thank you.

  • Reply

    Hi Manpreet Kaur,

    First, we would like to thank you for your reply.

    Second, we need to create code either on server side or both (server and client). Let's take another case: In order to display hovering tooltip we are able to call javascript function code on client-side from the server through ChartHint.Content.Function. Unfortunately, we find no way to do this similar mechanism to display labels. We have C1Chart.BubbleChartLabel, but we do not have C1Chart.LineChartLabel, C1Chart.BarChartLabel, etc.

    Furthermore, if we have more than one series, let's say three series, we do not have to display labels for all series. We read a parameter (on server side) to check which labels series that should be displayed. In picture that we attached before, we only displayed labels for Total Net Sales series.

    Any help is really appreciated.

    Thank you.
  • Reply

    Hello,

    I apologize for the delayed response. Currently there is no direct way to format the chart labels, by default they are expected to display the value labels only.

    However, you can get the collections of these labels on the client side via jquery and modify the same as required. Please refer to the attached sample that implements the same.

    Hope it helps.

    Thanks,
    Manpreet Kaur
    2013/09/ChartToolTip.zip
  • Reply

    Hello,

    There is no way to customize these labels from the server side. You would need to usethe clieny side customization to change the default labels. You can set the custom labels even for the specific series from the client side code by using the getlinepath method. Please refer to the attached sample that implements the same.

    Hope it helps.

    Thanks,
    Manpreet Kaur
    2013/10/ChartToolTip_Mod.zip
  • Reply

    Hi Manpreet Kaur,

    Thanks, it works in our bubble chart now.

    By the way, how to implement the same thing in bar chart and pie chart? Because we got an error when implementing it. In this case, we also have a similar chart which consists of 2 series: East and West. And we have to display all labels either for West or East but not both as well.

    The code below is not working:
    var series = $("#C1BarChart1″).c1barchart().data().fields.seriesEles;

    Thank you.
  • Reply

    Hi,

    Thanks a lot for the attachment. By the way, we face 2 issues:

    First, based on the previous attachment that we sent to you, we have to display both the series labels name and its values. Unfortunately, labels seem to be cut off (please kindly see our new attachment). We put series labels name, for example: "Series: Total Net Sales" on first row and series labels value, for example: "Value: 26,445" on second row with some numbering format (decimal). Furthermore, we may notice that we put both of them in a rectangle/box. How do we do this?

    (Notes: We need to show labels similar to hints/tooltips. In other words, we can say that we show all hints/tooltips without hovering on series. Please kindly find our new attachment that shows you the difference between the labels and tooltip.)

    Second, is this mechanism also applied to another chart such as bar, pie, bubble, etc? We got an error when we called "getlinepath" method.

    Thank you.

  • Reply

    Hello,

    I apologize for the delayed response. As a mentioned earlier there is no direct way to customize the chart labels. You would need to manipulate the workaround suggested above to render the custom labels correctly. You can use the Transform method to change the direction of the labels. Please refer to the attached sample that implements the same.

    Further, I have posted an enhancement request to provide a direct way to customize the chart labels. It might be implemented in the future releases if the development team finds it to be feasible.

    I would suggest you to use the following code to access the labels for the other chart types as depicted in the attached sample:

    $(".wijbubblechart-label").each(function () {
    var a = "Series: Test Series Value: " + $(this)[0].textContent;
    $(this)[0].textContent = a;
    });


    Hope it helps.

    Thanks,
    Manpreet Kaur
    2013/10/ChartToolTip_New.zip
  • Reply

    Hi,

    Thank you very much for your explanation. We understand. Furthermore we are also able to implement it on bar chart using your application.

    By the way, on the attachment we sent you a picture of Bubble Chart. It consists of 2 series: East and West. Since its implementation is different to line chart, what code should we write to display all labels either for West or East but not both? We have tried several codes to display all labels for one series only (either West or East) but none of them work yet.

    Thank you.

  • Reply

    Hello,

    You can use the following code to change the labels of a specific bubble series. Please refeer to the attached sample that implements the same.

    // Code to change Bubble series label.
    var series = $("#C1BubbleChart1").c1bubblechart().data().fields.seriesEles;
    //This code gets the labels of the first bubble series.
    //Change the index of the series element(i.e. an array) to 1 if you want to change the label of the second series.
    $.each(series[0], function (i, elem) {
    var val = elem.dcl.attrs.text;
    elem.dcl.attr('text', "Series: Test Series Value: "+val.toString());
    });


    Hope it helps.

    Thanks,
    Manpreet Kaur
    2013/10/ChartToolTip_Buble.zip
  • Reply

    Hi Sankalp,

    Thanks a lot for your explanations.

    We have done further explorations and are able to implement labels in several chart types. Meanwhile, is it working for composite chart that consists of several chart types such as 2 line charts and 2 bar charts in a composite chart?

    We use script, e.g.:
    var firstSeries = $("#C1CompositeChart1″).c1compositechart().data().fields.seriesEles;

    But we failed to implement it in composite chart.

    Thank you.

  • Marked as Answer

    Reply

    onlyDLucky,

    If you are working with C1CompositeChart and want to modify the labels for a bar chart series type then you may use the following code:

            $(document).ready(function () {
    var barSeries = $("#C1CompositeChart1").c1compositechart().data().fields.allElements.chartLabels;
    $.each(barSeries, function (e, args) {
    var val = args.attrs.text;
    args.attr('text', "Series: Test Series Value: " + val.toString());
    });
    });


    Please try this and let me know if this helps. Also in order to avoid any confusion, I would request you to please create a new forum thread if you have additional questions.

    Regards,
    Sankalp
  • Reply

    Hello,

    Unfortunately I could not replicate this issue. The following code works fine in case of a Bar chart with two series:

                var barSeries = $("#C1BarChart1").c1barchart().data().fields.seriesEles;
    $.each(barSeries[0], function (e, args) {
    var val = args.dcl.attrs.text;
    args.dcl.attr('text', "Series: Test Series Value: " + val.toString());
    });


    Attached is a small sample application demonstrating this implementation. Please take a look and let me know your observations.

    Regards,
    Sankalp
    2013/11/BarChart.zip
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels