Chart.LegendBox.Template = "%icon %name"; Chart.LegendBox.Background.Color = Color.FromArgb(240, 240, 240); Chart.TitleBox.Label.Text = "Click a country to load states/provinces"; Chart.DefaultElement.Outline.Color = Color.LightGray; Chart.JS.Enabled = true; //Binds this JS chart settings to js functions defined in the JS script block below. Chart.JS.Settings.Add("series.0.defaultPoint.events_click", "js:countryClickEv"); Chart.LegendBox.HeaderLabel.Text = "Click to zoom"; //Necessary to refer to this chart in JS Chart.JS.ControlID = "chart";
// *DYNAMIC DATA NOTE* // This sample uses random data to populate the chart. To populate // a chart with database data see the following resources: // - Classic samples folder // - Help File > Data Tutorials // - Sample: features/DataEngine.aspx
Chart.SeriesCollection.Add(getMapData());
}
SeriesCollection getMapData() { SeriesCollection SC = new SeriesCollection(); Series s = new Series(); s.JsMap = "Americas"; s.DefaultElement.Color = Color.White; s.DefaultElement.ToolTip = "Click to load %name"; SC.Add(s); return SC; } </script> </head> <body> <div align="center"> <script type="text/javascript"> var colorIndex = 0, addedCountries = []; function countryClickEv() { var point = this; //Get country code of this point. var id = point.tokenValue('%mapCode'); if (addedCountries.indexOf(id) === -1) { chart.series.add({ map: id, defaultPoint_legendEntry_visible: false, palette: JSC.colorToPalette(basePalette[colorIndex++], { hue: .03 }, 20, 1) }); addedCountries.push(id); } point.zoomTo({ animation: false }); } </script> <dotnet:Chart ID="Chart" runat="server"> </dotnet:Chart> </div> <script type="text/javascript"> basePalette = JSC.getPalette(0); </script> </body> </html>
Chart.LegendBox.Template = "%icon %name" Chart.LegendBox.Background.Color = Color.FromArgb(240, 240, 240) Chart.TitleBox.Label.Text = "Click a country to load states/provinces" Chart.DefaultElement.Outline.Color = Color.LightGray Chart.JS.Enabled = True 'Binds this JS chart settings to js functions defined in the JS script block below. Chart.JS.Settings.Add("series.0.defaultPoint.events_click", "js:countryClickEv") Chart.LegendBox.HeaderLabel.Text = "Click to zoom" 'Necessary to refer to this chart in JS Chart.JS.ControlID = "chart"
' *DYNAMIC DATA NOTE* ' This sample uses random data to populate the chart. To populate ' a chart with database data see the following resources: ' - Classic samples folder ' - Help File > Data Tutorials ' - Sample: features/DataEngine.aspx
Chart.SeriesCollection.Add(getMapData())
End Sub
Function getMapData() As SeriesCollection Dim SC As SeriesCollection = New SeriesCollection() Dim s As Series = New Series() s.JsMap = "Americas" s.DefaultElement.Color = Color.White s.DefaultElement.ToolTip = "Click to load %name" SC.Add(s) Return SC End Function </script> </head> <body> <div align="center"> <script type="text/javascript"> var colorIndex = 0, addedCountries = []; function countryClickEv() { var point = this; //Get country code of this point. var id = point.tokenValue('%mapCode'); if (addedCountries.indexOf(id) === -1) { chart.series.add({ map: id, defaultPoint_legendEntry_visible: false, palette: JSC.colorToPalette(basePalette[colorIndex++], { hue: .03 }, 20, 1) }); addedCountries.push(id); } point.zoomTo({ animation: false }); } </script> <dotnet:Chart ID="Chart" runat="server"> </dotnet:Chart> </div> <script type="text/javascript"> basePalette = JSC.getPalette(0); </script> </body> </html>
Previous