How to load a javascript chart on the 2nd, 3rd etc. page in JQuery mobile? -
i quite new jquery mobile , i've been spending days figure out apparently simple question.
here's problem: using charting javascript library amcharts. far, good... trying create simple page in jqmobile let's 2 links new pages. want when click link, amchart should display in div specific name. (amcharts displays chart in div calling chart.write('nameofthediv');
so thought event handler bound $('#container').bind('click', function(){...} should able include relevant javascript...
somehow though...it doesn't work.
here's link can see mean: http://www.noten-werkstatt.de/jqm_amcharts/
and here code index.html , relevant custom-scripting.js.
thank in advance!
regards, lisa
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery mobile , amcharts</title> <link href="amcharts/style.css" rel="stylesheet" type="text/css"> <!-- amcharts css-file local --> <link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> <!-- jq mobile css-file (cdn) --> <script src="amcharts/amcharts.js" type="text/javascript"></script> <!-- amcharts js-file local --> <script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script> <!-- jq js-file (cdn) --> <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script> <!-- jq mobile js-file (cdn) --> <script src="custom-scripting.js" type="text/javascript"></script> <!-- custom scripting js-file local --> </head> <body> <!-- ****** start page ************ --> <div data-role="page" id="page"> <div data-role="header"> <h1>main page</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2" class="page2">page two</a></li> <li><a href="#page3">page three</a></li> </ul> </div> <div id="chartserialdiv" style="height:500px !important; border: 1px solid;">it's odd...displaying chart works here (div containr #chartserialdiv)...(initialized in window.onload = function() {})<br>but want attach click handler, please click "page two"... </div><br> <div data-role="footer"> <h4>footer</h4> </div> </div> <!-- ****** 2nd page ************ --> <div data-role="page" id="page2"> <div data-role="header"> <h1>page two</h1> </div> <div data-role="content" id="test"> <!-- ****** div container "test" ************ --> if event handler worked, there must text after ":" :<br> </div> <div data-role="content" id="chartserialdiv2" style="height:500px !important; border: 1px solid;"> <!-- ****** div container "chartserialdiv" ************ --> div container #chartserialdiv2 - why chart not displaying here??? </div> <div data-role="footer"> <h4>footer</h4> </div> </div> <!-- ****** 3rd page ************ --> <div data-role="page" id="page3"> <div data-role="header"> <h1>page three</h1> </div> <div data-role="content"> there no event handler attached page 3, if read text , nothing else happens - that's correct! :-) </div> <div data-role="footer"> <h4>footer</h4> </div> </div> </body> </html> custom-scripting.js
window.onload = function() { //this displays chart on start page var chart; var dataprovider; createchart('chartserialdiv'); loadcsv("daten/budget_management_projekt_kum.csv"); //datenquelle //this supposed display chart on 2nd page when clicked on link $('#page li a.page2').bind('click', function(event){ alert("the link \"page 2\" clicked...now turn page 2 , try load chart..."); $('#test').append("event handler-check: congratulations, event handler $(\'#test\').append... worked!!!<br>"); $('#chartserialdiv2').ready(function(){ var chart; var dataprovider; createchart('chartserialdiv2'); loadcsv("daten/budget_management_projekt_kum.csv"); //datenquelle }); //event.preventdefault(); //return false; }); $(document).delegate('.ui-page', 'pageshow', function () { alert("worked"); var chart; var dataprovider; createchart('chartserialdiv2'); loadcsv("daten/budget_management_projekt_kum.csv"); //datenquelle }); } // method loads external data function loadcsv(file) { if (window.xmlhttprequest) { // ie7+, firefox, chrome, opera, safari var request = new xmlhttprequest(); } else { // code ie6, ie5 var request = new activexobject('microsoft.xmlhttp'); } // load request.open('get', file, false); request.send(); parsecsv(request.responsetext); } // method parses csv data function parsecsv(data){ data = data.replace (/,/g,"."); // suche nach komma und ersetze durch punkt var rows = data.split("\r"); // suche nach zeilenumbruch und spalte dort zeile ab dataprovider = []; (var = 1; < rows.length; i++){ // i=1 wegen der Überschriften if (rows[i]) { var column = rows[i].split(";"); var category = column[0]; var value1 = column[1]; var value2 = column[2]; var value3 = column[3]; var dataobject = {category:category, value1:value1, value2:value2, value3:value3}; dataprovider.push(dataobject); } } chart.dataprovider = dataprovider; chart.validatedata(); } function createchart(container){ // method creates chart chart = new amcharts.amserialchart(); // chart variable declared in top chart.addtitle('chart',12, '#ffffff', 1, true); chart.addlabel(15, 25, 'mio. €', 'left', 10, '#000000', 0, 1, true); chart.backgroundalpha = 1; chart.backgroundcolor = '#ffffff'; chart.categoryfield = "category"; // here tell chart name of category field in our data provider. wwe called "date" (look @ parsecsv method) var graph = new amcharts.amgraph(); // chart must have @ least 1 graph graph.valuefield = "value1"; // graph should know @ field data provider should values. graph.linethickness = 3; graph.linecolor = "#336699"; graph.type = "column"; graph.bulletalpha = 1; graph.balloontext = "plan kum.:[[value]] mio. €"; graph.title = "plan kum."; graph.fillalphas = 1; chart.addgraph(graph); // add graph chart var graph2 = new amcharts.amgraph(); graph2.valuefield = "value2" graph2.linethickness = 3; graph2.bullet = "bubble"; graph2.balloontext = "ist kum.:[[value]] mio. €"; graph2.title = "ist kum."; graph2.linecolor = "#ff9933"; chart.addgraph(graph2); var graph3 = new amcharts.amgraph(); graph3.valuefield = "value3"; graph3.linethickness = 5; graph3.bulletalpha = 1; graph3.linecolor = "#999999"; graph3.type = "column"; graph3.fillalphas = 1; graph3.dashlength = 5; graph3.balloontext = "forecast kum.:[[value]] mio. €"; graph3.title = "forecast kum."; chart.addgraph(graph3); var legend = new amcharts.amlegend(); chart.addlegend(legend); legend.align = "center"; legend.backgroundalpha = 1; legend.backgroundcolor ="#cccccc"; legend.borderalpha = 1; legend.bordercolor = "#000000"; legend.equalwidths =true; legend.horizontalgap = 1; legend.switchtype = "v"; legend.markerborderalpha = 1; legend.markerborderthickness = 1; legend.markerbordercolor = "#ffffff"; legend.markerlabelgap = 5; legend.position = "bottom"; // 'chartserialdiv' id of container chart chart.write(container); }
you need place code generate chart in pagshow event, like
$(document).delegate('#page2', 'pageshow', function( ) { createchart('chartserialdiv2'); loadcsv("daten/budget_management_projekt_kum.csv"); });
Comments
Post a Comment