Chart as grid doesn't work with multiple charts in jscharting-vue but does when just using plain javascript #6

ltaylor2607 · 2020-10-19T07:33:54Z

Issue
When using more than one chart on the same page, setting
grid: { enabled: true }
Only one of the chart displays a grid correctly when clicking on the "Grid" button.

When creating the exact same charts using pure js and html it works correctly.

Expected Behaviour
The grid behaviour should work for all charts on the page in vue, in the same way that it does for pure js.

Observed Behaviour
Only one of the grids works correctly. Only one of the charts works correctly, regardless of how many charts there are (I've gone up to 4).

Pure js

<!DOCTYPE html><html lang="en">
  <head>
    <title>Basic Donut Chart | JSCharting</title>
    <meta http-equiv="content-type" content="text-html; charset=utf-8">
    <script src="https://code.jscharting.com/latest/jscharting.js"></script>
    <script type="text/javascript" src="https://code.jscharting.com/latest/modules/types.js"></script>
    <style type="text/css"></style>
  </head>
  <body>
    <div id="chartDiv" style="max-width: 450px;height: 360px;margin: 0px auto"></div>
    <div id="columnDiv" style="max-width: 740px;height: 400px;margin: 0px auto">
    </div>
  <script type="text/javascript">
    var chart = JSC.chart('chartDiv', {
      debug: true,
      grid: {
        enabled: true,
      },
      legend: {
        position: 'inside left bottom',
        template: '%value {%percentOfTotal:n1}% %icon %name'
      },
      title_position: 'center',
      defaultSeries_type: 'pieDonut',
      defaultPoint_label_text: '<b>%name</b>',
      title_label_text: 'Countries GDP',
      yAxis: { label_text: 'GDP', formatString: 'n'  },
      series: [
        {
          name: 'Countries',
          points: [
            { name: 'United States', y: 5452500  },
            { name: 'Canada', y: 786052  },
            { name: 'United Kingdom', y: 477338  },
            { name: 'Mexico', y: 155313  }
          ]
        }
      ]
    });
    var secondChart = JSC.chart('columnDiv', { 
      debug: true, 
      grid: {
        enabled: true,
      },
      type: 'column', 
      yAxis: { 
        scale_type: 'stacked', 
        label_text: 'Units Sold'
      }, 
      title_label_text: 'Acme Tool Sales', 
      xAxis_label_text: 'Quarter', 
      series: [ 
        { 
          name: 'Saw', 
          id: 's1', 
          points: [ 
            { x: 'Q1', y: 230 }, 
            { x: 'Q2', y: 240 }, 
            { x: 'Q3', y: 267 }, 
            { x: 'Q4', y: 238 } 
          ] 
        }, 
        { 
          name: 'Hammer', 
          points: [ 
            { x: 'Q1', y: 325 }, 
            { x: 'Q2', y: 367 }, 
            { x: 'Q3', y: 382 }, 
            { x: 'Q4', y: 371 } 
          ] 
        }, 
        { 
          name: 'Grinder', 
          points: [ 
            { x: 'Q1', y: 285 }, 
            { x: 'Q2', y: 292 }, 
            { x: 'Q3', y: 267 }, 
            { x: 'Q4', y: 218 } 
          ] 
        }, 
        { 
          name: 'Drill', 
          points: [ 
            { x: 'Q1', y: 185 }, 
            { x: 'Q2', y: 192 }, 
            { x: 'Q3', y: 198 }, 
            { x: 'Q4', y: 248 } 
          ] 
        } 
      ] 
    }); 
  </script>
</body>
</html>

Vue code
Can be found here: https://github.com/ltaylor2607/chart-test

This is a really fantastic feature and it would be great to be able to make use of it in Vue, so any help with this would be greatly appreciated.

The text was updated successfully, but these errors were encountered:

arthurPuszynski · 2020-10-19T14:43:27Z

@ltaylor2607 Thank you for your inquiry. We will look into making this more reliable in the next update, however, in the meantime you can make this work correctly in vue by adding IDs to the tags like so:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <JSCharting :options="pie" id="c1"></JSCharting>
    <JSCharting :options="bar" id="c2"></JSCharting>
  </div>
</template>

Please let me know if you have any further questions.

ltaylor2607 · 2020-10-19T15:08:13Z

@arthurPuszynski thank you for your quick response. That works perfectly now.

ltaylor2607 closed this as completed Oct 19, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chart as grid doesn't work with multiple charts in jscharting-vue but does when just using plain javascript #6

Chart as grid doesn't work with multiple charts in jscharting-vue but does when just using plain javascript #6

ltaylor2607 commented Oct 19, 2020 •

edited

arthurPuszynski commented Oct 19, 2020

ltaylor2607 commented Oct 19, 2020

Chart as grid doesn't work with multiple charts in jscharting-vue but does when just using plain javascript #6

Chart as grid doesn't work with multiple charts in jscharting-vue but does when just using plain javascript #6

Comments

ltaylor2607 commented Oct 19, 2020 • edited

arthurPuszynski commented Oct 19, 2020

ltaylor2607 commented Oct 19, 2020

ltaylor2607 commented Oct 19, 2020 •

edited