MVC5 Classic
wijcompositechart Step 3 of 3: Running the Project

In this step you will run the application and observe the new data and char elements that include titles for the X and Y axis, Chart header, and chart labels.

  1. Press F5 to run the application.
  2. Observe the following:
    • Hover over any of the chart series and notice a tooltip appears stating the value of the label property, and the Y value of that series.
      The tooltip appears when the following code is used:
      hint: {
                      content: function () {
                          return this.label + '<br/> ' + this.y + '';
                      }
                  },
      

    • Notice the title for the chart header appears when we used the following code:
      header: {
                      text: "Hardware Distribution"
                  },
      
    • Three different types of charts: Pie, Column, and Line appear with several data series for each one.The following code is used to achieve the result:
      seriesList: [{
                      type: "column",
                      label: "West",
                      legendEntry: true,
                      data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [5, 3, 4, 7, 2] }
                  }, {
                      type: "column",
                      label: "Central",
                      legendEntry: true,
                      data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [2, 2, 3, 2, 1] }
                  }, {
                      type: "column",
                      label: "East",
                      legendEntry: true,
                      data: { x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'], y: [3, 4, 4, 2, 5] }
                  }, {
                      type: "pie",
                      label: "asdfdsfdsf",
                      legendEntry: true,
                      center: { x: 150, y: 150 },
                      radius: 60,
                      data: [{
                          label: "MacBook Pro",
                          legendEntry: true,
                          data: 46.78,
                          offset: 15
                      }, {
                          label: "iMac",
                          legendEntry: true,
                          data: 23.18,
                          offset: 0
                      }, {
                          label: "MacBook",
                          legendEntry: true,
                          data: 20.25,
                          offset: 0
                      }]
                  }, {
                      type: "line",
                      label: "Steam1",
                      legendEntry: true,
                      data: {
                          x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                          y: [3, 6, 2, 9, 5]
                      },
                      markers: {
                          visible: true,
                          type: "circle"
                      }
                  }, {
                      type: "line",
                      label: "Steam2",
                      legendEntry: true,
                      data: {
                          x: ['Desktops', 'Notebooks', 'AIO', 'Tablets', 'Phones'],
                          y: [1, 3, 4, 7, 2]
                      },
                      markers: {
                          visible: true,
                          type: "tri"
                      }
                  }
                           ]
      
    • The Y-Axis title, “Total Hardware” is applied to the Composite chart and the X-Axis title as an empty string. The following code is used to achieve the result:
      axis: {
                      y: {
                          text: "Total Hardware"
                      },
                      x: {
                          text: ""
                      }
                  },
      

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback