Графики не отображаются должным образом

Question

В настоящее время я работаю над проектом панели мониторинга на основе данных JSONP с хранилища SQL Server. Мне удалось настроить источники данных Kendo для правильного чтения JSONP и подтвердили объекты диаграммы и вкладку в моей панели инструментов, каждый из которых корректно отображает правильные данные, если все остальные объекты удалены, но когда я совмещаю несколько диаграмм на экране, в лучшем случае Я получаю 3-4 отображения диаграмм, и они отображают разные значения с одного обновления до следующего. Мои знания о JQuery - это, безусловно, новичок, пришедший из традиционных приложений для настольных приложений BI, а не для разработки, поэтому я уверен, что пропустил что-то простое, но я прошел через множество примеров и нитей форума безрезультатно. Кстати, я могу заставить таблост и первую диаграмму отображать, завернув их в $ (function() {}); но если я закрою другие диаграммы, ни один из них не появится, и если я поместил все диаграммы в один, то получаю те же результаты. Я включил свой код ниже, спасибо заранее.

Andy.

JS

var dscTop1Stats = new kendo.data.DataSource({ 
transport: { 
    read: { 
     cache: false, 
     url: "http://localhost:52387/Dash/GetTop1SourceStatsByUserData", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     jsonpCallback: "JsonPCallBack" 
    } 
} 
}); 


var dscTop2Stats = new kendo.data.DataSource({ 
transport: { 
    read: { 
     cache: false, 
     url: "http://localhost:52387/Dash/GetTop2SourceStatsByUserData", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     jsonpCallback: "JsonPCallBack" 
    } 
} 
}); 


var dscTop3Stats = new kendo.data.DataSource({ 
transport: { 
    read: { 
     cache: false, 
     url: "http://localhost:52387/Dash/GetTop3SourceStatsByUserData", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     jsonpCallback: "JsonPCallBack" 
    } 
} 
}); 


var dscTop1StatsTrend = new kendo.data.DataSource({ 
transport: { 
    read: { 
     cache: false, 
     url: "http://localhost:52387/Dash/GetTop1SourceStatsTrendByUserData", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     jsonpCallback: "JsonPCallBack" 
    } 
} 
}); 


var dscTop2StatsTrend = new kendo.data.DataSource({ 
transport: { 
    read: { 
     cache: false, 
     url: "http://localhost:52387/Dash/GetTop2SourceStatsTrendByUserData", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     jsonpCallback: "JsonPCallBack" 
    } 
} 
}); 


var dscTop3StatsTrend = new kendo.data.DataSource({ 
transport: { 
    read: { 
     cache: false, 
     url: "http://localhost:52387/Dash/GetTop3SourceStatsTrendByUserData", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     jsonpCallback: "JsonPCallBack" 
    } 
} 
}); 


var dscTop10Sources = new kendo.data.DataSource({ 
transport: { 
    read: { 
     cache: false, 
     url: "http://localhost:52387/Dash/GetRankingBySourcesData", 
     dataType: "jsonp", 
     contentType: "application/json; charset=utf-8", 
     jsonpCallback: "JsonPCallBack" 
    } 
} 
}); 


$(function() { 
$("#tabstrip").kendoTabStrip({ 
    contentUrls: [ 
     "Sources.html", 
     "Source Types.html", 
     "Keyword Analysis.html", 
     "Trend Analysis.html" 
    ], 
    animation: { 
     close: { 
      duration: 1000, 
      effects: "fadeOut" 
     }, 
     open: { 
      duration: 500, 
      effects: "fadeIn" 
     } 
    } 
}); 
$("#tabstrip").kendoTabStrip({ 
    animation: { open: { effects: "fadeIn" } }, 
    contentUrls: [ 
     '../../Sources.html', 
     '../../Source Types.html', 
     '../../Keyword Analysis.html', 
     '../../Trend Analysis.html' 
    ] 
}); 

$("#chartSummary").kendoChart({ 
    dataSource: dscTop10Sources, 
    legend: { 
     position: "left" 
    }, 
    seriesDefaults: { 
     labels: { 
      template: "#= category # - #= kendo.format('{0:P}', percentage)#", 
      position: "outsideEnd", 
      visible: true, 
      background: "transparent" 
     } 
    }, 
    series: 
    [{ 
     type: "column", 
     field: "SearchStoriesCount", 
     name: "Searched Stories" 
    }], 
    categoryAxis: { 
     field: "Name", 
     labels: { 
      rotation: -45, 
      font: "10px Arial,Helvetica,sans-serif", 
      padding: { top: 0 } 
     }, 
     majorGridLines: { 
      visible: true 
     } 
    }, 
    valueAxis: { 
     labels: { 
      format: "N0" 
     }, 
     majorUnit: 300, 
     line: { 
      visible: false 
     } 
    }, 
    tooltip: { 
     visible: true, 
     template: "#= category # - #= value #" 
    } 
}); 

$("#chartTop1").kendoChart({ 
    dataSource: dscTop1Stats, 
    title: { 
     text: "# Times stories searched in 31 days" 
    }, 
    legend: { 
     visible: false 
    }, 
    seriesDefaults: { 
     type: "bar" 
    }, 
    series: 
    [{ 
     field: "StoriesSearched", 
     name: "Stories Searched" 
    }], 
    seriesColors: ["#AF99D7"], 
    chartArea: { 
     margin: { 
      left: -3 
     }, 
     background: "" 
    }, 
    categoryAxis: { 
     field: "AuthorName", 
     labels: { 
      rotation: -0, 
      visible: false 
     }, 
     majorGridLines: { 
      visible: false 
     } 
    }, 
    valueAxis: { 
     labels: { 
      format: "N0" 
     }, 
     majorUnit: 2000, 
     line: { 
      visible: false 
     } 
    }, 
    tooltip: { 
     visible: true, 
     format: "N0" 
    } 
}); 

    $("#chartTop2").kendoChart({ 
     dataSource: dscTop2Stats, 
     title: { 
      text: "# Times stories searched in 31 days" 
     }, 
     legend: { 
      visible: false 
     }, 
     seriesDefaults: { 
      type: "bar" 
     }, 
     series: 
     [{ 
      field: "StoriesSearched", 
      name: "Stories Searched" 
     }], 
     seriesColors: ["#AF99D7"], 
     chartArea: { 
      margin: { 
       left: -3 
      }, 
      background: "" 
     }, 
     categoryAxis: { 
      field: "AuthorName", 
      labels: { 
       rotation: -0, 
       visible: false 
      }, 
      majorGridLines: { 
       visible: false 
      } 
     }, 
     valueAxis: { 
      labels: { 
       format: "N0" 
      }, 
      majorUnit: 2000, 
      line: { 
       visible: false 
      } 
     }, 
     tooltip: { 
      visible: true, 
      format: "N0" 
     } 
    }); 

    $("#chartTop3").kendoChart({ 
     dataSource: dscTop3Stats, 
     title: { 
      text: "# Times stories searched in 31 days" 
     }, 
     legend: { 
      visible: false 
     }, 
     seriesDefaults: { 
      type: "bar" 
     }, 
     series: 
     [{ 
      field: "StoriesSearched", 
      name: "Stories Searched" 
     }], 
     seriesColors: ["#AF99D7"], 
     chartArea: { 
      margin: { 
       left: -3 
      }, 
      background: "" 
     }, 
     categoryAxis: { 
      field: "AuthorName", 
      labels: { 
       rotation: -0, 
       visible: false 
      }, 
      majorGridLines: { 
       visible: false 
      } 
     }, 
     valueAxis: { 
      labels: { 
       format: "N0" 
      }, 
      majorUnit: 2000, 
      line: { 
       visible: false 
      } 
     }, 
     tooltip: { 
      visible: true, 
      format: "N0" 
     } 
    }); 

    $("#areaTop1").kendoSparkline({ 
     title: { 
      text: "31 Day Trend" 
     }, 
     dataSource: dscTop1StatsTrend, 
     series: [{ 
      type: "line", 
      field: "StoriesSearched", 
      name: "Relevant Stories", 
      width: 2, 
     }], 
     seriesColors: ["#6B5593"], 
     chartArea: { 
      width: 350, 
      height: 80, 
      background: "" 
     }, 
     categoryAxis: { 
      field: "Date" 
     } 
    }); 

    $("#areaTop2").kendoSparkline({ 
     title: { 
      text: "31 Day Trend" 
     }, 
     dataSource: dscTop2StatsTrend, 
     series: [{ 
      type: "line", 
      field: "StoriesSearched", 
      name: "Relevant Stories", 
      width: 2, 
     }], 
     seriesColors: ["#6B5593"], 
     chartArea: { 
      width: 350, 
      height: 80, 
      background: "" 
     }, 
     categoryAxis: { 
      field: "Date" 
     } 
    }); 

    $("#areaTop3").kendoSparkline({ 
     title: { 
      text: "31 Day Trend" 
     }, 
     dataSource: dscTop3StatsTrend, 
     series: [{ 
      type: "line", 
      field: "StoriesSearched", 
      name: "Relevant Stories", 
      width: 2, 
     }], 
     seriesColors: ["#6B5593"], 
     chartArea: { 
      width: 350, 
      height: 80, 
      background: "" 
     }, 
     categoryAxis: { 
      field: "Date" 
     } 
    }); 
}); 

$.getJON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) { 
    $.each(top1Stats, function (i, item) { 
     var content = '<p class="title_text">' + item.AuthorName + '</p>'; 
     $(content).appendTo("#Top1Author"); 
    }); 
}); 

$.getJSON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) { 
    $.each(top1Stats, function (i, item) { 
     var content = '<p class="tag_text">' + item.Tags + '</p>'; 
     $(content).appendTo("#Top1Tags"); 
    }); 
}); 

$.getJSON("http://localhost:52387/Dash/GetTop1SourceStatsByUserData?callback=?", function (top1Stats) { 
    $.each(top1Stats, function (i, item) { 
     var content = '<p class="title_text">' + item.PercentUserContent + '%/' + item.PercentTotalContent + '%</p>'; 
     $(content).appendTo("#Top1UservsTotal"); 
    }); 
}); 


$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) { 
    $.each(top2Stats, function (i, item) { 
     var content = '<p class="title_text">' + item.AuthorName + '</p>'; 
     $(content).appendTo("#Top2Author"); 
    }); 
}); 

$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) { 
    $.each(top2Stats, function (i, item) { 
     var content = '<p class="tag_text">' + item.Tags + '</p>'; 
     $(content).appendTo("#Top2Tags"); 
    }); 
}); 

$.getJSON("http://localhost:52387/Dash/GetTop2SourceStatsByUserData?callback=?", function (top2Stats) { 
    $.each(top2Stats, function (i, item) { 
     var content = '<p class="title_text">' + item.PercentUserContent + '%/' + item.PercentTotalContent + '%</p>'; 
     $(content).appendTo("#Top2UservsTotal"); 
    }); 
}); 


$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) { 
    $.each(top3Stats, function (i, item) { 
     var content = '<p class="title_text">' + item.AuthorName + '</p>'; 
     $(content).appendTo("#Top3Author"); 
    }); 
}); 

$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) { 
    $.each(top3Stats, function (i, item) { 
     var content = '<p class="tag_text">' + item.Tags + '</p>'; 
     $(content).appendTo("#Top3Tags"); 
    }); 
}); 

$.getJSON("http://localhost:52387/Dash/GetTop3SourceStatsByUserData?callback=?", function (top3Stats) { 
    $.each(top3Stats, function (i, item) { 
     var content = '<p class="title_text">' + item.PercentUserContent + '%/' + item.PercentTotalContent + '%</p>'; 
     $(content).appendTo("#Top3UservsTotal"); 
    }); 
}); 

HTML

<section class="well content-wrapper"> 
    <div class="main_content"> 
     <div class="frame_tabstrip"> 
      <div id="tabstrip"> 
       <ul> 
        <li class="k-state-active">Option1</li> 
        <li>Option2</li> 
        <li>Option3</li> 
        <li>Option4</li> 
       </ul> 
      </div> 
     </div> 
     <div class="frame_top"> 
      <h2 class="contentTitle">&nbsp;text here&nbsp;<small>text here</small></h2> 
      <div id="chartSummary"> 
      </div> 
     </div> 
     <div class="frame_bottom"> 
      <h2 class="contentTitle">&nbsp;text here&nbsp;<small>text here</small></h2> 
      <div class="summary_bar"> 
       <div class="summary_title"> 
        <div id="Top1Author"> 
        </div> 
        <div id="Top1Tags"> 
        </div> 
       </div> 
       <div class="summary_bullet"> 
        <div id="chartTop1"> 
        </div> 
       </div> 
       <div class="summary_area"> 
        <div id="areaTop1"> 
        </div> 
       </div> 
       <div class="summary_value"> 
        <div id="Top1UservsTotal" style="text-align:center"> 
        </div> 
        <div id="Top1UservsTotal_Desc" style="text-align:center"> 
         <p class="tag_text"></p> 
        </div> 
       </div> 
      </div> 
      <div class="summary_bar"> 
       <div class="summary_title"> 
        <div id="Top2Author"> 
        </div> 
        <div id="Top2Tags"> 
        </div> 
       </div> 
       <div class="summary_bullet"> 
        <div id="chartTop2"> 
        </div> 
       </div> 
       <div class="summary_area"> 
        <div id="areaTop2"> 
        </div> 
       </div> 
       <div class="summary_value"> 
        <div id="Top2UservsTotal" style="text-align:center"> 
        </div> 
        <div id="Top2UservsTotal_Desc" style="text-align:center"> 
         <p class="tag_text"></p> 
        </div> 
       </div> 
      </div> 
      <div class="summary_bar"> 
       <div class="summary_title"> 
        <div id="Top3Author"> 
        </div> 
        <div id="Top3Tags"> 
        </div> 
       </div> 
       <div class="summary_bullet"> 
        <div id="chartTop3"> 
        </div> 
       </div> 
       <div class="summary_area"> 
        <div id="areaTop3"> 
        </div> 
       </div> 
       <div class="summary_value"> 
        <div id="Top3UservsTotal" style="text-align:center"> 
        </div> 
        <div id="Top3UservsTotal_Desc" style="text-align:center"> 
         <p class="tag_text"></p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

Answer 1

значения Уникальный JsonPCallback были исправить это.