Databases
StackOverflow2013
Postsdbo
POHighcharts with sql server data
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHighcharts with sql server data
    text
    copied!<p>I am just starting using highchart and I need to render values from an sql server database on it.</p> <p>Please, what is the best approach for me to do this using asp.net as the server side language.</p> <p>Thanks in advance Thanks for the response guys, I am making a bit of a progress. However getting the xAxis categories dynamically from the database is proving difficult. Here is my code below</p> <pre><code>DataSet dsSeries = new DataSet(); public string hidValues1; public string hidXCategories1; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) dsSeries=BindData(); if (dsSeries == null) return; foreach (DataRow dr in dsSeries.Tables[0].Rows) { hidXCategories1=hidXCategories1+ dr["symbol"].ToString()+","; } foreach (DataRow dr1 in dsSeries.Tables[0].Rows) { hidValues1=hidValues1+dr1["value"].ToString()+","; } } public DataSet BindData() { string connString = ConfigurationManager.ConnectionStrings["Chartdata"].ToString(); SqlConnection con = new SqlConnection(connString); SqlCommand cmd = new SqlCommand(); cmd.Connection = con; cmd.CommandText = "SELECT symbol,value FROM Ticker"; SqlDataAdapter da = new SqlDataAdapter(cmd); try { DataSet ds = new DataSet(); da.Fill(ds); return ds; } catch (Exception ex) { throw ex; } } &lt;script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="Scripts/highcharts.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="Scripts/exporting.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var firstSeries = '&lt;%=hidValues1 %&gt;'; var xAxis = '&lt;%=hidXCategories1 %&gt;'; var banksname; var seriesOne = new Array(); seriesOne = firstSeries.split(','); for (var i = 0; i &lt; seriesOne.length; i++) { seriesOne[i] = parseInt(seriesOne[i]); } var xAxisSeries = new Array(); xAxisSeries = xAxis.split(','); for (var i = 0; i &lt; xAxisSeries.length; i++) { banksname =banksname+ seriesTwo[i]; } var _MyArray = seriesOne; var _MyArray2 = banksname; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'line' }, title: { text: 'Fruit Consumption' }, xAxis: { categories:[_MyArray2] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name:'Share Price', data:_MyArray }] }); $('tspan').last().remove(); }); &lt;/script&gt; &lt;/asp:Content&gt; &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt; &lt;div id="container" style="width: 800px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt; </code></pre> <p> The yAxis data populates and renders properly on the chart, however the xAxis categories still displays in figures(which is a number listing of the categories in the database table.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload