Google Line charts Customizing vAxes with string and define position -
i try implement line chart string on xaxie , vaxie. vaxie want start 10eme
, finish 1er
value. possible switch these values? today :
10eme
9eme
8eme
7eme
6eme
4eme
3eme
2eme
1er
1 journee / 2 journee / 3 journee / ...
target :
1er
2eme
3eme
4eme
5eme
6eme
7eme
8eme
9eme
10eme
1 journee / 2 journee / 3 journee / ...
<!doctype html> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setonloadcallback(drawchart); function drawchart() { var data = google.visualization.arraytodatatable([ ['journee', 'position'], ['1 journee', 10], ['2 journee', 7], ['3 journee', 7], ['4 journee', 6], ['5 journee', 8], ['6 journee', 9], ['7 journee', 10] ]); var options = { title: 'evolution au classement', haxis: {title: 'journee', titletextstyle: {color: '#333'}}, vaxis: {title: 'classement'}, vaxis: {minvalue: 1}, vaxis: {maxvalue: 10}, viewwindowmode:'explicit', vaxis: {title: 'classement', ticks: [{v:1, f:"1er"},{v:9, f:"9eme"},{v:8, f:"8eme"},{v:7, f:"7eme"},{v:6, f:"6eme"},{v:5, f:"5eme"},{v:4, f:"4eme"},{v:3, f:"3eme"},{v:2, f:"2eme"},{v:10, f:"10eme"}]}, pointsize: 5, }; var chart = new google.visualization.areachart(document.getelementbyid('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
it ok found way direction: -1 in vaxis option. here result. thank you
<!doctype html> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setonloadcallback(drawchart); function drawchart() { var data = google.visualization.arraytodatatable([ ['journee', 'equipe 1', 'equipe 2'], ['1 journee', 1, 3], ['2 journee', 2, 5], ['3 journee', 5, 4], ['4 journee', 5, 3], ['5 journee', 6, 5], ['6 journee', 4, 6], ['7 journee', 2, 7] ]); var options = { title: 'evolution au classement', curvetype: 'function', haxis: {title: 'journee', titletextstyle: {color: '#333'}}, vaxis: {title: 'classement', minvalue: 0, maxvalue: 11, direction: -1, ticks: [{v:0, f:""},{v:1, f:"1er"},{v:9, f:"9eme"},{v:8, f:"8eme"},{v:7, f:"7eme"},{v:6, f:"6eme"},{v:5, f:"5eme"},{v:4, f:"4eme"},{v:3, f:"3eme"},{v:2, f:"2eme"},{v:10, f:"10eme"},{v:11, f:""}]}, pointsize: 5, }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Comments
Post a Comment