JavaScript charts VanCharts - Series Drag

I. Create new chart and allocate data

      We use Sales Volume.xls as the data source. Create a new template in VanCharts chart maker of column chart and click Chart Attribute - Data to allocate data for the chart as shown below:

JavaScript charts Series Drag

II. Series drag

      Select Chart Attribute - Special Effect > Interaction Attribute and check the box in front of the Series Drag as shown below:

JavaScript charts Series Drag

      Note: The series drag option is checked by default.

III. View effect

      After the template has been set, save the template and click page break preview to the see report with 5 series in the web as shown below:

JavaScript charts Series Drag

1. Series merge

      If you want to view the merged value of two series, like the total sales volume of Chocolate and Beef Jerky in the sample above, we can select the column of Chocolate or Beef Jerky of any category in the web and drag it to the column of Beef Jerky or Chocolate to merge the two series as shown below:

JavaScript charts Series Drag

2. Series delete

      To delete data of certain series from the web chart, click the JavaScript charts Series Drag in the top right corner and clear all operations for this template in the web to resume to initial conditions. For example, if you want to delete the data for Beef Jerky Series, we can click the beef jerky series column and hold to drag it to anywhere outside the chart plotting area as shown below:

JavaScript charts Series Drag

      Note: Chart series delete is different from series hiding in the Chart Legend Interaction. The former operation is to directly delete the series from the chart and the data cannot be resumed unless refreshing the page or clearing all operation; while series hiding for legend interaction will not remove the data, and the legend can be resumed by clicking again.