Initialization
Since Pivot Chart tool comes as an add-on to Webix library you need to include both Webix and Pivot Chart scripts and CSS files on your page to make everything work.
Make sure you specify relative paths to these files:
<html>
<head>
<!-- js files -->
<script src="codebase/webix.js" type="text/javascript"></script>
<script src="codebase/pivot.js" type="text/javascript"></script>
<!-- css files -->
<link rel="stylesheet" href="codebase/webix.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="codebase/pivot.css" type="text/css" charset="utf-8">
</head>
<body>
<div id = "testA"></div> <!-- container for Pivot Chart-->
</body>
</html>
The initialization of Pivot Chart doesn't differ from that of other Webix components and is done with webix.ui() constructor function where you enumerate all the necessary properties:
webix.ui({
container:"testA",
id:"pivot",
view:"pivot-chart",
structure:{
groupBy: "continent",
values: [
{name:"balance", operation:"max", color: "#eed236"},
{name:"oil", operation:"max", color: "#36abee"}
],
filters:[{name:"year", type:"select"}]
},
url: "../common/data.json"
});
Related sample: Initialization with Inline Data
Properties
- id - (string,number) component ID, should be unique within a page. In Webix, any component is referred to by its ID, $$("id"), to perform various operations with it;
- container - (string) ID of an HTML container Pivot Chart will be put to (optional);
- fieldMap - (object) can be used to define custom labels for fields (optional) (details);
- data or url - (string) defines dataset (details);
- structure - (object) defines initial display and analysis pattern (details);
- chart - (object) defines the chart configuration options that you want to redefine, i.e. object with a set of redefined properties (details);
- chartType - (string) sets the default chart type;
- chartMap - (object) can be used to redefine default types of a chart ('bar', 'line', 'radar') or add a new one ('stacked bar' or 'area') (details);
- filterWidth - (number) sets the width of filters (both input and label) in the header of the chart;
- filterLabelWidth - (number) sets the width of the filters' labels;
- filterLabelAlign - (string) sets the horizontal alignment of the filters' labels;
- editButtonWidth - (number) sets the width of the "Settings" button;
- singleLegendItem - (boolean) specifies whether the legend should be displayed if it contains only 1 item;
- palette - (array) specifies the pop-up color palette of the Values' values
palette:[ ["#e33fc7","#a244ea",...],["#d3ee36","#eed236",.. ],.. ]
each inner array specifies a row in the palette;
- separateLabel - (boolean) separates the label from the Pivot filter and removes limits on the label size, true by default.
Structure Object
- values - array of fields that will be used as pivot's data (will be displayed in chart);
- filters - array of fields that will be used as filters and will be displayed above the chart;
- groupBy - the name of the field that will be used to group values by.
Back to top