Creating an interactive Google line chart in MVC4

Question

Creating an interactive Google line chart in MVC4

I am currently working on a dynamic line chart that needs to be able to adjust the number of lines (Standard, Latest, Earliest, Average) based on the database records. My code structure is similar to this example.

function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Month', 'Standard', 'Latest', 'Earliest', 'Average'],
            ['Original Documents', @Convert.ToDecimal(@Standard[0].ToString()), @Convert.ToDecimal(@Latest[0].ToString()), @Convert.ToDecimal(@Earliest[0].ToString()), @Convert.ToDecimal(@Average[0].ToString())],
            ["Filing of Entries", @Convert.ToDecimal(@Standard[1].ToString()), @Convert.ToDecimal(@Latest[1].ToString()), @Convert.ToDecimal(@Earliest[1].ToString()), @Convert.ToDecimal(@Average[1].ToString())],
            ["Assessment of Duties", @Convert.ToDecimal(@Standard[2].ToString()), @Convert.ToDecimal(@Latest[2].ToString()), @Convert.ToDecimal(@Earliest[2].ToString()), @Convert.ToDecimal(@Average[2].ToString())],
            ["Payment of Duties", @Convert.ToDecimal(@Standard[3].ToString()), @Convert.ToDecimal(@Latest[3].ToString()), @Convert.ToDecimal(@Earliest[3].toString()), Convert.ToDecimal(@Average[3].ToString())],
            ["Releasing", Convert.ToDecimal(@Standard[4].toString()), Convert.ToDecimal(@Latest[4].ToString()), Convert.ToDecimal(@Earliest[4].toString()), Convert.ToDecimal(@Average[4].toString())],
            ["Gate Pass", Convert.ToDecimal(@Standard[5].toString()), Convert.ToDecimal(@Latest[5].toString()), Convert.ToDecimal(@Earliest[5].toString()), Convert.ToDecimal(@Average[5].toString())],
            ["Delivery", Convert.ToDecimal(@Standard[6].toString()), Convert.ToDecimal(@Latest[6].toString()), Convert.ToDecimal(@Earliest[6].toString()), Convert.ToDecimal(@Average[6].toString())]
        ]);

https://i.stack.imgur.com/tiOBw.png

javascript c#ajax asp.net-mvc-4 google-visualization

Answer 1

Answer №1

Consider modifying your function to accept a Json array in the following format:

function drawChart(jsonData) {
    var array = JSON.parse(jsonData);
    var data = google.visualization.arrayToDataTable(array);
    var options = {
        hAxis: {
          title: 'X-Axis Legend'
        },
        vAxis: {
          title: 'Y-Axis Legend'
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

The data should be structured in a row-per-x-position, column-per-line format as outlined in the documentation:

Rows: Each row in the table represents a set of data points with the same x-axis location.

To populate this Json from your controller method, you can use a loop or other technique to add each new line and its corresponding data dynamically:

var data = new[] {  
    new[] {"Month", "Line1", "Line2", "Line3", "Line4"}, // Add new lines here
    new object[] {"x-label1", 1, 2, 3, 4 }, // Add data points
    new object[] {"x-label2", 11, 12, 13, 14 },
    new object[] {"x-label3", 7, 6, 2, 17 },
    new object[] {"x-label3", 17, 19, 23, 9 },
    new object[] {"x-label3", 12, 4, 11, 18 }
};
var json = Newtonsoft.Json.JsonConvert.SerializeObject(data);

This results in the following Json being generated:

[["Month","Line1","Line2","Line3","Line4"],["x-label1",1,2,3,4],["x-label2",11,12,13,14],["x-label3",7,6,2,17],["x-label3",17,19,23,9],["x-label3",12,4,11,18]]

For a visual representation and implementation example, check out this JSFiddle demonstration.

UPDATE: Below is a sample C# code snippet to convert your line data from row-based to columnar format. Adjust the number of lines as needed and paste the resulting Json into the provided JSFiddle example for visualization:

var numberOfLines = 7; // Specify the number of lines desired.
var xAxisHeadings = new object[] { "NOT USED", "Original Documents", "Filing of Entries", "Assessment of Duties", "Payment of Duties", "Releasing", "Gate Pass", "Delivery" };
var lines = new List<object[]>();
lines.Add(xAxisHeadings);

// Generate data for each line based on multiples of the line number
for (int i=0; i<numberOfLines; i++)
{
    lines.Add(new object[] { "L" + i, 1 * (i+1), 2 * (i+1), 3 * (i+1), 4 * (i+1), 5 * (i+1), 6 * (i+1), 7 * (i+1) });
}

var answer = new List<object>{};
for (int i=0; i<lines.Count; i++)
{
    var x = lines.Select(a => a[i]).ToArray();
    answer.Add(x);
}

var json = Newtonsoft.Json.JsonConvert.SerializeObject(answer);

The resulting Json is as follows:

[["NOT USED","L0","L1","L2","L3","L4","L5","L6"],["Original Documents",1,2,3,4,5,6,7],["Filing of Entries",2,4,6,8,10,12,14],["Assessment of Duties",3,6,9,12,15,18,21],["Payment of Duties",4,8,12,16,20,24,28],["Releasing",5,10,15,20,25,30,35],["Gate Pass",6,12,18,24,30,36,42],["Delivery",7,14,21,28,35,42,49]]

By integrating this into the existing JSFiddle example, you can visualize the updated data with this revised JSFiddle demo.

Answer 2

Consider modifying your function to accept a Json array in the following format:

function drawChart(jsonData) {
    var array = JSON.parse(jsonData);
    var data = google.visualization.arrayToDataTable(array);
    var options = {
        hAxis: {
          title: 'X-Axis Legend'
        },
        vAxis: {
          title: 'Y-Axis Legend'
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

The data should be structured in a row-per-x-position, column-per-line format as outlined in the documentation:

Rows: Each row in the table represents a set of data points with the same x-axis location.

To populate this Json from your controller method, you can use a loop or other technique to add each new line and its corresponding data dynamically:

var data = new[] {  
    new[] {"Month", "Line1", "Line2", "Line3", "Line4"}, // Add new lines here
    new object[] {"x-label1", 1, 2, 3, 4 }, // Add data points
    new object[] {"x-label2", 11, 12, 13, 14 },
    new object[] {"x-label3", 7, 6, 2, 17 },
    new object[] {"x-label3", 17, 19, 23, 9 },
    new object[] {"x-label3", 12, 4, 11, 18 }
};
var json = Newtonsoft.Json.JsonConvert.SerializeObject(data);

This results in the following Json being generated:

[["Month","Line1","Line2","Line3","Line4"],["x-label1",1,2,3,4],["x-label2",11,12,13,14],["x-label3",7,6,2,17],["x-label3",17,19,23,9],["x-label3",12,4,11,18]]

For a visual representation and implementation example, check out this JSFiddle demonstration.

UPDATE: Below is a sample C# code snippet to convert your line data from row-based to columnar format. Adjust the number of lines as needed and paste the resulting Json into the provided JSFiddle example for visualization:

var numberOfLines = 7; // Specify the number of lines desired.
var xAxisHeadings = new object[] { "NOT USED", "Original Documents", "Filing of Entries", "Assessment of Duties", "Payment of Duties", "Releasing", "Gate Pass", "Delivery" };
var lines = new List<object[]>();
lines.Add(xAxisHeadings);

// Generate data for each line based on multiples of the line number
for (int i=0; i<numberOfLines; i++)
{
    lines.Add(new object[] { "L" + i, 1 * (i+1), 2 * (i+1), 3 * (i+1), 4 * (i+1), 5 * (i+1), 6 * (i+1), 7 * (i+1) });
}

var answer = new List<object>{};
for (int i=0; i<lines.Count; i++)
{
    var x = lines.Select(a => a[i]).ToArray();
    answer.Add(x);
}

var json = Newtonsoft.Json.JsonConvert.SerializeObject(answer);

The resulting Json is as follows:

[["NOT USED","L0","L1","L2","L3","L4","L5","L6"],["Original Documents",1,2,3,4,5,6,7],["Filing of Entries",2,4,6,8,10,12,14],["Assessment of Duties",3,6,9,12,15,18,21],["Payment of Duties",4,8,12,16,20,24,28],["Releasing",5,10,15,20,25,30,35],["Gate Pass",6,12,18,24,30,36,42],["Delivery",7,14,21,28,35,42,49]]

By integrating this into the existing JSFiddle example, you can visualize the updated data with this revised JSFiddle demo.

Creating an interactive Google line chart in MVC4

Answer №1

Similar questions

Effortlessly glide to a specific div ID upon page load using the URL address

jQuery Autocomplete with Link Options

"Enhance your Magento store with the ability to showcase multiple configurable products on the category page, even when dropdown values are not

Tips for retrieving javascript-generated HTML content

Using radio buttons to toggle the visibility of a div element within a WordPress website

What is the correct way to use assert in Selenium to verify if a newly added item has been successfully added to the system?

linking to a page that shows the user's chosen option from a dropdown menu

Communicating PHP variables with JavaScript through AJAX in a chat application

Showcasing a JSON file in the interface using $http in AngularJS

Activate the last div within the identical class

Incorporate custom JavaScript files that contain classes within a Vue component

Create a new visual masterpiece using Canvas by repurposing an

Angular directive has issues with $compile functionality

Utilize JQuery to extract data from JSON and populate form inputs

Loading jQuery on Ajax can be a challenge

Swap out internal Wordpress hyperlinks for Next.js Link Component

Transform CI_Model into JSON format and then forward it to AJAX communication

Elevate the element from the choice API to the organization API using this.$parent

The style properties of Material UI ButtonGroup are not being properly applied

Issue with HTML5 Canvas y-axis dimensions