A JavaScript library for displaying Google Charts unobtrusively.
Add JQuery and Google Charts dependencies:
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/craigles/[email protected]/unobtrusive-google-charts.min.js"></script>
</head><div
class='chart'
chart-type='bar'
data='data/genresPlayedOnJJJ.json'
options='{"orientation": "vertical"}'>
</div><div
class='chart'
chart-type='pie'
data='data/genrePercentages.json'>
</div><div
class="chart"
chart-type="line"
data-options='{"curveType": "function"}'
data="data/locationsPlayedOnJJJPerYear.json">
</div><div
class="chart"
chart-type="table"
data="data/artistsLocationTable.json"
columns='[["string", "Location"],["number", "Artists"],["number", "Artists per 100 000 people"]]'
data-options='{
"showRowNumber": false,
"width": "100%",
"height": "100%",
"sortColumn": 2,
"sortAscending": false
}'>
</div><div
class="chart"
chart-type="geoMap"
data="data/artistsByLocation.json">
</div><select class="chartSelect" chart-id="mostpopularinfluences">
<option value="data/mostPopularInfluences.json">All</option>
<option value="data/mostPopularInfluencesDance.json">Dance</option>
<option value="data/mostPopularInfluencesElectronic.json">Electronic</option>
<option value="data/mostPopularInfluencesHipHop.json">Hip Hop</option>
<option value="data/mostPopularInfluencesIndie.json">Indie</option>
<option value="data/mostPopularInfluencesMetal.json">Metal</option>
<option value="data/mostPopularInfluencesPop.json">Pop</option>
<option value="data/mostPopularInfluencesPunk.json">Punk</option>
<option value="data/mostPopularInfluencesRock.json">Rock</option>
<option value="data/mostPopularInfluencesRoots.json">Roots</option>
</select>
<div
id="mostpopularinfluences"
class="chart"
chart-type="bar"
data="data/mostPopularInfluences.json">
</div>Options set here will be used if no options are set in the chart element.
unobtrusiveGoogleCharts.options.geoMap = {
region: 'AU',
displayMode: 'markers',
colors: ['blue', 'red']
};
unobtrusiveGoogleCharts.options.bar = {
orientation: "vertical",
legend: { position: "none" }
};
unobtrusiveGoogleCharts.options.line = {
curveType: "function"
}
unobtrusiveGoogleCharts.options.mapsApiKey = "Your Api key";Consider using: