Next
Update
Prev
DisApply Pattern

The twenty different types of patterns are supported in KoolChart for visually impaired users. You can use the default patterns or choose a pattern file in the JavaScript function.

This sample chart is to show how to use custom pattern files.

If you want to use the custom pattern files, you must set the JavaScript function name to the value of patternJsFunction attribute in the series element tag ( e.g. <Column2DSeries>, <Column3DSeries>, etc. ).

...
<Column2DChart ... patternMode="true" >
  ...
  <Column2DSeries ... patternJsFunction="patternFunc" >
    ...
  </Column2DSeries>
  ...
</Column2DChart>
...

// patternIndex
// 0: ▨ - diagonal_ltr.png
// 1: ▧ - diagonal_rtl.png
// 2: ▩ - diagonal.png
// 3: ▤ - horizontal.png
// 4: ▥ - vertical.png
// 5: ▦ - both.png
// 6: ∧ - up.png
// 7: > - right.png
// 8: ~ - horizontal_curve.png
// 9: ∫ - vertical_curve.png
// 10:  - horizontal pipe
// 11:  - vertical pipe
// 12: □ - rectangle.png
// 13: O - circle.png
// 14: ◇ - diamond.png
// 15: △ - triangle.png
// 16: ▽ - down_triangle.png
// 17: + - cross.png
// 18: ▣ - rectangle2.png
// 19: ⊙ - circle.png
function patternFunc(id, values, patternIndex) 
{
  if(values[1] <= 1500)
    return 5;
  else if(values[1] >= 1500 && values[1] <= 2500)
    return 14;
  else
    return 19;
    
  return 0;
}

You must set as usePattern="true" in chartVars, and set the directory path ( KoolChart.patternImageBaseUrl ) of the pattern files and the file names ( KoolChart.patternImagesUrl ).

If you want to use your own pattern files, then you must copy your pattern files to the directory ( KoolChart.patternImageBaseUrl ), and add the file names to the array list ( KoolChart.patternImagesUrl ).

...					
var chartVars1 = "KoolOnLoadCallFunction=chartReadyHandler";
chartVars1 += "&usePattern=true";

KoolChart.patternImageBaseUrl = "/KoolChart/Assets/Patterns/";

KoolChart.patternImagesUrl = [
  "diagonal_ltr.png",
  "diagonal_rtl.png",
  "diagonal.png",
  "horizontal.png",
  "vertical.png",
  "both.png",
  "up.png",
  "right.png",
  "horizontal_curve.png",
  "vertical_curve.png",
  "horizontal_pipe.png",
  "vertical_pipe.png",
  "rectangle.png",
  "circle.png",
  "diamond.png",
  "triangle.png",
  "down_triangle.png",
  "cross.png",
  "rectangle2.png",
  "circle.png"
];
...

© 2017 KoolChart. All rights reserved.