0 Replies - 2164 Views - Last Post: 10 April 2012 - 08:36 AM

#1 rbflowers  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 10-February 12

HighCharts, MVC3 web app problem

Posted 10 April 2012 - 08:36 AM

This is a pretty detailed problem, so I'm going to break it into parts

1) Background.
I'm creating an asp.net MVC3 web application for a dashboard with drivedown column graphs and pie charts.

2) _Layout.cshtml

I call the following js files in the head section:


<!--Link all of the Charts-->
<script src="@Url.Content("~/Content/JSCharts/ProductionCharts.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/JSCharts/CommunicationCharts.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/JSCharts/AttritionCharts.js")" type="text/javascript"></script>

These files all contain 4 charts- 2 drivedowns and 2 piecharts.
The chart variable names are all different and each chart renders to a different named id.
EX) in productioncharts.js I have the charts: ProdCol, ProdCol2, ProdPie, ProdPie2 rendering to: Prod, Prod2, ProdP, ProdP2
This is the same naming format for communication and attrition

I have 3 different files because I have three different nav/menu tabs (you guessed it, production, communication, attrition).
When you click on one of the tabs, that page should load their 4 graphs.

3) The problem
I know that the chart names and the rendering to all works. Here's why:
When all three js files are linked in _layout.cshtml head (like above), the production graphs show up on the index.cshtml (like they should), but the communication and attrition graphs do not show up when their tabs are clicked.

Weird, I double checked to make sure there were no errors in my code and somehow got the idea to delete the call for productioncharts.js in _Layout.cshtml, leaving only communcationcharts.js and attritioncharts.js

Now, the production charts went away (as they should), the communication charts showed up, but the attrition charts did not..

I took away communicationcharts.js and left only attritioncharts.js and likewise, the only page that showed charts was attrition.

So, everything works IOI that topic's js file is the "only one/top file" being called in _Layout.cshtml

4) My first attempt at solution

I thought... maybe for some weird reason I can't call all three separate js files...
So I tried placing all 12 graphs into one js file AllCharts.js. As before, only the production charts would show up.
I deleted the JS code to the production charts, and now the communication charts show up, but not the attrition.

same problem as before...

5) My second try
I reverted back to what I had before (3 different js files with that topics charts in them) and tried calling the production graphs in all of the other pages.
It works. all three pages display the production graphs correctly.


Another thought:
all the charts in the js files are called like this:

$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories = ['x', 'x', 'x', 'x', 'x'],
name = 'yyyyy',
data ...........
Could it be that I'm calling them with ready(function ()? Why would the other 3 work if that is the case?


What is wrong?

I can attach my code if need to, I would just have to change all the personal data and I would rather not have do that.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1