jquery - Access data in model from JavaScript in view -

my knowledge of asp.net limited , new, please correct i've failed understand.

i'm current generating collection of graphs using google charts, each time i'm querying database same set of data. i'd store somewhere or retrieve data once improve performance.

i looked caching, every time script moved onto next chart, data no longer in cache. other idea data once, generate json strings charts, , store them in model. data going 'model.chart1 - model.chart2' etc.

however, cannot seem access data javascript in view. able there html placing '@model.chart1' inside div container.

the desired behaviour access data inside jquery function shown below. instead of calling method controller, directly access model field 'var chart1 = @model.chartone'

<script type="text/javascript">      google.charts.load('current', { 'packages': ['corechart'] });     google.charts.setonloadcallback(drawchartone);     google.charts.setonloadcallback(drawcharttwo);      function drawchartone() {          var jsondata = $.ajax({             url: "/controller/getchartone",             datatype: "json",             async: false         }).responsetext;          var options = {              title: 'chart one',              haxis: {                 title: 'date'             },              vaxis: {                 title: 'hours'             },              explorer: {                 keepinbounds: true             },              height: 500,             width: 1000          };          var data = new google.visualization.datatable(jsondata);          var chart = new google.visualization.linechart(document.getelementbyid('chartone'));         chart.draw(data, options);      }      function drawcharttwo() {          var jsondata = $.ajax({             url: "/controller/getcharttwo",             datatype: "json",             async: false         }).responsetext;          var options = {              title: 'chart two',              haxis: {                 title: 'date'             },              vaxis: {                 title: 'hours'             },              explorer: {                 keepinbounds: true             },              height: 500,             width: 1000          };          var data = new google.visualization.datatable(jsondata);          var chart = new google.visualization.linechart(document.getelementbyid('charttwo'));         chart.draw(data, options);      }     </script> 

i solved little reading , education proper use of mvc.

i ended creating base model class called "graph", , 2 models graphone , graphtwo, both inheriting graph.

i created viewmodel stored list of type graph. meant store different graphs in 1 list access within javascript.

from controller, on request, load data once, , pass data each graphone , graphtwo respective processing. importantly, loading data once. returned viewmodel actionresult, , access properties needed using typed data types within .cshtml class.

probably poor explanation, someone. had bit of hard time finding decent tutorial on asp mvc. here series followed , recommend: http://www.codeproject.com/articles/866143/learn-mvc-step-by-step-in-days-day