{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/integrated-charts-api-cross-filter-chart/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cross-filtering charts allow users to interact with data in an easy and intuitive way. Clicking on chart elements\nautomatically filters values in both the grid and other cross-filter charts."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"gif","properties":{"src":"cross-filtering.gif","alt":"Cross Filtering"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This built-in feature of integrated charts is particularly useful for creating interactive reports and dashboards."}]},{"type":"element","tagName":"h2","properties":{"id":"creating-cross-filter-charts","style":"position:relative;"},"children":[{"type":"text","value":"Creating cross-filter charts"},{"type":"element","tagName":"a","properties":{"href":"#creating-cross-filter-charts","ariaLabel":"creating cross filter charts permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cross-Filter charts are created programmatically using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"createCrossFilterChart(params)"}]},{"type":"text","value":" on the grid's API."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"charts","names":"[\"createCrossFilterChart\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following snippet shows how a cross-filtering pie chart can be created:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| gridOptions.api.createCrossFilterChart({\n|     chartType: 'pie',\n|     cellRange: {\n|         columns: ['salesRep', 'sale'],\n|     },\n|     aggFunc: 'sum',\n| });\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note in the snippet above that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sale"}]},{"type":"text","value":" values are aggregated by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"salesRep"}]},{"type":"text","value":" category as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFunc: 'sum'"}]},{"type":"text","value":" is specified."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A corresponding column configuration for the chart above is shown in the following snippet:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n| const gridOptions = {\n|     columnDefs: [\n|         { field: 'salesRep', filter: 'agSetColumnFilter', chartDataType: 'category' },\n|         { field: 'sale', chartDataType: 'series' },\n|     ],\n| }\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cross-filtering requires that grid filtering is enabled with either a "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/filter-set/"},"children":[{"type":"text","value":"Set Filter"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/filter-multi/"},"children":[{"type":"text","value":"Multi Filter"}]},{"type":"text","value":" configured on the category column used in the chart. It is also important to define the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/integrated-charts-range-chart/#coldefchartdatatype"},"children":[{"type":"text","value":"Chart Data Type"}]},{"type":"text","value":" as it's not possible to infer the type when all data is filtered out.."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows how to create a simple cross-filtering pie chart. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Click"}]},{"type":"text","value":" on a sector of the pie chart to filter rows in the grid by the selected sales rep."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Ctrl (Cmd) Click"}]},{"type":"text","value":" on another sector to additionally adds rows corresponding to the selected sales rep."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Click Chart Background"}]},{"type":"text","value":" to remove / reset the filtering in the grid to restore all rows in the grid."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Simple Cross-Filter","name":"simple-cross-filter","type":"generated","options":"{ \"exampleHeight\": 680, \"enterprise\":  true,  \"modules\": [\"clientside\", \"menu\", \"charts\", \"setfilter\", \"multifilter\", \"filterpanel\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"cross-filter-api","style":"position:relative;"},"children":[{"type":"text","value":"Cross-filter API"},{"type":"element","tagName":"a","properties":{"href":"#cross-filter-api","ariaLabel":"cross filter api permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The cross-filter api shares a similar api to "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/integrated-charts-api-range-chart/"},"children":[{"type":"text","value":"Range Chart"}]},{"type":"text","value":", however there are\ndifferent defaults which make sense for cross-filtering."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"charts","names":"[\"createCrossFilterChart\"]"},"children":[]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"CreateCrossFilterChartParams","overridesrc":"integrated-charts-api-cross-filter-chart/resources/cross-filter-api.json"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"cross-filter-chart-types","style":"position:relative;"},"children":[{"type":"text","value":"Cross-filter Chart Types"},{"type":"element","tagName":"a","properties":{"href":"#cross-filter-chart-types","ariaLabel":"cross filter chart types permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following examples show the different chart types that support cross-filtering:"}]},{"type":"element","tagName":"h3","properties":{"id":"example-sales-dashboard-1","style":"position:relative;"},"children":[{"type":"text","value":"Example: Sales Dashboard #1"},{"type":"element","tagName":"a","properties":{"href":"#example-sales-dashboard-1","ariaLabel":"example sales dashboard 1 permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sales Dashboard","name":"sales-dashboard","type":"generated","options":"{ \"exampleHeight\": 1000, \"enterprise\":  true,  \"modules\": [\"clientside\", \"menu\", \"charts\", \"setfilter\", \"multifilter\", \"filterpanel\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-sales-dashboard-2","style":"position:relative;"},"children":[{"type":"text","value":"Example: Sales Dashboard #2"},{"type":"element","tagName":"a","properties":{"href":"#example-sales-dashboard-2","ariaLabel":"example sales dashboard 2 permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Sales Dashboard 2","name":"sales-dashboard2","type":"generated","options":"{ \"exampleHeight\": 1000, \"enterprise\":  true,  \"modules\": [\"clientside\", \"menu\", \"charts\", \"setfilter\", \"multifilter\", \"filterpanel\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-most-populous-cities","style":"position:relative;"},"children":[{"type":"text","value":"Example: Most Populous Cities"},{"type":"element","tagName":"a","properties":{"href":"#example-most-populous-cities","ariaLabel":"example most populous cities permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Most Populous Cities","name":"most-populous-cities","type":"generated","options":"{ \"exampleHeight\": 1000, \"enterprise\":  true,  \"modules\": [\"clientside\", \"menu\", \"charts\", \"setfilter\", \"multifilter\", \"filterpanel\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about: "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.3/integrated-charts-time-series/"},"children":[{"type":"text","value":"Time Series Chart"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Cross Filter Chart API","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"creating-cross-filter-charts","depth":2,"value":"Creating cross-filter charts"},{"id":"cross-filter-api","depth":2,"value":"Cross-filter API"},{"id":"cross-filter-chart-types","depth":2,"value":"Cross-filter Chart Types"},{"id":"example-sales-dashboard-1","depth":3,"value":"Example: Sales Dashboard #1"},{"id":"example-sales-dashboard-2","depth":3,"value":"Example: Sales Dashboard #2"},{"id":"example-most-populous-cities","depth":3,"value":"Example: Most Populous Cities"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/integrated-charts-api-cross-filter-chart","pageName":"integrated-charts-api-cross-filter-chart"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}