BarChart in Client Side

Posted by: jimmcgoldrick on 3 April 2020, 7:39 pm EST

  • Posted 3 April 2020, 7:39 pm EST

    I am working in ASP.NET Web Forms developing a BarChart in the Client Side using Wijmo, JavaScript, Json and POST, exactly as the example you show at:
    https://www.grapecity.com/componentone/docs/webforms/online-barchart/drillingdowninbarchartdata1.html
    I am trying to suppress the Chart Labels (using JavaScript/JQuery) which display`s the Y value at the top of each Bar, a feature that, for my client`s purposes is irrelevant and confusing. I am trying to set the ShowChartLabels value to false, and have tried several ways to do it. My code at the moment is:
    $("#bcKitCount").c1barchart({
    showchartlabels:false,
    header: { text: "Tools in Kits `" + args.x + "`" },
    hint: { content: function () { return this.x + '\n ' + this.y + ' Tools'; } },
    horizontal: false,
    dataSource: arr,
    seriesList: [{
    label: "Tool Members",
    legendEntry: false,
    data: { x: { bind: "KitName" }, y: { bind: "ToolQty" } }
    }],
    seriesStyles: [{ fill: "270-#Ef49d0-#1f2680", stroke: "#Ef4860", opacity: 0.8 }]
    });
    bcKitCount is my BarChart, which has markup:
    <wijmo:C1BarChart ID="bcKitCount" runat="server" Horizontal="false" Width="100%" Height="95%" ShowChartLabels="false">
    <TextStyle Fill-Color="#b2b2b2" FontWeight="bold" FontSize="15"></TextStyle>
    <SeriesHoverStyles>
    <wijmo:ChartStyle StrokeWidth="1.5" Opacity="1">
    </wijmo:ChartStyle>
    </SeriesHoverStyles>

    <Axis>
    <X>
    <Labels>
    <Style Fill-Color="#7f7f7f" Rotation="270" FontSize="11"></Style>
    </Labels>
    </X>
    <Y Compass="West" Text="Kits">
    <GridMajor>
    <Style Stroke="#353539" StrokeDashArray="-"></Style>
    </GridMajor>
    <Labels>
    <Style Fill-Color="#242529" FontSize="11"></Style>
    </Labels>
    </Y>
    </Axis>
    </wijmo:C1BarChart>
    Nothing seems to work to suppress the Chart Label when the Chart is re-created with new Data. The ShowChartLabels="false"
    Property in the markup does work, but obviously has no effect once the chart is cleared and redrawn. Could you please point to the place where I can find the right JavaScript/JQuery to switch this setting off in code. PS. I am using NET Framework 4.6.1.
  • Replied 5 April 2020, 11:57 pm EST

    Hi ,
    We are working on this issue. We will update you as we have an update on this.

    Regards,
    Manish Gupta
  • Replied 6 April 2020, 6:17 pm EST

    Hi,
    We are sorry for the delayed response on this. For hiding the data labels in the JavaScript, we need to set the showChartLabels property to false. Please refer to the following code snippet for reference:
    $("#C1BarChart1").c1barchart("destroy");
    $("#C1BarChart1").c1barchart({
    shadow: false,
    showChartLabels: false,
    textStyle: { fill: "#b2b2b2", "font-weight": "bold", "font-size": 15 },
    axis: {
    y: {
    labels: { style: { fill: "#242529", "font-size": 11 } },
    gridMajor: { style: { stroke: "#353539", "stroke-dasharray": "- " } }
    },
    x: {
    labels: {
    style: { fill: "#7f7f7f", "font-size": 11 }
    }
    }
    },
    hint: { content: function () { return this.data.label + '\n ' + this.y + ''; } },
    header: { text: "Order Details" },
    horizontal: false,
    dataSource: arr,
    seriesList: [{
    label: "Orders By Days in Month " + month + "," + year,
    legendEntry: true,
    data: { x: { bind: "Day" }, y: { bind: "OrderAmount" } }
    }],
    seriesStyles: [{ fill: "180-#ff9900-#ff6600", stroke: "#ff7800", opacity: 0.8 }],
    seriesHoverStyles: [{ "stroke-width": 1.5, opacity: 1 }]
    });
    $("#C1BarChart1").c1barchart("redraw");

    Also, find the attached sample for reference.
    Regards,
    Manish Gupta

    C1BarChart-DrillDown.zip
  • Replied 6 April 2020, 8:53 pm EST

    That seems to be it - the widget properties are case sensitive, even on the client side. Thanks very much for your trouble. By the way, is there good documentation anywhere for this; the client-side info seems to be very threadbare, especially for Pie Charts and such. I'd appreciate a few pointers if you can suggest.
  • Marked as Answer

    Replied 7 April 2020, 6:44 pm EST

    Hi,
    Yes, the widget properties are case sensitive event on clientside. Please refer to the following documentation for client-side API:
    http://help.grapecity.com/wijmo/3/webframe.html#Wijmo.html

    In the case of server controls, we would replace the wij with c1. For e.g wijbarchart will be accessed using the c1barchart.

    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 7 April 2020, 7:09 pm EST

    All well for this one. Thanks Folks.
Need extra support?

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

Learn More

Forum Channels