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

Showing a div element with the power of JavaScript

Incomplete Loading of Google Maps

Silky animations in kinetic.js (html5 canvas)

Generate Material UI sidebar components that are positioned above all other components

How to style TextInput to display dollar amounts when using onChangeText and Redux in React Native

What is causing the button within my ExtJS grid to display as "[object Object]"?

Error occurs when attempting to read the 'map' properties of null because the JSON array is double nested

Alter the hyperlink to a different value based on a specific condition

The function $.ajax({}) is not recognized in the Django framework

"Enhance your web development with Vue.js and Vue-chart.js for beautiful linear

The React Component is limited to updating once

What is the proper way to utilize "three.module.js"?

Detecting Pixel Colors Across Multiple Overlapping Canvases

display a visual element within a function using reasoning

Protection of Angular expressions

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

Achieving top-tier efficiency in segmenting items within an array of objects

Combine arrays using union or intersection to generate a new array

Customized queries based on conditional routes - expressjs

Troubleshooting Block-scoped errors on Heroku using Node.js and Express