msenturk/create.html

## create.html
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
    <div id="chart" style="width:auto; height:300px;"></div>
</body>

<script>
    // Visualization API with the Line chart package.
    google.charts.load('current', { packages: ['line'] });
    google.charts.setOnLoadCallback(drawLineChart);

    function drawLineChart() {
        $.ajax({
            url: "https://gist.githubusercontent.com/msenturk/a154f334bd01164357752c2a242544b8/raw/55547824bb871081a2a4655a668bad101585c1ac/sample-sales.json",
            dataType: "json",
            type: "GET",
//            contentType: "text/html; charset=utf-8",
            success: function (data) {
                var arrSales = [['Month', 'Sales Figure', 'Perc. (%)']];    // Define an array and assign columns for the chart.

                // Loop through each data and populate the array.
                $.each(data, function (index, value) {
                    arrSales.push([value.Month, value.Sales_Figure, value.Perc]);
                });

                // Set chart Options.
                var options = {
                    chart: {
                        title: 'Monthly Sales',
                        subtitle: '-- quantities sold'
                    },
                    axes: {
                        x: {
                            0: { side: 'top'}   // Use "top" or "bottom".
                        }
                    }
                };

                // Create DataTable and add the array to it.
                var figures = google.visualization.arrayToDataTable(arrSales)

                // Define the chart type (LineChart) and the container (a DIV in our case).
                var chart = new google.charts.Line(document.getElementById('chart'))

                // Draw the chart with Options.
                chart.draw(figures, google.charts.Line.convertOptions(options));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('Got an Error');
            }
        });
    }
</script>
</html>

## sample-sales.json
[
    { "Month": "Jan", "Sales_Figure": 21, "Perc": 5 },
    { "Month": "Feb", "Sales_Figure": 32, "Perc": 15 },
    { "Month": "Mar", "Sales_Figure": 19, "Perc": 11 },
    { "Month": "Apr", "Sales_Figure": 8, "Perc": 17 },
    { "Month": "May", "Sales_Figure": 26, "Perc": 5 },
    { "Month": "Jun", "Sales_Figure": 31, "Perc": 2 },
    { "Month": "Jul", "Sales_Figure": 37, "Perc": 28 },
    { "Month": "Aug", "Sales_Figure": 16, "Perc": 14 },
    { "Month": "Sep", "Sales_Figure": 25, "Perc": 19 },
    { "Month": "Oct", "Sales_Figure": 30, "Perc": 8 }
]
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	</head>

	<body>
	<div id="chart" style="width:auto; height:300px;"></div>
	</body>

	<script>
	// Visualization API with the Line chart package.
	google.charts.load('current', { packages: ['line'] });
	google.charts.setOnLoadCallback(drawLineChart);

	function drawLineChart() {
	$.ajax({
	url: "https://gist.githubusercontent.com/msenturk/a154f334bd01164357752c2a242544b8/raw/55547824bb871081a2a4655a668bad101585c1ac/sample-sales.json",
	dataType: "json",
	type: "GET",
	// contentType: "text/html; charset=utf-8",
	success: function (data) {
	var arrSales = [['Month', 'Sales Figure', 'Perc. (%)']]; // Define an array and assign columns for the chart.

	// Loop through each data and populate the array.
	$.each(data, function (index, value) {
	arrSales.push([value.Month, value.Sales_Figure, value.Perc]);
	});

	// Set chart Options.
	var options = {
	chart: {
	title: 'Monthly Sales',
	subtitle: '-- quantities sold'
	},
	axes: {
	x: {
	0: { side: 'top'} // Use "top" or "bottom".
	}
	}
	};

	// Create DataTable and add the array to it.
	var figures = google.visualization.arrayToDataTable(arrSales)

	// Define the chart type (LineChart) and the container (a DIV in our case).
	var chart = new google.charts.Line(document.getElementById('chart'))

	// Draw the chart with Options.
	chart.draw(figures, google.charts.Line.convertOptions(options));
	},
	error: function (XMLHttpRequest, textStatus, errorThrown) {
	alert('Got an Error');
	}
	});
	}
	</script>
	</html>
	[
	{ "Month": "Jan", "Sales_Figure": 21, "Perc": 5 },
	{ "Month": "Feb", "Sales_Figure": 32, "Perc": 15 },
	{ "Month": "Mar", "Sales_Figure": 19, "Perc": 11 },
	{ "Month": "Apr", "Sales_Figure": 8, "Perc": 17 },
	{ "Month": "May", "Sales_Figure": 26, "Perc": 5 },
	{ "Month": "Jun", "Sales_Figure": 31, "Perc": 2 },
	{ "Month": "Jul", "Sales_Figure": 37, "Perc": 28 },
	{ "Month": "Aug", "Sales_Figure": 16, "Perc": 14 },
	{ "Month": "Sep", "Sales_Figure": 25, "Perc": 19 },
	{ "Month": "Oct", "Sales_Figure": 30, "Perc": 8 }
	]