2014-10-14 2 views
0

В настоящее время я работаю над внедрением гистограммы с использованием API Google Charts на веб-сайте, разработанном в ASP.NET. Мне удалось отобразить диаграмму со значениями. Я получаю эти значения из базы данных. Значения следующие:Значение присваивается неправильной метке

курс: Набор для Retail в БД

Progression: Набор для в БД

Теперь проблема у меня есть, когда шкальный отображаются на странице его следующее:

enter image description here

Курс получает значение Progression.

Для привязки данных к диаграмме Код находится ниже

private void BindChart() 
{ 
    DataTable dsChartData = new DataTable(); 
    StringBuilder strScript = new StringBuilder(); 

    try 
    { 
     dsChartData = GetChartData(); 

     strScript.Append(@"<script type='text/javascript'> 
       google.load('visualization', '1', {packages: ['corechart']}); </script> 

       <script type='text/javascript'> 

       function drawChart() {   
       var data = google.visualization.arrayToDataTable([ 
       ['Progression', 'Course'],"); 

     foreach (DataRow row in dsChartData.Rows) 
     { 
      strScript.Append("['" + row["Course"] + "'," + row["Progression"] + "],"); 
     } 
     strScript.Remove(strScript.Length - 1, 1); 
     strScript.Append("]);"); 

     strScript.Append(@" var options = {  
           hAxis: { 
           viewWindow: { 
           min: 0, 
           max: 100 
           }, 
           ticks: [0, 25, 50, 75, 100], 
           }, 
           title: 'My Progression (%)'  
           }; "); 

     strScript.Append(@"var chart = new google.visualization.BarChart(document.getElementById('barchart'));   
          chart.draw(data, options);   
          }  
         google.setOnLoadCallback(drawChart); 
         "); 
     strScript.Append(" </script>"); 

     ltScripts.Text = strScript.ToString(); 
    } 
    catch 
    { 
    } 
    finally 
    { 
     dsChartData.Dispose(); 
     strScript.Clear(); 
    } 
} 

И, чтобы получить данные из базы данных я использую ниже код

private DataTable GetChartData() 
{ 
    string UsrName = User.Identity.Name; 
    DataSet dt = new DataSet(); 
    try 
    { 
     using (SqlConnection conn = new SqlConnection(Common.ConnectionString)) 
     { 
      using (SqlCommand cmd = new SqlCommand("SELECT Progression,Course FROM Messages where [email protected]")) 
      { 
       using (SqlDataAdapter sda = new SqlDataAdapter()) 
       { 
        SqlParameter para = new SqlParameter("UserName", UsrName); 
        cmd.Parameters.Add(para); 
        cmd.Connection = conn; 
        sda.SelectCommand = cmd; 
        sda.Fill(dt); 
       } 
      } 
     } 
    } 
    catch (Exception) 
    { 
     throw; 
    } 
    return dt.Tables[0]; 
} 

Заранее спасибо за помощь

+0

@ Downvoter заботится о том, почему? – Izzy

+1

Не знаете, почему. Я не думаю, что вы могли бы сделать этот вопрос более ясным или предоставить дополнительную информацию. –

ответ

2

Я думаю, что вы в основном там, но вам нужно просто поменять имена столбцов в начале вашего массива, а затем оставить остальное как- является:

strScript.Append(@"[...] 
     var data = google.visualization.arrayToDataTable([ 
      ['Course', 'Progression'],"); 

foreach (DataRow row in dsChartData.Rows) 
{ 
    strScript.Append("['" + row["Course"] + "'," + row["Progression"] + "],"); 
} 

Вы можете увидеть это на this fiddle:

Correct labels

Если это не сработает, попробуйте опубликовать фактическую визуализацию JS на своей странице - если вы говорите, что график не отображается вообще, вы, вероятно, получили ошибку в финальном JS - проверьте свои консоль браузера для ошибок, связанных с пропущенными закрытыми строками и т. д.

+0

Это работает так, как я хочу поблагодарить тонну! – Izzy

-1

Вы плохо добавляете параметры. (Я полагаю, вы были сочинительство настольных приложений и вы используете метод Parameters.AddWithValue() Это немного отличается от Parameters.Add()

Попробуйте так:.

SqlCommand command = new SqlCommand(commandText, connection); 
command.Parameters.Add("@ID", SqlDbType.Int); 
command.Parameters["@ID"].Value = customerID; 
+0

Извините, я должен был сказать, что работаю над сайтом в ASP – Izzy

+0

На самом деле вы пропустили меня. Попытайтесь изменить способ добавления параметров к тому, как я показал вам (он будет работать в asp). Если это не поможет, я попытаюсь выяснить, что здесь происходит :) – MajkeloDev

+0

Точно такая же проблема – Izzy

2

Вы ссылку на столбцах в обратном направлении .

Здесь вы указали «Прогрессия», а затем «курс»:

strScript.Append(@"<script type='text/javascript'> 
     google.load('visualization', '1', {packages: ['corechart']}); </script> 

     <script type='text/javascript'> 

     function drawChart() {   
     var data = google.visualization.arrayToDataTable([ 
     ['Progression', 'Course'],"); 

Но тогда ваш цикл добавления данных «курс» в «Progression» седловине umn и «Данные прогрессии» в колонке «Курс»:

foreach (DataRow row in dsChartData.Rows) 
{ 
    strScript.Append("['" + row["Course"] + "'," + row["Progression"] + "],"); 
} 

Отразить их. Кроме того, доступ к столбцу в DataRow возвращает значение как object, поэтому он, вероятно, не может определить, что должно быть базовым значением. Разберите числовое значение. более

foreach (DataRow row in dsChartData.Rows) 
{ 
    strScript.Append("[" + int.Parse(row["Progression"]) + ",'" + row["Course"] + "'],"); 
} 

Одна вещь .. в зависимости от docs, вы должны пройти false в вызове arrayToDataTable() указать в первой строке содержит метки.Изменить это:

strScript.Append("]);"); 

Для этого:

strScript.Append("], false);"); 
+0

Я уже пробовал это, и по какой-то странной причине диаграмма даже не отображается:/ – Izzy

+0

Попробуйте еще раз, дважды проверив размещение одиночных апострофов. (Убедитесь, что они остаются в курсе, но не прогрессируют, когда вы их переворачиваете.) –

+0

Я получаю эту ошибку 'Столбец данных для оси # 0 не может быть типа string' – Izzy

Смежные вопросы