Next
Update
Prev
Using setLayout
Using LayoutURL

The Chart representation can be modified dynamically by calling a JavaScript function. This sample map chart demonstrates dynamic Layout change. Click the buttons below the sample Chart.

function changeLayout() {
  document.getElementById("map1").setLayout(layoutStr2);
  document.getElementById("map1").setData(mapData2);
    
}

function changeLayout2() {
  document.getElementById("map1").setLayoutURLEx(layoutURL2);
  document.getElementById("map1").setData(mapData);
}

var layoutURL2 ="./LayoutXml/LayoutMapBubbleSeries.xml";

var layoutStr2 = 
'<KoolMap>
  <MapChart id="mainMap" drillDownEnable="false" showDataTips="true" gutterTop="15" gutterBottom="15">
    <series>
      <MapSeries id="mapseries" interactive="false" selectionMarking="line" displayName="Map Series">
        <filters>
          <DropShadowFilter distance="1" angle="45" color="#888888"/>
        </filters>
        <showDataEffect>
          <SeriesInterpolate duration="1000"/>
        </showDataEffect>
        <stroke>
          <Stroke color="#BBBBBB" weight="0.8" alpha="1"/>
        </stroke>
      </MapSeries>
      <MapPanelSeries id="panel" titleField="label" bodyTextField="temperature" horizontalCenterGapField="h" verticalCenterGapField="v" color="#FFFFFF" horizontalAlign="right" fillJsFunction="fillFunction" displayName="label">
        <showDataEffect>
          <SeriesSlide duration="1000"/>
        </showDataEffect>
      </MapPanelSeries>
    </series>
  </MapChart>
</KoolMap>';

© 2017 KoolChart. All rights reserved.