Graph libs for javascript
Jump to navigation
Jump to search
https://github.com/zingchart/awesome-charting#free-and-open-source-libraries
https://developers.google.com/chart/interactive/docs/gallery
https://developers.google.com/chart/interactive/docs/gallery/linechart
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales'], [new Date(2001,01,01), 30], [new Date(2002,01,01), 70], [new Date(2003,01,01), 45], [new Date(2004,01,01), 99], [new Date(2005,01,01), 22], [new Date(2006,01,01), 0], [new Date(2007,01,01), 89], [new Date(2008,01,01), 30], [new Date(2009,01,01), 32], [new Date(2010,01,01), 77], [new Date(2011,01,01), 67], [new Date(2012,01,01), 22], [new Date(2013,01,01), 23], [new Date(2014,01,01), 25], [new Date(2015,01,01), 9], [new Date(2016,01,01), 10], [new Date(2017,01,01), 77], [new Date(2018,01,01), 47], [new Date(2019,01,01), 22], [new Date(2020,01,01), 23], [new Date(2022,01,01), 12], [new Date(2023,01,01), 9], [new Date(2024,01,01), 10], [new Date(2025,01,01), 10], [new Date(2026,01,01), 77], [new Date(2027,01,01), 67], [new Date(2028,01,01), 22], [new Date(2029,01,01), 23], [new Date(2030,01,01), 34], [new Date(2031,01,01), 9], [new Date(2032,01,01), 10], [new Date(2033,01,01), 22], [new Date(2034,01,01), 23], [new Date(2035,01,01), 19], [new Date(2036,01,01), 12], [new Date(2037,01,01), 10], [new Date(2038,01,01), 17], [new Date(2039,01,01), 6], [new Date(2040,01,01), 6], [new Date(2041,01,01), 22], [new Date(2042,01,01), 23], [new Date(2043,01,01), 71], [new Date(2044,01,01), 9], [new Date(2045,01,01), 10], [new Date(2046,01,01), 78], [new Date(2047,01,01), 67], [new Date(2048,01,01), 22], [new Date(2049,01,01), 23], [new Date(2050,01,01), 12], [new Date(2051,01,01), 13], [new Date(2052,01,01), 10], [new Date(2053,01,01), 77], [new Date(2054,01,01), 47], [new Date(2055,01,01), 22], [new Date(2056,01,01), 23], [new Date(2057,01,01), 12], [new Date(2058,01,01), 9], [new Date(2059,01,01), 10], [new Date(2060,01,01), 10], [new Date(2061,01,01), 76], [new Date(2062,01,01), 67], [new Date(2063,01,01), 22], [new Date(2064,01,01), 23], [new Date(2065,01,01), 34], [new Date(2066,01,01), 9], [new Date(2067,01,01), 10], [new Date(2068,01,01), 22], [new Date(2069,01,01), 23], [new Date(2070,01,01), 19], [new Date(2071,01,01), 12], [new Date(2072,01,01), 10], [new Date(2073,01,01), 17], [new Date(2074,01,01), 6], [new Date(2075,01,01), 6], [new Date(2076,01,01), 22], [new Date(2077,01,01), 23], [new Date(2078,01,01), 70], [new Date(2079,01,01), 9], [new Date(2080,01,01), 10], [new Date(2081,01,01), 72], [new Date(2082,01,01), 67], [new Date(2083,01,01), 22], [new Date(2084,00,04), 23], [new Date(2085,01,01), 12], [new Date(2086,01,01), 13] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}, slantedText:true, slantedTextAngle:80}, vAxis: {minValue: 0}, explorer: { actions: ['dragToZoom', 'rightClickToReset'], axis: 'horizontal', keepInBounds: true, maxZoomIn: 4.0}, colors: ['#D44E41'], }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }