Annotation an = new Annotation(); an.Padding = 8; an.Label.Text = "Source: Centers for Disease Control and Prevention"; an.Orientation = dotnetCHARTING.Orientation.Bottom;
an.ClearColors(); Chart.Annotations.Add(an); Chart.JS.Settings.Add("annotations.0.position", "bottom"); Chart.JS.Settings.Add("defaultSeries.states.hover.line.width", "2"); } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>.netCHARTING Sample</title> </head> <body> <dnc:Chart ID="Chart" runat="server" style="max-width:740px;margin:0px auto;"/> <script type="text/javascript"> function updateChart(ch) { loadData(ch, makeChart); }; function loadData(chart, cb){ JSC.fetch('https://data.cdc.gov/api/views/w9j2-ggv5/rows.csv?accessType=DOWNLOAD') .then(function(response) { return response.text() }) .then(function(text) { var parsed = JSC.parseCsv(text); cb(chart,parsed.data) }) .catch(function(err) { console.error(err) }); } function makeChart(chart,data) { //Format csv data into points that will bind the calendar cells. //Filter out unused data var allRaces = data.filter(function (row) { return row[1] === 'All Races'; }); var male = allRaces.filter(function (row) { return row[2] === 'Male'; }); var female = allRaces.filter(function (row) { return row[2] === 'Female'; });
var toPoints = function (rows) { return rows.map(function (row) { return { x: '1/1/' + row[0], y: row[3] } }); } //Add data to chart. chart.series.add({ name: 'Male', points: toPoints(male) });
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) ' Demonstrates Line chart using Csv data file. Chart.Type = ChartType.Combo Chart.DefaultSeries.Type = SeriesType.Line Chart.Width = 740 Chart.Height = 400 Chart.TempDirectory = "temp" Chart.Debug = False
Dim an As Annotation = New Annotation() an.Padding = 8 an.Label.Text = "Source: Centers for Disease Control and Prevention" an.Orientation = dotnetCHARTING.Orientation.Bottom
an.ClearColors() Chart.Annotations.Add(an) Chart.JS.Settings.Add("annotations.0.position", "bottom") Chart.JS.Settings.Add("defaultSeries.states.hover.line.width", "2") End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>.netCHARTING Sample</title> </head> <body> <dnc:Chart ID="Chart" runat="server" style="max-width:740px;margin:0px auto;"/> <script type="text/javascript"> function updateChart(ch) { loadData(ch, makeChart); }; function loadData(chart, cb){ JSC.fetch('https://data.cdc.gov/api/views/w9j2-ggv5/rows.csv?accessType=DOWNLOAD') .then(function(response) { return response.text() }) .then(function(text) { var parsed = JSC.parseCsv(text); cb(chart,parsed.data) }) .catch(function(err) { console.error(err) }); } function makeChart(chart,data) { //Format csv data into points that will bind the calendar cells. //Filter out unused data var allRaces = data.filter(function (row) { return row[1] === 'All Races'; }); var male = allRaces.filter(function (row) { return row[2] === 'Male'; }); var female = allRaces.filter(function (row) { return row[2] === 'Female'; });
var toPoints = function (rows) { return rows.map(function (row) { return { x: '1/1/' + row[0], y: row[3] } }); } //Add data to chart. chart.series.add({ name: 'Male', points: toPoints(male) });
Previous