Forum Replies Created

Viewing 15 posts - 1 through 15 (of 59 total)
  • in reply to: adding data fields to chart at initialization time #35739

    @pworthing,

    The get and set methods of chart are used to access and/or change the available chart properties present in the library once the chart is rendered. However, methods don’t support reading custom properties passed in the chart-options. You can access them using chart.options as shown in the code-snippet below.

    chart.options.myField1;
    chart.options.myField2;

    Kindly take a look at this updated JSFiddle for an example on reading custom properties using chart.options.


    Adithya Menon
    Team CanvasJS

    in reply to: adding data fields to chart at initialization time #35715

    @pworthing,

    Can you kindly create JSFiddle and share it with us (or a sample project and share it with us over Google-Drive or OneDrive) along with further briefing about the issue you are facing so that we can look into code / chart-options being used, understand the scenario better and help you out?


    Adithya Menon
    Team CanvasJS

    @ishwari-birajdar,

    It is possible to use a scrollbar when there are multiple dataSeries needed to be shown on the toolTip. You can do so by changing overflow-y, height and pointer-events CSS properties of ‘canvasjs-chart-tooltip’ class as shown in the code-snippet below,

    .canvasjs-chart-tooltip{
      height: 100px !important;
      overflow-y: scroll !important;
      pointer-events: auto !important;
    } 

    Kindly take a look at this updated JSFiddle for an example on scrollable toolTip.

    Chart with scrollable toolTip


    Adithya Menon
    Team CanvasJS

    in reply to: How to add custom timing line in a line graph in x axis #35262

    @yashwanthgowda07,

    You can use stripLines on X-axis to draw a vertical line on a specific position on the chart to implement timings scale on the X-axis. To change the color of the strip lines, you can use the color property and you can use label property to set the labels for strip lines.

    JavaScript Candlestick Chart with StripLine on X-axis


    Adithya Menon
    Team CanvasJS

    in reply to: test series #35177

    @sptrainee31,

    It is possible to convert chart data into comma-separated CSV and download it with a few lines of code. Please find the code snippet for the same below,

    function convertChartDataToCSV(args) {
      var result = '',
          ctr, keys, columnDelimiter, lineDelimiter, data;
    
      data = args.data || null;
      if (data == null || !data.length) {
        return null;
      }
    
      columnDelimiter = args.columnDelimiter || ',';
      lineDelimiter = args.lineDelimiter || '\n';
    
      var mergedData = mergeData(data);
    
      keys = Object.keys(mergedData[0]);
      result = '';
      result += keys.join(columnDelimiter);
      result += lineDelimiter;
    
      mergedData.forEach(function (item) {
        ctr = 0;
        keys.forEach(function (key) {
          if (ctr > 0) result += columnDelimiter;
          result += (typeof (item[key]) != undefined ? item[key] : "");
          ctr++;
        });
        result += lineDelimiter;
      });
      return result;
    }

    Please take a look at this JSFiddle for working code. Also take a look at this 3rd party plugin, which seems to be working with multi-series chart as well.

    Considering this thread as a duplicate of Question about Multi Series Graph CSV Export and hence closing the same.


    Adithya Menon
    Team CanvasJS

    in reply to: Xport Multiple Series Graph as CSV #35176

    @sptrainee31,

    It is possible to convert chart data into comma-separated CSV and download it with a few lines of code. Please find the code snippet for the same below,

    function convertChartDataToCSV(args) {
      var result = '',
          ctr, keys, columnDelimiter, lineDelimiter, data;
    
      data = args.data || null;
      if (data == null || !data.length) {
        return null;
      }
    
      columnDelimiter = args.columnDelimiter || ',';
      lineDelimiter = args.lineDelimiter || '\n';
    
      var mergedData = mergeData(data);
    
      keys = Object.keys(mergedData[0]);
      result = '';
      result += keys.join(columnDelimiter);
      result += lineDelimiter;
    
      mergedData.forEach(function (item) {
        ctr = 0;
        keys.forEach(function (key) {
          if (ctr > 0) result += columnDelimiter;
          result += (typeof (item[key]) != undefined ? item[key] : "");
          ctr++;
        });
        result += lineDelimiter;
      });
      return result;
    }

    Please take a look at this JSFiddle for working code. Also take a look at this 3rd party plugin, which seems to be working with multi-series chart as well.

    Considering this thread as a duplicate of Question about Multi Series Graph CSV Export and hence closing the same.


    Adithya Menon
    Team CanvasJS

    in reply to: Question about Multi Series Graph CSV Export #35175

    @sptrainee31,

    It is possible to convert chart data into comma-separated CSV and download it with a few lines of code. Please find the code snippet for the same below,

    function convertChartDataToCSV(args) {
      var result = '',
          ctr, keys, columnDelimiter, lineDelimiter, data;
    
      data = args.data || null;
      if (data == null || !data.length) {
        return null;
      }
    
      columnDelimiter = args.columnDelimiter || ',';
      lineDelimiter = args.lineDelimiter || '\n';
    
      var mergedData = mergeData(data);
    
      keys = Object.keys(mergedData[0]);
      result = '';
      result += keys.join(columnDelimiter);
      result += lineDelimiter;
    
      mergedData.forEach(function (item) {
        ctr = 0;
        keys.forEach(function (key) {
          if (ctr > 0) result += columnDelimiter;
          result += (typeof (item[key]) != undefined ? item[key] : "");
          ctr++;
        });
        result += lineDelimiter;
      });
      return result;
    }

    Please take a look at this JSFiddle for working code. Also take a look at this 3rd party plugin, which seems to be working with multi-series chart as well.


    Adithya Menon
    Team CanvasJS

    in reply to: Stripline #35091

    @malvika,

    Yes, it is possible to draw stripLines within a given range. You can use startValue and endValue properties to set the starting and ending position of stripline as shown in below code-snippet,

    stripLines:[
      {
        startValue: -8,
        endValue:  10
      }
    ] 

    Kindly take a look at this JSFiddle for an example on showing Stripline for a particular range

    stripline shown for a particular range


    Adithya Menon
    Team CanvasJS

    in reply to: Control over algorithm to optimize the index labels #34976

    Tom,

    As of now, it’s not possible to control the auto-hiding of indexLabels in case of pie/doughnut charts. However, you can use startAngle property to set the starting angle of the pie which rotates it. By doing this you can try to show the maximum number of indexlabels even when the width of the chart is reduced. Please find the code snippet below,

    data: [{				
        type: "pie",
        startAngle: 70,
        dataPoints: [
          { label: "This is a label", y: 14}
        ]
    }]

    Kindly take a look at this JSFiddle for an example on a pie chart with an indexLabel.

    pie chart with index-label


    Adithya Menon
    Team CanvasJS

    in reply to: Control over algorithm to optimize the index labels #34952

    Glaass Software,

    It seems like you have provided us with the JSFiddle link which contains the template code (Basic Column Chart).

    Please fork/save the JSFiddle reproducing the issue you are facing and share the link with us so that we can look into your code, understand the scenario better and help you out.


    Adithya Menon
    Team CanvasJS

    in reply to: stackedBar100 indexLabel #34942

    @mubarakimran,

    CanvasJS comes with properties like indexLabelOrientation and indexLabelPlacement which you can use to customize the index labels. However, positioning the indexLabel above the stackedBar100 is not possible as of now.

    Sets indexLabel to dataPoints


    Adithya Menon
    Team CanvasJS

    in reply to: Accessibility in react funnel graph #34889

    @franklopez,

    Accessibility for individual dataPoints using “Tab” key is not available as of now. However, you can provide a chart-description for a chart container by adding aria-label and tabindex, which can be read using the screen reader like windows narrator when the focus is kept on the chart. Please check the below code snippet for adding aria-label and tabindex –

    var chartDescription = "A Funnel  Chart showing Company Recruitment Process where in which 63 percent of candidates cleared the aptitude test, 35 percent cleared the technical interview, 15 precent went through the HR interview and out of which 5 percent candidates were recruited";
        
    chart.container.setAttribute("aria-label", chartDescription);
    chart.container.setAttribute("tabindex", "0");

    Also, kindly check this StackBlitz for an example on same.

    CanvasJS Chart with Accessibility

    ___________
    Adithya Menon
    Team CanvasJS

    in reply to: Integrate performance chart with React #34840

    @jeremy,

    You can get the reference to the chart instance using onRef. This allows you to access all chart properties and methods. Kindly take a look at the code snippet below for an example on exporting chart with a button click,

    handleClick() {
       this.chart.exportChart({format:"png"});
    }

    Please find a working sample project here.


    Adithya Menon
    Team CanvasJS

    in reply to: Integrate performance chart with React #34829

    @jeremy,

    The issue seems to be due to the breaking changes of ES6 modules (import and export) made in Webpack that was introduced in v2.2.0-rc.5.

    Please find a working sample project here.


    Adithya Menon
    Team CanvasJS

    in reply to: Can the charts colors be done through UI #34825

    @arvindkelvin,

    You can show legend for each dataseries by setting showInLegend property. Please take a look at this documentation page for more information on legend & its customization options.

    javascript charts with legends

    However, if you are looking to display some information within each column of the column chart, you can use index labels

    javascript chart with indexlabel


    Adithya Menon
    Team CanvasJS

Viewing 15 posts - 1 through 15 (of 59 total)