BarChart in Client Side

BarChart in Client Side

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

• 

  jimmcgoldrick

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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”>
  
  
  
  
  
  <wijmo:ChartStyle StrokeWidth=“1.5” Opacity=“1”>
  
  </wijmo:ChartStyle>
  
  

  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.
• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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,
                              [b]showChartLabels: false,[/b]
                              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

• 

  jimmcgoldrick

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  jimmcgoldrick

  • Post Options:
  • Link
    Copy

  Posted 7 April 2020, 7:09 pm EST

  All well for this one. Thanks Folks.