Is it possible to create line chart with following csv data

I tried to create line chart using google chart apis and other for following csv data. None of them helped:

csv data looks like this:

"Date,Term,Segment,Visitor"
"2014/01/01,2014/01/01 - 2014/01/31,All visitors,2"
"2014/01/01,2014/01/01 - 2014/01/31,New user,0"
"2014/01/01,2014/01/01 - 2014/01/31,Mobile traffic,0"
"2014/01/02,2014/01/01 - 2014/01/31,All visitors,7"
"2014/01/02,2014/01/01 - 2014/01/31,New user,1"
"2014/01/02,2014/01/01 - 2014/01/31,Mobile traffic,0"
"2014/01/03,2014/01/01 - 2014/01/31,All visitors,5"
"2014/01/03,2014/01/01 - 2014/01/31,New user,0"
"2014/01/03,2014/01/01 - 2014/01/31,Mobile traffic,0"
"2014/01/04,2014/01/01 - 2014/01/31,All visitors,3"
.............

I faced many issue while using google chart as you can find here:

CSV data loading give Not enough columns given to draw the requested chart

Is it possible to create line chart for this short of data?

Chart should look like this:

--------UPDATED CODE -----------

Why does it not show EVEN dates on X- axix?

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
    function drawChart() {
       $.get("Chart3-data1.csv", function(csvString) {
        var transData = [['Date', 'All visitors', 'New user', 'Mobile traffic']];
          var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

for (var i = 1; i < arrayData.length; i++) {
        console.log(arrayData[i][0]);
        var fields = arrayData[i][0].split(',');
        console.log(fields);
        switch ( (i - 1) % 3) {
        case 0:
            var allVisitors = parseInt(fields[3]);
            break;
        case 1:
            var newUser = parseInt(fields[3]);
            break;
        case 2:
            var mobile = parseInt(fields[3]);
            transData.push([ fields[0], allVisitors, newUser, mobile] );
            break;
        }
    }
          var data = new google.visualization.arrayToDataTable(transData);
         var options =
        {
                title: 'Company Performance'
         };
        var chart = new google.visualization.LineChart(document.getElementById('gauge'));
        chart.draw(data, options);
});
      }
    </script>
  </head>
  <body>
    <div id="gauge" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Resulting graph:

Answers


I'd change your csv data to:

Date, All visitors, New user, Mobile traffic
2014/01/01, 2, 0, 0
2014/01/02, 7, 1, 0
2014/01/03, 5, 0, 0
2014/01/04, 3, 0, 2
2014/01/05, 4, 1, 2

From those data this chart is produced (no changes in code):

Change of data - one option with JS:

$.get("chart-data-orig.csv", function(csvString) {
    var transData = [['Date', 'All visitors', 'New user', 'Mobile traffic']];

    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

    // index 0 is header which will be changed
    for (var i = 1; i < arrayData.length; i++) {
        console.log(arrayData[i][0]);
        var fields = arrayData[i][0].split(',');
        console.log(fields);

        switch ( (i - 1) % 3) {
        case 0:
            var allVisitors = parseInt(fields[3]);
            break;
        case 1:
            var newUser = parseInt(fields[3]);
            break;
        case 2:
            var mobile = parseInt(fields[3]);
            transData.push([ fields[0], allVisitors, newUser, mobile] );
            break;
        }
    }

    var data = new google.visualization.arrayToDataTable(transData);
    var options = {
        title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(
                        document.getElementById('chart_div'));
    chart.draw(data, options);
});

Need Your Help

Writing a comparator that sorts based on multiple fields

java sorting java-7

I have 3 data fields, let's name them Field 1, Field 2, Field 3

Matlab to Julia Optimization: Function in JuMP @SetNLObjective

matlab julia mathematical-optimization julia-jump

I am trying to rewrite a Matlab fmincon optimization function in Julia.