Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Dual axis with inline multi series

$
0
0
SmartClient_v90p_2014-01-09_PowerEdition

I am having an issue generating a dual axis chart that uses inlined facets. None of the examples show this case (they are using non-inline), so I am asking how to do this given the following test case.

The working chart with one axis and four series:
Code:

<!DOCTYPE html>

<html>
<head>
    <title >SNTQ-1785</title>
       
          <script type="text/javascript" >
                var isomorphicDir="http://localhost:8080/isomorphic/";

</script>
       
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Core.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Foundation.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Containers.js"></script>
  <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Grids.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Forms.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_DataBinding.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Drawing.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_PluginBridges.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Charts.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Tools.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>

 <script type="text/javascript">

        var data = [
                        { inspector: "Josh Burns", percent: 55, low:3, med:5, high:6, lt: 0 },
                        { inspector: "Chris Boehm", percent: 4, low:13, med:40, high:2, lt: 6 },
                        { inspector: "Ed Leisman", percent: 98, low:45, med:16, high:3, lt: 1 },
                        { inspector: "Prasad Reddy", percent: 12, low:1, med:2, high:36, lt: 22 }               
                ];
               
       
        </script>
       
</head>
<body>

        <script>
                chart = isc.FacetChart.create({
                        width: 508,
                        height: 400,
                        chartType: "Column",
                        valueTitle: "Severity by Inspector",
                        data: data,
                        facets: [
                          {
                                        id: "inspector"
                          },
                          {
                                        inlinedValues: true,
                                        values : [ {id:"low", title:"Low"}, {id:"med", title:"Medium"}, {id:"high", title:"High"}, {id:"lt", title:"Life Threat"}]
                          }
                        ],
                        border: "1px solid black",
                        showTitle: false,
                        dataColors: ["#00ff00", "#0000ff", "#ffff00", "#ff0000" ]
                });
               
       
        </script>

</body>

</html>

What I would like to do is have the percent drawn as a line on the chart as a separate axis. Using the examples, I change my chart to this, but its not correct, it only shows the low metric and percent as another axis.

Code:

<!DOCTYPE html>

<html>
<head>
    <title >SNTQ-1785</title>
       
          <script type="text/javascript" >
                var isomorphicDir="http://localhost:8080/isomorphic/";

</script>
       
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Core.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Foundation.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Containers.js"></script>
  <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Grids.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Forms.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_DataBinding.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Drawing.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_PluginBridges.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Charts.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Tools.js"></script>
 <script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>

 <script type="text/javascript">

        var data = [
                        { inspector: "Josh Burns", percent: 55, low:3, med:5, high:6, lt: 0 },
                        { inspector: "Chris Boehm", percent: 4, low:13, med:40, high:2, lt: 6 },
                        { inspector: "Ed Leisman", percent: 98, low:45, med:16, high:3, lt: 1 },
                        { inspector: "Prasad Reddy", percent: 12, low:1, med:2, high:36, lt: 22 }               
                ];
               
       
        </script>
       
</head>
<body>

        <script>
                chart = isc.FacetChart.create({
                        width: 508,
                        height: 400,
                        chartType: "Column",
                        valueTitle: "Severity by Inspector",
                        data: data,
                        facets: [
                          {
                                        id: "inspector"
                          },
                          {
                                        id: "metric",
                                        inlinedValues: true,
                                        values : [ {id:"low", title:"Low"}, {id:"med", title:"Medium"}, {id:"high", title:"High"}, {id:"lt", title:"Life Threat"}, {id:"percent", title:"Percent"}]
                          }
                        ],
                        extraAxisMetrics: ["percent"],
                        extraAxisSettings: [{
                                chartType: "Line",
                                multiFacet: true,
                                showDataPoints: true,
                                valueTitle: "Percent"
                        }],
                        border: "1px solid black",
                        showTitle: false,
                        dataColors: ["#00ff00", "#0000ff", "#ffff00", "#ff0000" ]
                });
               
       
        </script>

</body>

</html>

[/code]

Viewing all articles
Browse latest Browse all 4756

Trending Articles